From 5ddff998d8368ed6d97e529089e9d81c79ff69fb Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 001/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |    6 +-
 components/analytics.js                       |    6 +-
 components/announcement.js                    |   54 +-
 components/announcements/amount.js            |   12 +-
 components/announcements/cta.js               |   22 +-
 components/announcements/elon.mdx             |    4 +-
 components/announcements/holder.js            |   12 +-
 components/announcements/pills.js             |   36 +-
 components/announcements/preston-werner.mdx   |    2 +-
 components/announcements/relon.mdx            |    6 +-
 components/background-image.js                |   28 +-
 components/bio.js                             |  106 +-
 components/color-switcher.js                  |   34 +-
 components/comma.js                           |    4 +-
 components/donate/sponsors.js                 |   40 +-
 components/donate/sprigForm.js                |   82 +-
 components/donate/sprigMeta.js                |   10 +-
 components/dot.js                             |   36 +-
 components/fade-in.js                         |   20 +-
 components/flag.js                            |   26 +-
 components/flex-col.js                        |    4 +-
 components/footer.js                          |   66 +-
 components/force-theme.js                     |   12 +-
 components/hackathons/features/marketing.js   |   68 +-
 components/hackathons/features/money.js       |   88 +-
 components/hackathons/features/slack.js       |   88 +-
 components/hackathons/grant/apply.js          |  106 +-
 components/hackathons/grant/form.js           |   52 +-
 components/hackathons/keep-exploring.js       |   50 +-
 components/hackathons/landing.js              |  104 +-
 components/hackathons/overview.js             |   32 +-
 components/hackathons/recap.js                |   54 +-
 components/hackathons/scrolling-hackathons.js |  154 +--
 components/hcb/apply-button.js                |   16 +-
 components/hcb/apply/address-input.js         |  172 +--
 components/hcb/apply/alert-modal.js           |   32 +-
 components/hcb/apply/autofill-colour-fix.js   |   12 +-
 components/hcb/apply/checkbox.js              |   22 +-
 components/hcb/apply/field.js                 |   50 +-
 components/hcb/apply/form-container.js        |   28 +-
 components/hcb/apply/hcb-info.js              |   28 +-
 components/hcb/apply/nav-button.js            |  144 +-
 components/hcb/apply/org-form.js              |   26 +-
 components/hcb/apply/personal-form.js         |   44 +-
 components/hcb/apply/progress.js              |   50 +-
 components/hcb/apply/watermark.js             |   62 +-
 components/hcb/directory/card.js              |  124 +-
 components/hcb/everything.js                  |  162 +--
 components/hcb/features.js                    |   80 +-
 components/hcb/first/features.js              |  100 +-
 components/hcb/first/form.js                  |  144 +-
 components/hcb/first/steps.js                 |   84 +-
 components/hcb/first/testimonials.js          |   98 +-
 components/hcb/landing.js                     |  142 +-
 components/hcb/nonprofits.js                  |  146 +-
 components/hcb/run.js                         |   40 +-
 components/hcb/start.js                       |   22 +-
 components/hcb/stats.js                       |   78 +-
 components/hcb/testimonials.js                |  160 +--
 components/hcb/timeline.js                    |   58 +-
 components/hcb/tooltip.js                     |   48 +-
 components/icon.js                            |    8 +-
 components/index/cards/angelhacks.js          |   54 +-
 components/index/cards/button.js              |   52 +-
 components/index/cards/card-model.js          |   98 +-
 components/index/cards/clubs.js               |   54 +-
 components/index/cards/epoch.js               |  160 +--
 components/index/cards/events.js              |   52 +-
 components/index/cards/hackathons.js          |  182 +--
 components/index/cards/haxidraw.js            |   32 +-
 components/index/cards/hcb.js                 |  106 +-
 components/index/cards/inspect.js             |   24 +-
 components/index/cards/mailing-list.js        |  171 ++-
 components/index/cards/outernet.js            |   34 +-
 components/index/cards/sinerider.js           |   32 +-
 components/index/cards/slack.js               |   98 +-
 components/index/cards/sprig-console.js       |   94 +-
 components/index/cards/sprig.js               |  150 +-
 components/index/cards/winter.js              |   54 +-
 components/index/cards/workshops.js           |   56 +-
 components/index/carousel-cards.js            |   72 +-
 components/index/carousel.js                  |   38 +-
 components/index/events.js                    |   88 +-
 components/index/github.js                    |   58 +-
 components/letterhead.js                      |   78 +-
 components/mail-card.js                       |   15 +
 components/mention.js                         |   22 +-
 components/nav.js                             |  132 +-
 components/particles.js                       |   56 +-
 components/photo.js                           |   36 +-
 components/posts/emoji.js                     |   52 +-
 components/posts/index.js                     |  130 +-
 components/posts/mention.js                   |   30 +-
 components/press.mdx                          |    2 +-
 components/scroll-hint.js                     |   46 +-
 components/secret.js                          |  138 +-
 components/ship/why.mdx                       |    2 +-
 components/signature.js                       |   14 +-
 components/signatures.js                      |   14 +-
 components/slack.js                           |   80 +-
 components/slack/header.js                    |   74 +-
 components/slack/join-form.js                 |   78 +-
 components/slack/slack-events.js              |  104 +-
 components/slide-down.js                      |   24 +-
 components/slide-up.js                        |   24 +-
 components/sparkles/index.js                  |   88 +-
 components/sparkles/money.js                  |   90 +-
 components/stage.js                           |   20 +-
 components/stat.js                            |   50 +-
 components/stickers/request-form.js           |   54 +-
 components/submit.js                          |   52 +-
 components/tilt.js                            |   20 +-
 components/winter/breakdown-box.js            |   48 +-
 components/winter/breakdown.js                |   34 +-
 components/winter/footer.js                   |   22 +-
 components/winter/form.js                     |   98 +-
 components/winter/info.js                     |  104 +-
 components/winter/landing.js                  |   98 +-
 components/winter/projects.js                 |  238 ++--
 components/winter/recap.js                    |   40 +-
 components/winter/rsvp.js                     |  104 +-
 components/winter/timeline.js                 |   90 +-
 lib/dates.js                                  |  153 ++-
 lib/fetcher.js                                |    4 +-
 lib/hcb/apply/address-validation.js           |   64 +-
 lib/helpers.js                                |  235 ++--
 lib/members.js                                |    6 +-
 lib/sitemap.js                                |   44 +-
 lib/theme.js                                  |   18 +-
 lib/use-form.js                               |   94 +-
 lib/use-has-mounted.js                        |   12 +-
 lib/use-prefers-motion.js                     |   32 +-
 lib/use-prefers-reduced-motion.js             |   32 +-
 lib/use-random-interval.js                    |   41 +-
 middleware.js                                 |   20 +-
 next.config.mjs                               |  340 ++---
 pages/404.js                                  |   44 +-
 pages/_app.js                                 |   20 +-
 pages/_document.js                            |   44 +-
 pages/amas/geohot.js                          |  318 ++---
 pages/amas/index.js                           |  114 +-
 pages/amas/sal.js                             |  292 ++--
 pages/amas/vitalik.js                         |  300 ++--
 pages/api/channels/dogs.js                    |   10 +-
 pages/api/channels/resolve.js                 |   20 +-
 pages/api/contribute.js                       |   20 +-
 pages/api/first-team.js                       |   16 +-
 pages/api/games.js                            |   12 +-
 pages/api/github.js                           |   52 +-
 pages/api/hcb/apply.js                        |   94 +-
 pages/api/hcb/demo.js                         |   50 +-
 pages/api/join.js                             |  106 +-
 pages/api/mailing-list.js                     |   18 +-
 pages/api/slack.js                            |   32 +-
 pages/api/sprig-console.js                    |   16 +-
 pages/api/stars.js                            |   30 +-
 pages/api/stickers.js                         |   86 +-
 pages/api/stuff.js                            |   26 +-
 pages/api/winter-rsvp.js                      |   38 +-
 pages/brand.js                                |  164 +--
 pages/clubs.js                                |  328 ++---
 pages/content/covid19.mdx                     |    2 +-
 pages/content/it-admins.mdx                   |    4 +-
 pages/content/sponsorship.mdx                 |   14 +-
 pages/content/sunsetting-som.mdx              |    8 +-
 pages/content/transparency/may-2020.mdx       |    2 +-
 pages/deprecated/[deprecated].js              |   78 +-
 pages/donate.js                               |  284 ++--
 pages/elon.js                                 |   42 +-
 pages/events.js                               |  224 +--
 pages/hackathons/grant.js                     |  224 +--
 pages/hackathons/index.js                     |   46 +-
 pages/hcb/apply/index.js                      |  124 +-
 pages/hcb/apply/success.js                    |   70 +-
 pages/hcb/climate/[region].js                 |   43 +-
 pages/hcb/climate/index.js                    |  989 ++++++-------
 pages/hcb/first.js                            |  116 +-
 pages/hcb/fiscal-sponsorship.js               |  262 ++--
 pages/hcb/index.js                            |   38 +-
 pages/index.js                                |  828 +++++------
 pages/jobs/brand-director.js                  |   22 +-
 pages/jobs/clubs-lead.js                      |   22 +-
 pages/jobs/customer-success-lead.js           |   22 +-
 pages/jobs/education-engineer.js              |   22 +-
 pages/jobs/events-designer.js                 |  119 +-
 pages/jobs/executive-assistant.js             |   22 +-
 pages/jobs/executive-producer.js              |   22 +-
 pages/jobs/hcb-ops-associate.js               |   22 +-
 pages/jobs/hcb-ops-lead.js                    |   22 +-
 pages/jobs/index.js                           |  122 +-
 pages/jobs/lead-hacker.js                     |  107 +-
 .../jobs/philanthropy-communications-lead.js  |   22 +-
 pages/jobs/vp-donor-engagement.js             |   22 +-
 pages/minecraft.js                            |   62 +-
 pages/night.js                                |   83 +-
 pages/onboard.js                              |  650 ++++-----
 pages/opensource.js                           |  128 +-
 pages/philanthropy/index.js                   |  532 +++----
 pages/philanthropy/supporters.js              |  142 +-
 pages/philosophy.js                           |   82 +-
 pages/pizza.js                                | 1220 ++++++++++-------
 pages/press.js                                |   54 +-
 pages/preston-werner-2022.js                  |   50 +-
 pages/preston-werner.js                       |   46 +-
 pages/relon.js                                |   62 +-
 pages/santa.js                                |   90 +-
 pages/ship.js                                 |  130 +-
 pages/slack.js                                |  270 ++--
 pages/stickers.js                             |  134 +-
 pages/team.js                                 |   92 +-
 pages/winter.js                               |   90 +-
 prettier.config.js                            |    8 +-
 212 files changed, 9676 insertions(+), 9324 deletions(-)
 create mode 100644 components/mail-card.js

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hcb.js b/components/index/cards/hcb.js
index fdbf68c5e..ddf029af2 100644
--- a/components/index/cards/hcb.js
+++ b/components/index/cards/hcb.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Grid, Heading, Text } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Grid, Heading, Text } from "theme-ui";
+import { Fade } from "react-reveal";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
 export default function Bank({ data }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         color="white"
         sx={{
-          backgroundColor: 'dark',
-          minHeight: ['300px', '400px', '380px'],
-          backgroundColor: 'darkless',
+          backgroundColor: "dark",
+          minHeight: ["300px", "400px", "380px"],
+          backgroundColor: "darkless",
           backgroundImage: `linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('/home/hackathons-bg.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: '40%',
-          color: 'snow'
+          backgroundSize: "cover",
+          backgroundPosition: "40%",
+          color: "snow",
         }}
         badge
         text={data[0]}
       >
         <Heading
           variant="title"
-          sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3] }}
+          sx={{ color: "red", fontSize: ["36px", 4, 5], mt: [0, 3] }}
         >
           HCB
         </Heading>
-        <Grid columns={[1, '1.3fr 1fr', 2]}>
+        <Grid columns={[1, "1.3fr 1fr", 2]}>
           <Box>
             <Text as="p" variant="subtitle">
               Become a 501(c)3 nonprofit and join 700+ teams using HCB to run
@@ -48,30 +48,30 @@ export default function Bank({ data }) {
             </Buttons>
             <Box
               sx={{
-                position: 'relative',
-                width: '100%',
-                display: [null, 'none', 'none'],
-                mb: '-50px',
-                mt: 3
+                position: "relative",
+                width: "100%",
+                display: [null, "none", "none"],
+                mb: "-50px",
+                mt: 3,
               }}
             >
               <Box
                 sx={{
-                  width: '100%',
-                  height: '250px',
-                  position: 'relative',
-                  display: 'block',
-                  textAlign: 'center',
-                  '&:before': {
+                  width: "100%",
+                  height: "250px",
+                  position: "relative",
+                  display: "block",
+                  textAlign: "center",
+                  "&:before": {
                     content: '""',
-                    backgroundImage: 'url(/home/hcb-mobile.webp)',
-                    backgroundSize: '100%',
-                    backgroundRepeat: 'no-repeat',
-                    width: '100%',
-                    height: '100%',
-                    marginX: 'auto',
-                    display: 'block'
-                  }
+                    backgroundImage: "url(/home/hcb-mobile.webp)",
+                    backgroundSize: "100%",
+                    backgroundRepeat: "no-repeat",
+                    width: "100%",
+                    height: "100%",
+                    marginX: "auto",
+                    display: "block",
+                  },
                 }}
               >
                 {/* <Box
@@ -95,31 +95,31 @@ export default function Bank({ data }) {
       </CardModel>
       <Box
         sx={{
-          position: 'absolute',
-          right: [0, '-120px', '-30px'],
-          bottom: [0, '-30px', '-50px'],
-          display: ['none', 'block', 'block'],
-          zIndex: 3
+          position: "absolute",
+          right: [0, "-120px", "-30px"],
+          bottom: [0, "-30px", "-50px"],
+          display: ["none", "block", "block"],
+          zIndex: 3,
         }}
       >
-        {' '}
+        {" "}
         <Box
           sx={{
-            width: ['250px', '500px'],
-            height: ['180px', '360px'],
-            position: 'relative',
-            display: 'block',
-            textAlign: 'center',
-            '&:before': {
+            width: ["250px", "500px"],
+            height: ["180px", "360px"],
+            position: "relative",
+            display: "block",
+            textAlign: "center",
+            "&:before": {
               content: '""',
-              backgroundImage: 'url(/home/hcb.webp)',
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              width: '100%',
-              height: '100%',
-              marginX: 'auto',
-              display: 'block'
-            }
+              backgroundImage: "url(/home/hcb.webp)",
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              width: "100%",
+              height: "100%",
+              marginX: "auto",
+              display: "block",
+            },
           }}
         >
           {/* <Box
@@ -139,5 +139,5 @@ export default function Bank({ data }) {
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -9,94 +9,107 @@ import {
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/home/footer.png";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1000px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 4,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +118,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +132,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,28 +148,35 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box>
+            <MailCard/>
+        </Box>
       </Card>
       <BGImg
         gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
@@ -160,7 +185,7 @@ const MailingList = () => {
         alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..8581cbabf
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,15 @@
+import { Card, Text } from "theme-ui";
+
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
+  );
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/index.js b/pages/index.js
index 6bff819c4..8f400e846 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,38 +7,38 @@ import {
   Flex,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import React, { useEffect, useRef, useState } from 'react'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Stage from '../components/stage'
-import Carousel from '../components/index/carousel'
-import Outernet from '../components/index/cards/outernet'
-import Sprig from '../components/index/cards/sprig'
-import Sinerider from '../components/index/cards/sinerider'
-import SprigConsole from '../components/index/cards/sprig-console'
-import Clubs from '../components/index/cards/clubs'
-import Workshops from '../components/index/cards/workshops'
-import HCB from '../components/index/cards/hcb'
-import Hackathons from '../components/index/cards/hackathons'
-import OuternetImgFile from '../public/home/outernet-110.jpg'
-import Announcement from '../components/announcement'
-import Konami from 'react-konami-code'
-import JSConfetti from 'js-confetti'
-import Secret from '../components/secret'
-import MailingList from '../components/index/cards/mailing-list'
-import Slack from '../components/index/cards/slack'
-import Icon from '../components/icon'
-import GitHub from '../components/index/github'
-import Photo from '../components/photo'
-import Comma from '../components/comma'
-import Haxidraw from '../components/index/cards/haxidraw'
+  Text,
+} from "theme-ui";
+import React, { useEffect, useRef, useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Stage from "../components/stage";
+import Carousel from "../components/index/carousel";
+import Outernet from "../components/index/cards/outernet";
+import Sprig from "../components/index/cards/sprig";
+import Sinerider from "../components/index/cards/sinerider";
+import SprigConsole from "../components/index/cards/sprig-console";
+import Clubs from "../components/index/cards/clubs";
+import Workshops from "../components/index/cards/workshops";
+import HCB from "../components/index/cards/hcb";
+import Hackathons from "../components/index/cards/hackathons";
+import OuternetImgFile from "../public/home/outernet-110.jpg";
+import Announcement from "../components/announcement";
+import Konami from "react-konami-code";
+import JSConfetti from "js-confetti";
+import Secret from "../components/secret";
+import MailingList from "../components/index/cards/mailing-list";
+import Slack from "../components/index/cards/slack";
+import Icon from "../components/icon";
+import GitHub from "../components/index/github";
+import Photo from "../components/photo";
+import Comma from "../components/comma";
+import Haxidraw from "../components/index/cards/haxidraw";
 
 /** @jsxImportSource theme-ui */
 
@@ -56,78 +56,78 @@ function Page({
   gameTitle,
   events,
   carouselCards,
-  context
+  context,
 }) {
-  let [gameImage, setGameImage] = useState('')
-  let [gameImage1, setGameImage1] = useState('')
-  let [reveal, setReveal] = useState(false)
-  const [hover, setHover] = useState(true)
-  let [github, setGithub] = useState(0)
-  let [slackKey, setSlackKey] = useState(0)
-  let [key, setKey] = useState(0)
+  let [gameImage, setGameImage] = useState("");
+  let [gameImage1, setGameImage1] = useState("");
+  let [reveal, setReveal] = useState(false);
+  const [hover, setHover] = useState(true);
+  let [github, setGithub] = useState(0);
+  let [slackKey, setSlackKey] = useState(0);
+  let [key, setKey] = useState(0);
 
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
 
-  let jsConfetti = useRef()
+  let jsConfetti = useRef();
 
   useEffect(() => {
-    jsConfetti.current = new JSConfetti()
+    jsConfetti.current = new JSConfetti();
 
-    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
-    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
-  }, [])
+    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`;
+    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `;
+  }, []);
 
   const easterEgg = () => {
-    alert('Hey, you typed the Konami Code!')
+    alert("Hey, you typed the Konami Code!");
 
     jsConfetti.current.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  };
 
   useEffect(() => {
     if (reveal && !hover) {
       setTimeout(() => {
-        setReveal(false)
-      }, 2000)
+        setReveal(false);
+      }, 2000);
     }
-  }, [reveal, hover])
+  }, [reveal, hover]);
 
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let images = [
-    { alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
+    { alt: "Map of Hack Clubs around the world", src: "/home/map.png" },
     {
-      alt: 'Hack Clubbers at SpaceX HQ in LA',
-      src: '/home/zephyr-spacex.jpeg'
+      alt: "Hack Clubbers at SpaceX HQ in LA",
+      src: "/home/zephyr-spacex.jpeg",
     },
     {
-      alt: 'MA Hacks, Hack Clubber organized hackathon',
-      src: '/hackathons/mahacks.jpeg'
+      alt: "MA Hacks, Hack Clubber organized hackathon",
+      src: "/hackathons/mahacks.jpeg",
     },
-    { alt: 'AMA with Sal Khan', src: '/home/ama.png' },
-    { alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
-  ]
+    { alt: "AMA with Sal Khan", src: "/home/ama.png" },
+    { alt: "Hack Clubbers at Flagship, 2019", src: "/home/flagship_4.jpg" },
+  ];
 
   // janky right now and does not show last image
 
   useEffect(() => {
     console.log(
-      `White sheets of paper\nWaiting to be printed on\nA blank console waits`
-    )
+      `White sheets of paper\nWaiting to be printed on\nA blank console waits`,
+    );
     if (count === images.length - 1) {
-      setCount(0)
+      setCount(0);
     }
-  }, [count, images.length])
+  }, [count, images.length]);
 
   return (
     <>
@@ -149,17 +149,17 @@ function Page({
       <Box
         as="main"
         sx={{
-          overflowX: 'hidden',
-          position: 'relative'
+          overflowX: "hidden",
+          position: "relative",
         }}
       >
         <Secret
           reveal={reveal}
           onMouseEnter={() => {
-            setHover(true)
+            setHover(true);
           }}
           onMouseOut={() => {
-            setHover(false)
+            setHover(false);
           }}
         />
         <Konami action={easterEgg}>
@@ -169,12 +169,12 @@ function Page({
         <Box
           as="header"
           sx={{
-            bg: 'dark',
+            bg: "dark",
             pt: [5, 6],
             pb: [2, 3],
-            textAlign: 'left',
-            position: 'relative',
-            overflowX: 'hidden'
+            textAlign: "left",
+            position: "relative",
+            overflowX: "hidden",
           }}
         >
           <BGImg
@@ -192,21 +192,21 @@ function Page({
           />
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: [null, 'layout'],
-              position: 'relative',
-              mx: 'auto',
+              width: "90vw",
+              maxWidth: [null, "layout"],
+              position: "relative",
+              mx: "auto",
               py: [4, 4, 4],
-              textShadow: 'text'
+              textShadow: "text",
             }}
           >
             <Text
               variant="eyebrow"
               sx={{
-                color: 'sunken',
+                color: "sunken",
                 pb: 2,
-                position: 'relative',
-                display: 'block'
+                position: "relative",
+                display: "block",
               }}
               as="h4"
             >
@@ -217,42 +217,42 @@ function Page({
                 as="h1"
                 variant="title"
                 sx={{
-                  color: 'white',
+                  color: "white",
                   mb: [3, 4],
                   zIndex: 1,
-                  textAlign: 'left',
-                  fontSize: ['42px', '52px', '64px'],
+                  textAlign: "left",
+                  fontSize: ["42px", "52px", "64px"],
                   lineHeight: 1.2,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
-                We are <Comma>{slackData.total_members_count}</Comma>{' '}
+                We are <Comma>{slackData.total_members_count}</Comma>{" "}
                 <Text
                   sx={{
-                    color: 'transparent',
+                    color: "transparent",
                     ml: 2,
                     mr: 3,
-                    whiteSpace: 'nowrap'
+                    whiteSpace: "nowrap",
                   }}
                 >
                   <Text
                     onClick={() => {
-                      setHover(false)
-                      !reveal ? setReveal(true) : setReveal(false)
+                      setHover(false);
+                      !reveal ? setReveal(true) : setReveal(false);
                     }}
                     sx={{
                       // lineHeight: 0.875,
                       px: 2,
-                      backgroundColor: 'red',
-                      position: 'absolute',
+                      backgroundColor: "red",
+                      position: "absolute",
                       borderRadius: 10,
-                      transform: 'rotate(-3deg) translateY(-5px)',
-                      color: 'white',
-                      whiteSpace: 'nowrap',
-                      textDecoration: 'none',
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      transform: "rotate(-3deg) translateY(-5px)",
+                      color: "white",
+                      whiteSpace: "nowrap",
+                      textDecoration: "none",
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                     aria-hidden="true"
                   >
@@ -260,7 +260,7 @@ function Page({
                   </Text>
                   teen hackers
                 </Text>
-                <br sx={{ display: ['inline', 'none', 'none'] }} /> from around
+                <br sx={{ display: ["inline", "none", "none"] }} /> from around
                 the world who code together
               </Text>
               <Button
@@ -268,7 +268,7 @@ function Page({
                 as="a"
                 href="/slack"
                 mt={[3, 0, 0]}
-                sx={{ transformOrigin: 'center left' }}
+                sx={{ transformOrigin: "center left" }}
               >
                 Join our community
               </Button>
@@ -276,10 +276,10 @@ function Page({
           </Box>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: ['flex-start', 'flex-start', 'flex-end'],
+              display: "flex",
+              justifyContent: ["flex-start", "flex-start", "flex-end"],
               marginRight: 2,
-              mt: [4, 3, 1]
+              mt: [4, 3, 1],
             }}
           >
             <Badge
@@ -289,14 +289,14 @@ function Page({
               rel="noopener"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'black',
-                color: 'white',
+                zIndex: "1",
+                bg: "black",
+                color: "white",
                 opacity: 1,
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                ':hover': { opacity: 1 },
-                transition: '0.3s ease'
+                textDecoration: "none",
+                fontWeight: "normal",
+                ":hover": { opacity: 1 },
+                transition: "0.3s ease",
                 // mixBlendMode: 'multiply'
               }}
               title="📸 Photo by Matt Gleich, Hack Clubber in NH!"
@@ -305,32 +305,32 @@ function Page({
             </Badge>
           </Box>
         </Box>
-        <Box as="section" sx={{ py: [4, 5, '82px'], color: 'black' }}>
+        <Box as="section" sx={{ py: [4, 5, "82px"], color: "black" }}>
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Text
               variant="title"
               as="h1"
-              sx={{ fontSize: ['36px', '48px', '56px'] }}
+              sx={{ fontSize: ["36px", "48px", "56px"] }}
             >
-              Discover the{' '}
+              Discover the{" "}
               <Text
                 as="span"
                 sx={{
-                  borderRadius: 'default',
+                  borderRadius: "default",
                   px: 1,
                   mx: 0,
-                  whiteSpace: ['wrap', 'nowrap', 'nowrap'],
-                  color: 'white',
-                  background: theme => theme.util.gx('red', 'orange'),
-                  '-webkit-background-clip': 'text',
-                  '-webkit-text-fill-color': 'transparent'
+                  whiteSpace: ["wrap", "nowrap", "nowrap"],
+                  color: "white",
+                  background: (theme) => theme.util.gx("red", "orange"),
+                  "-webkit-background-clip": "text",
+                  "-webkit-text-fill-color": "transparent",
                 }}
               >
                 joy of code
@@ -341,50 +341,50 @@ function Page({
               variant="subtitle"
               as="p"
               sx={{
-                fontSize: ['18px', '20px', '22px'],
+                fontSize: ["18px", "20px", "22px"],
                 pb: [3, 3, 4],
-                maxWidth: '62ch'
+                maxWidth: "62ch",
               }}
             >
               Every day, thousands of Hack&nbsp;Clubbers gather online and
               in-person to make things with code. Whether you’re a beginner
               programmer or have years of experience, there’s a place for you at
-              Hack&nbsp;Club. Read about our{' '}
+              Hack&nbsp;Club. Read about our{" "}
               <Link href="/philosophy" target="_blank" rel="noopener">
                 hacker ethic
               </Link>
               .
             </Text>
-            <Grid columns={[1, 1, 1, '2.5fr 3fr']} gap={[0, 3, 4]} pt={[3, 4]}>
+            <Grid columns={[1, 1, 1, "2.5fr 3fr"]} gap={[0, 3, 4]} pt={[3, 4]}>
               <Box
                 sx={{
-                  position: 'relative',
-                  height: ['300px', '300px', '300px', '100%'],
-                  py: [3, 3, 3, 0]
+                  position: "relative",
+                  height: ["300px", "300px", "300px", "100%"],
+                  py: [3, 3, 3, 0],
                 }}
                 onClick={() => {
-                  setCount(count + 1)
+                  setCount(count + 1);
                 }}
               >
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -409,24 +409,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(-3deg)' : 'rotate(3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(-3deg)" : "rotate(3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -447,24 +447,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -485,28 +485,28 @@ function Page({
                     width: 36,
                     height: 36,
                     borderRadius: 24,
-                    display: 'inline-block',
+                    display: "inline-block",
                     fontSize: 2,
-                    lineHeight: '30px',
-                    textAlign: 'center',
-                    fontWeight: 'bold',
-                    border: '3px solid currentColor'
+                    lineHeight: "30px",
+                    textAlign: "center",
+                    fontWeight: "bold",
+                    border: "3px solid currentColor",
                   },
-                  p: { my: 0, fontSize: ['18px', '20px', '22px'] },
-                  strong: { display: 'block', fontSize: ['22px', 2, 3] }
+                  p: { my: 0, fontSize: ["18px", "20px", "22px"] },
+                  strong: { display: "block", fontSize: ["22px", 2, 3] },
                 }}
                 as="ul"
               >
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -518,9 +518,9 @@ function Page({
                       Connect with other teenage coders
                     </strong>
                     Have a coding question? Looking for project feedback? You’ll
-                    find hundreds of fabulous people to talk to in our global{' '}
+                    find hundreds of fabulous people to talk to in our global{" "}
                     <Link href="/slack" target="_blank" rel="noopener">
-                      Slack{' '}
+                      Slack{" "}
                     </Link>
                     (like Discord), active at all hours.
                   </Text>
@@ -528,13 +528,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -545,7 +545,7 @@ function Page({
                     as="p"
                     variant="subtitle"
                     sx={{
-                      mt: 0
+                      mt: 0,
                     }}
                   >
                     <strong sx={{ mb: 1 }}>
@@ -562,13 +562,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -578,11 +578,11 @@ function Page({
                   <Text as="p" variant="subtitle">
                     <strong sx={{ mb: 1 }}>Gather IRL with other makers</strong>
                     Meet other Hack&nbsp;Clubbers in your community to build
-                    together at one of the 400+{' '}
+                    together at one of the 400+{" "}
                     <Link href="/clubs" target="_blank" rel="noopener">
                       Hack&nbsp;Clubs
-                    </Link>{' '}
-                    and{' '}
+                    </Link>{" "}
+                    and{" "}
                     <Link href="/hackathons" target="_blank" rel="noopener">
                       high school hackathons
                     </Link>
@@ -597,44 +597,44 @@ function Page({
         <Box
           as="section"
           sx={{
-            background: 'snow',
+            background: "snow",
             backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-            backgroundSize: '40px 40px',
-            backgroundRepeat: 'repeat',
-            backgroundPosition: '10% 10%'
+            backgroundSize: "40px 40px",
+            backgroundRepeat: "repeat",
+            backgroundPosition: "10% 10%",
           }}
         >
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
             py={[4, 4, 5]}
           >
             <Box>
-              <Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
-                Connect with{' '}
+              <Text variant="title" sx={{ fontSize: ["36px", 4, 5] }}>
+                Connect with{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     px: 2,
                     mx: 0,
-                    whiteSpace: 'nowrap',
-                    color: 'white',
-                    bg: 'red'
+                    whiteSpace: "nowrap",
+                    color: "white",
+                    bg: "red",
                   }}
                 >
                   builders
-                </Text>{' '}
+                </Text>{" "}
                 from around the world
               </Text>
               <Text
                 variant="subtitle"
                 as="p"
-                sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
+                sx={{ fontSize: ["18px", "20px", "22px"], pb: [3, 0, 0] }}
               >
                 We gather both online and in-person to share our love of code
                 and make things together!
@@ -645,26 +645,26 @@ function Page({
           </Box>
         </Box>
         <Box>
-          <Box py={[4, 5, '82px']}>
+          <Box py={[4, 5, "82px"]}>
             <Box
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['column', 'column', 'column', 'row'],
-                  justifyContent: gitHubData ? 'center' : 'flex-start',
+                  flexDirection: ["column", "column", "column", "row"],
+                  justifyContent: gitHubData ? "center" : "flex-start",
                   alignItems: [
-                    'flex-start',
-                    'flex-start',
-                    'flex-start',
-                    'center'
+                    "flex-start",
+                    "flex-start",
+                    "flex-start",
+                    "center",
                   ],
-                  gap: '10px'
+                  gap: "10px",
                 }}
               >
                 <Box sx={{ mb: [3, 0, 0] }}>
@@ -672,31 +672,31 @@ function Page({
                     variant="title"
                     as="h2"
                     sx={{
-                      fontSize: ['36px', '48px', '56px'],
-                      maxWidth: '20ch'
+                      fontSize: ["36px", "48px", "56px"],
+                      maxWidth: "20ch",
                     }}
                   >
-                    We build{' '}
+                    We build{" "}
                     <Text
                       as="span"
                       sx={{
-                        borderRadius: 'default',
+                        borderRadius: "default",
                         mx: 0,
-                        whiteSpace: 'nowrap',
-                        color: 'orange'
+                        whiteSpace: "nowrap",
+                        color: "orange",
                       }}
                     >
                       open source
-                    </Text>{' '}
+                    </Text>{" "}
                     games and tools together
                   </Text>
                   <Text
                     variant="subtitle"
                     as="p"
                     sx={{
-                      fontSize: ['18px', '20px', '22px'],
+                      fontSize: ["18px", "20px", "22px"],
                       pb: [3, 0, 0],
-                      maxWidth: '60ch'
+                      maxWidth: "60ch",
                     }}
                   >
                     In collaboration with engineers on the Hack&nbsp;Club team,
@@ -708,30 +708,30 @@ function Page({
                 {gitHubData && (
                   <Flex
                     sx={{
-                      flexDirection: ['row', null, null, 'column'],
+                      flexDirection: ["row", null, null, "column"],
                       gap: [1, 2, 2],
-                      alignItems: ['center', 'center', 'center', 'flex-start'],
-                      flexWrap: 'wrap',
-                      width: ['100%', null, null, 'fit-content'],
+                      alignItems: ["center", "center", "center", "flex-start"],
+                      flexWrap: "wrap",
+                      width: ["100%", null, null, "fit-content"],
 
-                      '& > a:nth-child(n+4)': {
-                        display: ['none', null, null, 'flex']
-                      }
+                      "& > a:nth-child(n+4)": {
+                        display: ["none", null, null, "flex"],
+                      },
                     }}
                   >
                     <Text
                       sx={{
-                        fontSize: ['11px', '11px', '14px'],
-                        textAlign: 'left',
-                        lineHeight: '90%',
-                        fontStyle: 'italic',
-                        width: 'fit-content'
+                        fontSize: ["11px", "11px", "14px"],
+                        textAlign: "left",
+                        lineHeight: "90%",
+                        fontStyle: "italic",
+                        width: "fit-content",
                       }}
                     >
                       Live from GitHub
                     </Text>
                     {gitHubData
-                      .filter(data => !data.user.endsWith('[bot]'))
+                      .filter((data) => !data.user.endsWith("[bot]"))
                       .slice(0, 4)
                       .map((data, key) => {
                         return (
@@ -744,7 +744,7 @@ function Page({
                             message={data.message}
                             key={key}
                           />
-                        )
+                        );
                       })}
                   </Flex>
                 )}
@@ -770,12 +770,12 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'relative',
-              background: 'snow',
+              position: "relative",
+              background: "snow",
               backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-              backgroundSize: '40px 40px',
-              backgroundRepeat: 'repeat',
-              backgroundPosition: '10% 10%'
+              backgroundSize: "40px 40px",
+              backgroundRepeat: "repeat",
+              backgroundPosition: "10% 10%",
               // '&:hover': {
               //   backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
               // }
@@ -783,22 +783,22 @@ function Page({
           >
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
+                position: "absolute",
+                width: "100%",
+                height: "100%",
                 top: 0,
-                left: 0
+                left: 0,
               }}
             >
               {}
             </Box>
             <Box
-              py={[4, 5, '82px']}
+              py={[4, 5, "82px"]}
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Box>
@@ -806,20 +806,20 @@ function Page({
                   variant="title"
                   as="h2"
                   sx={{
-                    fontSize: ['36px', '48px', '72px'],
-                    width: '18ch',
-                    textAlign: 'center',
-                    margin: 'auto'
+                    fontSize: ["36px", "48px", "72px"],
+                    width: "18ch",
+                    textAlign: "center",
+                    margin: "auto",
                   }}
                 >
-                  Find your{' '}
+                  Find your{" "}
                   <Text
                     as="span"
                     sx={{
-                      borderRadius: 'default',
+                      borderRadius: "default",
                       mx: 0,
-                      whiteSpace: 'nowrap',
-                      color: 'orange'
+                      whiteSpace: "nowrap",
+                      color: "orange",
                     }}
                   >
                     IRL community.
@@ -829,10 +829,10 @@ function Page({
                   variant="subtitle"
                   as="p"
                   sx={{
-                    fontSize: ['18px', '24px', '32px'],
-                    margin: 'auto',
+                    fontSize: ["18px", "24px", "32px"],
+                    margin: "auto",
                     pt: 2,
-                    textAlign: 'center'
+                    textAlign: "center",
                   }}
                 >
                   Thousands of Hack Clubbers organize and participate in
@@ -851,19 +851,19 @@ function Page({
             </Box>
           </Box>
         </Box>
-        <Box py={[4, 5, '82px']}>
+        <Box py={[4, 5, "82px"]}>
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Box>
               <Text
                 as="p"
                 variant="eyebrow"
-                sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}
+                sx={{ fontSize: ["22px", 2, 3], textAlign: "center" }}
               >
                 We've got a lot going on - Let’s recap
               </Text>
@@ -871,22 +871,22 @@ function Page({
                 variant="title"
                 as="h2"
                 sx={{
-                  fontSize: ['36px', '48px', '72px'],
-                  width: '16ch',
-                  textAlign: 'center',
-                  margin: 'auto'
+                  fontSize: ["36px", "48px", "72px"],
+                  width: "16ch",
+                  textAlign: "center",
+                  margin: "auto",
                 }}
               >
-                Find your second home at{' '}
+                Find your second home at{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     ml: 0,
-                    whiteSpace: ['wrap', 'nowrap'],
-                    background: theme => theme.util.gx('red', 'orange'),
-                    '-webkit-background-clip': 'text',
-                    '-webkit-text-fill-color': 'transparent'
+                    whiteSpace: ["wrap", "nowrap"],
+                    background: (theme) => theme.util.gx("red", "orange"),
+                    "-webkit-background-clip": "text",
+                    "-webkit-text-fill-color": "transparent",
                   }}
                 >
                   Hack&nbsp;Club
@@ -899,17 +899,17 @@ function Page({
               gap={3}
               columns={[1, 2, 3]}
               sx={{
-                textAlign: 'left',
-                '> a, > div': {
-                  borderRadius: 'extra',
-                  boxShadow: 'elevated',
-                  p: [3, null, 4]
+                textAlign: "left",
+                "> a, > div": {
+                  borderRadius: "extra",
+                  boxShadow: "elevated",
+                  p: [3, null, 4],
                 },
                 span: {
                   boxShadow:
-                    '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                    "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
                 },
-                svg: { fill: 'currentColor' }
+                svg: { fill: "currentColor" },
               }}
             >
               <Card
@@ -920,20 +920,20 @@ function Page({
                 variant="interactive"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(51, 142, 218)' },
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(51, 142, 218)" },
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
               >
                 <Icon
@@ -941,13 +941,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -957,32 +957,32 @@ function Page({
                   desc="Connect with other technical teenagers on Slack and hack on things together."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-                  color: 'white',
-                  svg: { color: '#fb558e' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+                  color: "white",
+                  svg: { color: "#fb558e" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="https://github.com/hackclub"
@@ -995,13 +995,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: [1, '16px', '20px'],
+                    fontSize: [1, "16px", "20px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1011,32 +1011,32 @@ function Page({
                   desc="We’re currently building a game engine, daily streak system, graphing game, and more!"
                   sx={{
                     p: {
-                      fontSize: [1, '16px', '20px']
+                      fontSize: [1, "16px", "20px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(236, 55, 80)' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(236, 55, 80)" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="/clubs"
@@ -1049,13 +1049,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1065,11 +1065,11 @@ function Page({
                   desc="Build an in-person community of high school hackers, and we’re here to help."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
@@ -1077,23 +1077,23 @@ function Page({
           </Box>
         </Box>
       </Box>
-      {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
-        'z' && (
+      {new URL(asPath, "http://example.com").searchParams.get("gen") ===
+        "z" && (
         <>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               top: 0,
-              width: '100%',
-              zIndex: 1000
+              width: "100%",
+              zIndex: 1000,
             }}
           >
             <Box
               sx={{
-                position: 'relative',
-                margin: 'auto',
-                width: 'fit-content',
-                lineHeight: 0
+                position: "relative",
+                margin: "auto",
+                width: "fit-content",
+                lineHeight: 0,
               }}
             >
               <iframe
@@ -1109,11 +1109,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               right: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1128,11 +1128,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               left: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1151,16 +1151,16 @@ function Page({
       <Footer
         dark
         sx={{
-          backgroundColor: 'dark',
-          position: 'relative',
-          overflow: 'hidden',
-          textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-          'h2,span,p,a': { color: 'white !important' },
-          '> div img': { objectPosition: ['left', 'center'] },
+          backgroundColor: "dark",
+          position: "relative",
+          overflow: "hidden",
+          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+          "h2,span,p,a": { color: "white !important" },
+          "> div img": { objectPosition: ["left", "center"] },
           svg: {
-            fill: 'white',
-            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-          }
+            fill: "white",
+            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+          },
         }}
       >
         <style>
@@ -1170,73 +1170,73 @@ function Page({
         </style>
       </Footer>
     </>
-  )
+  );
 }
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 export async function getStaticProps() {
-  const carouselCards = require('../lib/carousel.json')
+  const carouselCards = require("../lib/carousel.json");
 
   // HCB: get total raised
-  let bankData = []
-  let initialBankData = await fetch('https://hcb.hackclub.com/stats').then(r =>
-    r.json()
-  )
-  let raised = initialBankData.raised / 100
+  let bankData = [];
+  let initialBankData = await fetch("https://hcb.hackclub.com/stats").then(
+    (r) => r.json(),
+  );
+  let raised = initialBankData.raised / 100;
 
   bankData.push(
-    `💰 ${raised.toLocaleString('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    })} raised`
-  )
+    `💰 ${raised.toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+    })} raised`,
+  );
 
   // Slack: get total raised
-  const { Slack: Slacky } = require('./api/slack')
-  let slackData = await Slacky()
+  const { Slack: Slacky } = require("./api/slack");
+  let slackData = await Slacky();
 
   // GitHub: get latest github activity (currently this is erroring and
   // preventing the site from deploying
 
-  const { fetchGitHub } = require('./api/github')
-  let gitHubData = await fetchGitHub()
+  const { fetchGitHub } = require("./api/github");
+  let gitHubData = await fetchGitHub();
 
   //   let gitHubData = null
 
   // GitHub: get latest GitHub stars
-  const { fetchStars } = require('./api/stars')
-  let stars = await fetchStars()
+  const { fetchStars } = require("./api/stars");
+  let stars = await fetchStars();
 
   // Sprig: get newest games
-  const { getGames } = require('./api/games')
-  let game = await getGames()
+  const { getGames } = require("./api/games");
+  let game = await getGames();
 
-  let gameTitle = []
+  let gameTitle = [];
 
-  gameTitle = game.map(r => r.title)
+  gameTitle = game.map((r) => r.title);
 
   // Sprig: get console count
-  const { getConsoles } = require('./api/sprig-console')
-  const consoleCount = await getConsoles()
+  const { getConsoles } = require("./api/sprig-console");
+  const consoleCount = await getConsoles();
 
   // Hackathons: get latest hackathons
-  let hackathonsData
+  let hackathonsData;
   try {
     const response = await fetch(
-      'https://hackathons.hackclub.com/api/events/upcoming'
-    )
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (response.ok) {
-      hackathonsData = await response.json()
+      hackathonsData = await response.json();
     } else {
-      hackathonsData = [] // or some default value if the fetch fails
+      hackathonsData = []; // or some default value if the fetch fails
     }
   } catch (error) {
-    hackathonsData = [] // or some default value if an error occurs
+    hackathonsData = []; // or some default value if an error occurs
   }
 
   let events = await fetch(
-    'https://events.hackclub.com/api/events/upcoming/'
-  ).then(res => res.json())
+    "https://events.hackclub.com/api/events/upcoming/",
+  ).then((res) => res.json());
 
   return {
     props: {
@@ -1249,10 +1249,10 @@ export async function getStaticProps() {
       slackData,
       stars,
       events,
-      carouselCards
+      carouselCards,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
 
-export default Page
+export default Page;
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/onboard.js b/pages/onboard.js
index 9ef14650d..0a1085408 100644
--- a/pages/onboard.js
+++ b/pages/onboard.js
@@ -1,35 +1,35 @@
-import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from 'theme-ui'
-import Balancer from 'react-wrap-balancer'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import Sparkles from '../components/sparkles'
-import Tilt from '../components/tilt'
-import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
-import { useRef, useEffect, useState } from 'react'
+import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from "theme-ui";
+import Balancer from "react-wrap-balancer";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import Sparkles from "../components/sparkles";
+import Tilt from "../components/tilt";
+import usePrefersReducedMotion from "../lib/use-prefers-reduced-motion";
+import { useRef, useEffect, useState } from "react";
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
  */
 const traceSx = {
   width: 6,
-  bg: '#e2b747',
-  alignSelf: 'stretch',
+  bg: "#e2b747",
+  alignSelf: "stretch",
   mr: 100,
-  position: 'relative'
-}
+  position: "relative",
+};
 
-const dimBg = '#151515'
+const dimBg = "#151515";
 
 // Beloved classic utility function :3
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 // "LET'S RECAP" pixel art (exported from Piskel)
 // Original: https://doggo.ninja/fiK0nk.piskel
-const recapWidth = 71
-const recapHeight = 10
+const recapWidth = 71;
+const recapHeight = 10;
 const recapPixels = [
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
   0x00000000, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff,
@@ -149,140 +149,140 @@ const recapPixels = [
   0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0x00000000, 0xffffffff,
   0xffffffff, 0x00000000, 0x00000000, 0xffffffff, 0xffffffff, 0x00000000,
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
-  0xffffffff, 0xffffffff
-]
+  0xffffffff, 0xffffffff,
+];
 
-const slackLink = '/slack/?event=onboard'
+const slackLink = "/slack/?event=onboard";
 
-const stickerButtonText = 'Click 4 Stickers'
-const stickerButtonFont = 'Oleo Script'
+const stickerButtonText = "Click 4 Stickers";
+const stickerButtonFont = "Oleo Script";
 const stickerButtonFontStylesheet = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-  stickerButtonFont
-)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`
+  stickerButtonFont,
+)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`;
 
 const wandImgTraced =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png";
 const wandImgRendered =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png";
 
 const ShipPage = () => {
-  const prefersReducedMotion = usePrefersReducedMotion()
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   // Wand flicker animation
-  const [wandImg, setWandImg] = useState(wandImgTraced)
-  const wandAnimated = useRef(false)
+  const [wandImg, setWandImg] = useState(wandImgTraced);
+  const wandAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const flicker = async () => {
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(Math.random() * 80 + 10)
-      if (canceled) return
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, Math.random() * 4000 + 500)
-    }
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(Math.random() * 80 + 10);
+      if (canceled) return;
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, Math.random() * 4000 + 500);
+    };
 
     const animate = async () => {
-      if (wandAnimated.current) return
-      wandAnimated.current = true
-
-      await sleep(1500)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(60)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(340)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(14)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(55)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(10)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(150)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, 1200)
-    }
+      if (wandAnimated.current) return;
+      wandAnimated.current = true;
+
+      await sleep(1500);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(60);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(340);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(14);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(55);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(10);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(150);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, 1200);
+    };
 
     if (prefersReducedMotion) {
-      setWandImg(wandImgRendered)
+      setWandImg(wandImgRendered);
     } else {
-      animate()
+      animate();
     }
 
-    return () => (canceled = true)
-  }, [prefersReducedMotion])
+    return () => (canceled = true);
+  }, [prefersReducedMotion]);
 
   // Spotlight effect
-  const spotlightRef = useRef()
+  const spotlightRef = useRef();
   useEffect(() => {
-    const handler = event => {
+    const handler = (event) => {
       spotlightRef.current.style.background = `radial-gradient(
 				circle at ${event.pageX}px ${event.pageY}px,
 				rgba(0, 0, 0, 0) 10px,
 				rgba(0, 0, 0, 0.8) 80px
-			)`
-    }
-    window.addEventListener('mousemove', handler)
-    return () => window.removeEventListener('mousemove', handler)
-  }, [])
+			)`;
+    };
+    window.addEventListener("mousemove", handler);
+    return () => window.removeEventListener("mousemove", handler);
+  }, []);
 
   // Calculating the bus height to match the bottom left of the first connector.
-  const [busHeight, setBusHeight] = useState(null)
-  const containerRef = useRef() // For ResizeObserver
-  const connectorRef = useRef() // To get bottom left position
-  const busRef = useRef() // To calculate height differential
+  const [busHeight, setBusHeight] = useState(null);
+  const containerRef = useRef(); // For ResizeObserver
+  const connectorRef = useRef(); // To get bottom left position
+  const busRef = useRef(); // To calculate height differential
 
   useEffect(() => {
     const observer = new ResizeObserver(() => {
-      const connectorRect = connectorRef.current.getBoundingClientRect()
-      const busRect = busRef.current.getBoundingClientRect()
-      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5)
-    })
+      const connectorRect = connectorRef.current.getBoundingClientRect();
+      const busRect = busRef.current.getBoundingClientRect();
+      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5);
+    });
 
-    observer.observe(containerRef.current)
-    return () => observer.disconnect()
-  }, [])
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   // Fancy lights animation
-  const lightsScrollTrigger = useRef()
-  const lightsAnimated = useRef(false)
+  const lightsScrollTrigger = useRef();
+  const lightsAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const setAtIndex = (i, color) => {
-      if (canceled) return
+      if (canceled) return;
 
       // Going outside of React for performance
-      const el = document.getElementById(`pixel-${i}`)
-      if (!el) return
+      const el = document.getElementById(`pixel-${i}`);
+      if (!el) return;
 
       if (recapPixels[i]) {
-        el.style.background = color
-        el.style.boxShadow = `0 0 10px ${color}`
+        el.style.background = color;
+        el.style.boxShadow = `0 0 10px ${color}`;
       } else {
-        el.style.background = dimBg
-        el.style.boxShadow = 'none'
+        el.style.background = dimBg;
+        el.style.boxShadow = "none";
       }
-    }
-    const setAll = color => {
-      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color)
-    }
+    };
+    const setAll = (color) => {
+      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color);
+    };
 
     const animate = async () => {
-      if (lightsAnimated.current) return
-      lightsAnimated.current = true
+      if (lightsAnimated.current) return;
+      lightsAnimated.current = true;
 
       // Illuminate lights in diagonal lines starting with only top left.
       for (
@@ -295,66 +295,66 @@ const ShipPage = () => {
           offset >= Math.max(0, curColumn - recapHeight);
           offset--
         ) {
-          const i = curColumn * recapWidth + offset - offset * recapWidth
-          setAtIndex(i, '#ffffff')
-          if (!recapPixels[i]) await sleep(4)
-          if (canceled) return
+          const i = curColumn * recapWidth + offset - offset * recapWidth;
+          setAtIndex(i, "#ffffff");
+          if (!recapPixels[i]) await sleep(4);
+          if (canceled) return;
         }
         // await sleep(2); if (canceled) return
       }
 
       // Flash the lights twice
-      await sleep(600)
-      if (canceled) return
+      await sleep(600);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(80)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(80);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(20)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(20);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(30)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(30);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(100)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(100);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(200)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(200);
+      if (canceled) return;
 
       // Animate rainbow 2-column increments
       for (let x = 0; x < recapWidth; x++) {
-        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`
+        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`;
         for (let y = 0; y < recapHeight; y++) {
-          const i = y * recapWidth + x
-          setAtIndex(i, color)
+          const i = y * recapWidth + x;
+          setAtIndex(i, color);
         }
-        if (x % 2 === 1) await sleep(35)
+        if (x % 2 === 1) await sleep(35);
       }
-    }
+    };
 
     if (prefersReducedMotion) {
-      if (!lightsAnimated.current) setAll('#ffffff')
-      return () => (canceled = true)
+      if (!lightsAnimated.current) setAll("#ffffff");
+      return () => (canceled = true);
     } else {
       const observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting) animate()
+          if (entry.isIntersecting) animate();
         },
-        { threshold: 0.5 }
-      )
-      observer.observe(lightsScrollTrigger.current)
+        { threshold: 0.5 },
+      );
+      observer.observe(lightsScrollTrigger.current);
       return () => {
-        canceled = true
-        observer.disconnect()
-      }
+        canceled = true;
+        observer.disconnect();
+      };
     }
-  }, [prefersReducedMotion])
+  }, [prefersReducedMotion]);
 
   return (
     <>
@@ -393,54 +393,54 @@ const ShipPage = () => {
       <Box
         as="header"
         sx={{
-          bg: '#000000',
+          bg: "#000000",
           backgroundImage: `
 						linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
 						url('https://cloud-dst3a9oz5-hack-club-bot.vercel.app/0image.png')
 					`,
-          color: '#ffffff',
-          position: 'relative'
+          color: "#ffffff",
+          position: "relative",
         }}
       >
         <Box
           ref={spotlightRef}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             zIndex: 2,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            bg: '#000000',
-            pointerEvents: 'none'
+            bg: "#000000",
+            pointerEvents: "none",
           }}
         />
 
         <Flex
           sx={{
             p: 4,
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             zIndex: 5,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Flex
             sx={{
               pt: 80,
-              width: '100%',
-              maxWidth: 'layout',
-              alignItems: 'center'
+              width: "100%",
+              maxWidth: "layout",
+              alignItems: "center",
             }}
           >
-            <Flex sx={{ flex: 1, flexDirection: 'column', gap: 25 }}>
+            <Flex sx={{ flex: 1, flexDirection: "column", gap: 25 }}>
               <Heading
                 as="h1"
                 sx={{
                   fontSize: 80,
-                  maxWidth: 'copyPlus',
-                  textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
-                  color: '#87ffa1'
+                  maxWidth: "copyPlus",
+                  textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
+                  color: "#87ffa1",
                 }}
               >
                 <Balancer ratio={0.3}>OnBoard</Balancer>
@@ -448,10 +448,10 @@ const ShipPage = () => {
 
               <Heading
                 as="div"
-                sx={{ fontSize: 4, fontWeight: 400, maxWidth: 'copyPlus' }}
+                sx={{ fontSize: 4, fontWeight: 400, maxWidth: "copyPlus" }}
               >
                 <Balancer ratio={0.3}>
-                  Circuit boards are{' '}
+                  Circuit boards are{" "}
                   <Sparkles>
                     <Text sx={{ fontWeight: 400 }}>magical</Text>
                   </Sparkles>
@@ -466,7 +466,7 @@ const ShipPage = () => {
                   href="https://hack.af/pcb-jam"
                   target="_blank"
                   sx={{
-                    background: t => t.util.gx('#60cc38', '#113b11')
+                    background: (t) => t.util.gx("#60cc38", "#113b11"),
                   }}
                 >
                   Learn PCB Design Now!
@@ -478,8 +478,8 @@ const ShipPage = () => {
                   href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                   target="_blank"
                   sx={{
-                    borderColor: '#113b11',
-                    color: '#60cc38'
+                    borderColor: "#113b11",
+                    color: "#60cc38",
                   }}
                 >
                   Get a Grant
@@ -504,8 +504,8 @@ const ShipPage = () => {
               pb: 35,
               fontSize: 36,
               fontWeight: 500,
-              maxWidth: 'copy',
-              textAlign: 'center'
+              maxWidth: "copy",
+              textAlign: "center",
             }}
           >
             <Balancer ratio={0.8}>
@@ -519,12 +519,12 @@ const ShipPage = () => {
             sx={{
               fontSize: 2,
               h3: { fontSize: 2 },
-              width: '100%',
-              maxWidth: 'layout',
-              pb: 40
+              width: "100%",
+              maxWidth: "layout",
+              pb: 40,
             }}
           >
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Community & Friends</Text>
               <Text as="p">
                 Share your progress and ask for help with Hack Club teens who
@@ -532,7 +532,7 @@ const ShipPage = () => {
               </Text>
             </Flex>
 
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Free Manufacturing</Text>
               <Text as="p">
                 We’ll pay $100 to cover manufacturing costs, enough for 2-3
@@ -550,16 +550,16 @@ const ShipPage = () => {
           pt: 6,
           pb: 4,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
@@ -567,9 +567,9 @@ const ShipPage = () => {
             sx={{
               fontSize: 42,
               fontWeight: 500,
-              borderTop: '4px solid',
-              borderTopColor: 'red',
-              pt: 4
+              borderTop: "4px solid",
+              borderTopColor: "red",
+              pt: 4,
             }}
           >
             <Balancer ratio={0.3}>
@@ -577,15 +577,15 @@ const ShipPage = () => {
             </Balancer>
           </Heading>
           <Text sx={{ fontSize: 3 }}>
-            Learn how to design your own circuit boards from scratch with our{' '}
-            <strong>official tutorials</strong> and jams, like Maggie’s{' '}
+            Learn how to design your own circuit boards from scratch with our{" "}
+            <strong>official tutorials</strong> and jams, like Maggie’s{" "}
             <Link href="https://hack.af/pcb-jam" target="_blank">
               intro to PCB design jam
             </Link>
-            . Ask in the{' '}
+            . Ask in the{" "}
             <Link href={slackLink} target="_blank">
               Hack Club Slack
-            </Link>{' '}
+            </Link>{" "}
             if you have any questions!
           </Text>
         </Flex>
@@ -594,27 +594,27 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 5,
           pb: 6,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 36, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 36, fontWeight: 500, textAlign: "center" }}
           >
             <Balancer>What have people made already?</Balancer>
           </Heading>
@@ -623,39 +623,39 @@ const ShipPage = () => {
             width={350}
             gap={3}
             sx={{
-              width: '100%',
+              width: "100%",
               fontSize: 2,
               a: {
-                display: 'block',
-                position: 'relative',
-                bg: '#000000',
-                borderRadius: 'default',
+                display: "block",
+                position: "relative",
+                bg: "#000000",
+                borderRadius: "default",
                 px: 3,
                 py: 4,
-                color: 'inherit',
-                textDecoration: 'inherit',
-                '.arrow': {
-                  position: 'relative',
-                  left: '0px',
-                  top: '1px', // Looks more aligned with text.
-                  display: 'inline-block',
-                  transition: 'left 80ms ease-in'
+                color: "inherit",
+                textDecoration: "inherit",
+                ".arrow": {
+                  position: "relative",
+                  left: "0px",
+                  top: "1px", // Looks more aligned with text.
+                  display: "inline-block",
+                  transition: "left 80ms ease-in",
+                },
+                "&:hover .arrow": {
+                  left: "4px",
                 },
-                '&:hover .arrow': {
-                  left: '4px'
-                }
               },
               article: {
-                flexDirection: 'column',
+                flexDirection: "column",
                 gap: 3,
-                justifyContent: 'center',
-                height: '100%',
-                zIndex: 1
+                justifyContent: "center",
+                height: "100%",
+                zIndex: 1,
               },
               img: {
-                pointerEvents: 'none',
-                zIndex: 2
-              }
+                pointerEvents: "none",
+                zIndex: 2,
+              },
             }}
           >
             <a
@@ -666,7 +666,7 @@ const ShipPage = () => {
                 <Text as="p" sx={{ pr: 115 }}>
                   A <strong>fidget spinner</strong> without any moving parts.
                 </Text>
-                <Text as="p" sx={{ pr: 100, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 100, color: "gray" }}>
                   See Micha's work&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -675,9 +675,9 @@ const ShipPage = () => {
                   alt="A red circular circuit board with a graphic of white fidget spinner on it."
                   sx={{
                     maxWidth: 120,
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
-                    right: 10
+                    right: 10,
                   }}
                 />
               </Flex>
@@ -689,10 +689,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: 100 }}>
-                  A <strong>movement sensor</strong> add-on to an open source{' '}
+                  A <strong>movement sensor</strong> add-on to an open source{" "}
                   <strong>game console</strong>.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   Read the source&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
@@ -700,9 +700,9 @@ const ShipPage = () => {
                   alt="A black circuit board for a game console with copper wiring."
                   sx={{
                     maxWidth: 280,
-                    position: 'absolute',
+                    position: "absolute",
                     bottom: -40,
-                    right: -75
+                    right: -75,
                   }}
                 />
               </Flex>
@@ -714,10 +714,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
-                  Hugo's <strong>USB-C hub</strong> for the best{' '}
+                  Hugo's <strong>USB-C hub</strong> for the best{" "}
                   <strong>hackathon swag</strong> ever.
                 </Text>
-                <Text as="p" sx={{ color: 'gray', pr: 150 }}>
+                <Text as="p" sx={{ color: "gray", pr: 150 }}>
                   Build one for your event&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -729,8 +729,8 @@ const ShipPage = () => {
                     right: -15,
                     bottom: -10,
                     maxWidth: 260,
-                    position: 'absolute',
-                    zIndex: 6
+                    position: "absolute",
+                    zIndex: 6,
                   }}
                 />
               </Flex>
@@ -745,18 +745,18 @@ const ShipPage = () => {
                   Karmanyaah's <strong>digital level</strong> in the shape of a
                   longhorn.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   See the designs&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
                   src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
                   alt="A longhorn-shaped PCB with glowing horns."
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
                     right: -30,
                     maxWidth: 230,
-                    transform: 'rotate(20deg)'
+                    transform: "rotate(20deg)",
                   }}
                 />
               </Flex>
@@ -780,24 +780,24 @@ const ShipPage = () => {
         sx={{
           px: 4,
           pt: 5,
-          bg: '#ffffff',
-          color: '#000000',
-          justifyContent: 'center'
+          bg: "#ffffff",
+          color: "#000000",
+          justifyContent: "center",
         }}
       >
         <Flex
           as="section"
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
           ref={containerRef}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 5, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 5, fontWeight: 500, textAlign: "center" }}
           >
             How to Qualify
           </Heading>
@@ -806,29 +806,29 @@ const ShipPage = () => {
             <Box
               sx={{
                 ...traceSx,
-                alignSelf: 'flex-end',
-                height: busHeight
+                alignSelf: "flex-end",
+                height: busHeight,
               }}
               ref={busRef}
             />
 
             <Flex
               sx={{
-                flexDirection: ['column', 'column', 'row'],
+                flexDirection: ["column", "column", "row"],
                 flex: 1,
                 gap: 5,
-                pb: 5
+                pb: 5,
               }}
             >
               <Flex
                 as="ul"
                 sx={{
-                  flexDirection: 'column',
+                  flexDirection: "column",
                   fontSize: 24,
-                  listStyleType: 'none',
+                  listStyleType: "none",
                   gap: 4,
                   flex: 1,
-                  p: 0
+                  p: 0,
                 }}
               >
                 {[
@@ -841,7 +841,7 @@ const ShipPage = () => {
                     screenshot.
                   </>,
                   <>
-                    <strong>Open source your design</strong> on GitHub and{' '}
+                    <strong>Open source your design</strong> on GitHub and{" "}
                     <Link
                       href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                       target="_blank"
@@ -849,15 +849,15 @@ const ShipPage = () => {
                       apply for the grant
                     </Link>
                     ! You must be a teenager in high school to apply.
-                  </>
+                  </>,
                 ].map((text, i) => (
                   <Text
                     as="li"
                     key={i}
                     sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      position: 'relative'
+                      display: "flex",
+                      alignItems: "center",
+                      position: "relative",
                     }}
                   >
                     <Box
@@ -865,11 +865,11 @@ const ShipPage = () => {
                         width: 30,
                         height: 30,
                         borderWidth: traceSx.width,
-                        borderStyle: 'solid',
+                        borderStyle: "solid",
                         borderColor: traceSx.bg,
-                        borderRadius: '50%',
-                        left: t => -60,
-                        position: 'absolute'
+                        borderRadius: "50%",
+                        left: (t) => -60,
+                        position: "absolute",
                       }}
                     >
                       <Box
@@ -881,11 +881,11 @@ const ShipPage = () => {
                           width: traceSx.width,
                           height: 69,
                           bg: traceSx.bg,
-                          position: 'absolute',
-                          transform: 'rotate(45deg)',
-                          transformOrigin: 'top right',
-                          top: '20.5px',
-                          left: '-5px'
+                          position: "absolute",
+                          transform: "rotate(45deg)",
+                          transformOrigin: "top right",
+                          top: "20.5px",
+                          left: "-5px",
                         }}
                       />
                     </Box>
@@ -903,8 +903,8 @@ const ShipPage = () => {
                   sx={{
                     flex: 1,
                     maxWidth: 350,
-                    objectFit: 'contain',
-                    mt: ['-40px', '-40px', 0]
+                    objectFit: "contain",
+                    mt: ["-40px", "-40px", 0],
                   }}
                 />
               </Tilt>
@@ -916,26 +916,26 @@ const ShipPage = () => {
       <Flex
         sx={{
           px: 4,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
-        <Flex as="section" sx={{ width: '100%', maxWidth: 'layout' }}>
+        <Flex as="section" sx={{ width: "100%", maxWidth: "layout" }}>
           <Box sx={traceSx}>
             <Box
               sx={{
                 height: traceSx.width,
                 width: 40,
                 bg: traceSx.bg,
-                position: 'absolute',
+                position: "absolute",
                 bottom: 0,
-                left: -20 + traceSx.width / 2
+                left: -20 + traceSx.width / 2,
               }}
             />
           </Box>
 
-          <Flex sx={{ flex: 1, flexDirection: 'column', gap: 4, py: 5 }}>
+          <Flex sx={{ flex: 1, flexDirection: "column", gap: 4, py: 5 }}>
             <Heading as="h2" sx={{ fontSize: 36, fontWeight: 500 }}>
               <Balancer>Join the Hack Club Slack</Balancer>
             </Heading>
@@ -960,35 +960,35 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 6,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 5,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
         >
           {/* For accessibility and screen readers: */}
           <Heading
             as="h2"
             sx={{
-              position: 'absolute',
-              width: '1px',
-              height: '1px',
-              margin: '-1px',
-              overflow: 'hidden',
-              clip: 'rect(0, 0, 0, 0)',
-              whiteSpace: 'nowrap',
-              borderWidth: 0
+              position: "absolute",
+              width: "1px",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              clip: "rect(0, 0, 0, 0)",
+              whiteSpace: "nowrap",
+              borderWidth: 0,
             }}
           >
             Let's Recap
@@ -996,15 +996,15 @@ const ShipPage = () => {
 
           <Grid
             ref={lightsScrollTrigger}
-            gap={['2px', '3px', '4px']}
+            gap={["2px", "3px", "4px"]}
             columns={recapWidth}
-            sx={{ width: '100%', maxWidth: 800 }}
+            sx={{ width: "100%", maxWidth: 800 }}
           >
             {recapPixels.map((_, i) => (
               <Box
                 id={`pixel-${i}`}
                 key={i}
-                sx={{ bg: dimBg, paddingTop: '100%' }}
+                sx={{ bg: dimBg, paddingTop: "100%" }}
               />
             ))}
           </Grid>
@@ -1013,23 +1013,23 @@ const ShipPage = () => {
             width={300}
             gap={4}
             sx={{
-              width: '100%',
+              width: "100%",
               article: {
                 bg: dimBg,
-                borderRadius: 'default',
+                borderRadius: "default",
                 p: 4,
-                flexDirection: 'column',
-                boxShadow: 'inset 0px 0px 14px rgba(255, 255, 255, 0.15);'
+                flexDirection: "column",
+                boxShadow: "inset 0px 0px 14px rgba(255, 255, 255, 0.15);",
               },
               h3: {
                 fontSize: 3,
-                mb: 3
+                mb: 3,
               },
               p: {
                 fontSize: 18,
                 pb: 3,
-                mb: '6px'
-              }
+                mb: "6px",
+              },
             }}
           >
             <Flex as="article">
@@ -1051,7 +1051,7 @@ const ShipPage = () => {
             <Flex
               as="article"
               sx={{
-                transform: 'scale(1.1)'
+                transform: "scale(1.1)",
               }}
             >
               <Text as="h3">Learn to PCB</Text>
@@ -1078,16 +1078,16 @@ const ShipPage = () => {
         </Flex>
       </Flex>
 
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         <Image
           src="https://cloud-f4lij7sq1-hack-club-bot.vercel.app/0flowerpcb.png"
           alt="A big image of several pink flower-shaped PCBs."
           loading="lazy"
           sx={{
-            display: 'block',
-            width: '100%',
+            display: "block",
+            width: "100%",
             height: 500,
-            objectFit: 'cover'
+            objectFit: "cover",
           }}
         />
 
@@ -1096,44 +1096,44 @@ const ShipPage = () => {
           href="https://airtable.com/shrOOU2ZZFYtffUVz"
           target="_blank"
           sx={{
-            bg: '#ff0000',
-            color: 'rgba(255, 255, 255, 0.7)',
-            textDecoration: 'none',
+            bg: "#ff0000",
+            color: "rgba(255, 255, 255, 0.7)",
+            textDecoration: "none",
             size: 160,
-            flexDirection: 'column',
-            textAlign: 'center',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            flexDirection: "column",
+            textAlign: "center",
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: -80,
-            right: '14vw',
-            fontSize: '24px',
+            right: "14vw",
+            fontSize: "24px",
             lineHeight: 1.2,
-            fontWeight: 'bold',
+            fontWeight: "bold",
             fontFamily: `'${stickerButtonFont}', cursive`,
-            transform: 'rotate(-25deg)',
-            borderRadius: '50%',
+            transform: "rotate(-25deg)",
+            borderRadius: "50%",
             // Terrible buttons styles, doesn't even look good, but didn't want to waste more time:
             backgroundImage:
-              'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)',
+              "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)",
             boxShadow:
-              '0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset',
-            filter: 'drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))',
-            textShadow: '0px 0px 2px rgba(255, 255, 255, 0.45)',
-            WebkitTapHighlightColor: 'transparent',
+              "0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset",
+            filter: "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))",
+            textShadow: "0px 0px 2px rgba(255, 255, 255, 0.45)",
+            WebkitTapHighlightColor: "transparent",
             transition:
-              'box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear',
-            ':active': {
+              "box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear",
+            ":active": {
               backgroundImage:
-                'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)',
+                "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)",
               boxShadow:
-                '0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset',
-              filter: 'drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))',
-              fontSize: '22px'
-            }
+                "0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset",
+              filter: "drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))",
+              fontSize: "22px",
+            },
           }}
         >
-          {stickerButtonText.split(' ').map((line, i) => (
+          {stickerButtonText.split(" ").map((line, i) => (
             <div key={i}>{line}</div>
           ))}
         </Flex>
@@ -1141,7 +1141,7 @@ const ShipPage = () => {
 
       <Footer dark />
     </>
-  )
-}
+  );
+};
 
-export default ShipPage
+export default ShipPage;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/pizza.js b/pages/pizza.js
index 058d6eadc..d7ca9a9fe 100644
--- a/pages/pizza.js
+++ b/pages/pizza.js
@@ -1,169 +1,252 @@
-import { Box, Link, Grid, Image, Container, Button, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Nav from '../components/nav'
-import Tilt from '../components/tilt'
-import Ticker from 'react-ticker'
-import { useState } from 'react'
-
+import {
+  Box,
+  Link,
+  Grid,
+  Image,
+  Container,
+  Button,
+  Heading,
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Nav from "../components/nav";
+import Tilt from "../components/tilt";
+import Ticker from "react-ticker";
+import { useState } from "react";
 
 const PizzaPage = () => {
-    const getColor = (idx) => {
-      const colors = ["#EEA820", "#FF8C37", "#EC3750"];
-      return colors[idx % colors.length];
-    };
-    const pizzasByClubs = [
-        {
-            sprite: "https://cloud-l0q2898m7-hack-club-bot.vercel.app/0sprite__1_.png",
-            author: "Thomas",
-            age: 18,
-            from: "South Carolina",
-            response: "I love pineapple pizza & hosting club meets! It's awesome how every week I get to get together with friends and build awesome open source projects. SO GLAD I STARTED MY CLUB!!!"
-        },
-        {
-            sprite: "https://cloud-mpql3aoi9-hack-club-bot.vercel.app/0sprite.png",
-            author: "Odysseus",
-            age: 14,
-            from: "Epanomi",
-            response: "I am addicted to margherita pizza and I am super excited to host club meetings! We meet every Saturday on Discord and we build projects together! On our next meeting, we will be creating a web-based operating system! I'm so happy to be a part of my club and Hack Club!"
-        },
-        {
-            sprite: "https://cloud-7sioop5e1-hack-club-bot.vercel.app/0sprite.png",
-            author: "Sarvesh",
-            age: 16,
-            from: "Ottawa",
-            response: "I love meat lovers pizza and sharing my passion for technology. I love to get together with friends with the same mindset as me and work on amazing open source projects! MAKING A HACK CLUB WAS A GREAT DECISION!!!"
-        },
-        {
-            sprite: "https://cloud-8rvh6jo64-hack-club-bot.vercel.app/0sprite.png",
-            author: "Dieter",
-            age: 18,
-            from: "South Carolina",
-            response: "I'm a big fan of Cheese and Spinach pizza—the texture is amazing! I started my club to fill a gap in computer science projects at my school. Leading this club allows me to challenge members; for instance, we use Sprig to create our own 2-bit games. It's Open Source, which significantly enhances our projects!"
-        },
-        {
-            sprite: "https://cloud-2ca30e1bb-hack-club-bot.vercel.app/0sprite.png",
-            author: "JC",
-            age: 17,
-            from: "Massachusetts",
-            response: "Leading a club is a lot of fun! You get to build cool stuff with other club members, but being a leader means you also get to teach people how to code. Plus who isn't excited about a Christmas pizza party (with pineapple of course)?"
-        },
-        {
-          sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
-          author: "Miguel",
-          age: 17,
-          from: "Illinois",
-          response: "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!"
-        }, 
-        {
-          sprite: "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
-          author: "Jaime",
-          age: 18,
-          from: "South Carolina",
-          response: "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!"
-        },
-        {
-          sprite: "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
-          author: "Sarah",
-          age: 12,
-          from: "Massachusetts",
-          response: "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!"
-        }, {
-          sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
-          author: "Shubham",
-          age: 15,
-          from: "Bay Area",
-          response: "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild."
-        }
-
-    ]
-
-    return (
-    
-  <>
-    <Meta
-      as={Head}
-      title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
-      description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
-      image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
-    />
-    <ForceTheme theme="light" />
-    <Nav color="dark" sx={{backgroundColor: "white"}}/>
-    <Box sx={{
-        paddingBottom: 256
-        
-    }}>
-    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 2,
-background: "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
-mixBlendMode: "color-burn",
-pointerEvents: 'none',
-display: ["none", "flex"]
-
-        }}>
-
-    </Box>
-
-    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 1,
-background: ["linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)", "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)"],
-mixBlendMode: "hard-light",
-pointerEvents: 'none'
-        }}>
+  const getColor = (idx) => {
+    const colors = ["#EEA820", "#FF8C37", "#EC3750"];
+    return colors[idx % colors.length];
+  };
+  const pizzasByClubs = [
+    {
+      sprite:
+        "https://cloud-l0q2898m7-hack-club-bot.vercel.app/0sprite__1_.png",
+      author: "Thomas",
+      age: 18,
+      from: "South Carolina",
+      response:
+        "I love pineapple pizza & hosting club meets! It's awesome how every week I get to get together with friends and build awesome open source projects. SO GLAD I STARTED MY CLUB!!!",
+    },
+    {
+      sprite: "https://cloud-mpql3aoi9-hack-club-bot.vercel.app/0sprite.png",
+      author: "Odysseus",
+      age: 14,
+      from: "Epanomi",
+      response:
+        "I am addicted to margherita pizza and I am super excited to host club meetings! We meet every Saturday on Discord and we build projects together! On our next meeting, we will be creating a web-based operating system! I'm so happy to be a part of my club and Hack Club!",
+    },
+    {
+      sprite: "https://cloud-7sioop5e1-hack-club-bot.vercel.app/0sprite.png",
+      author: "Sarvesh",
+      age: 16,
+      from: "Ottawa",
+      response:
+        "I love meat lovers pizza and sharing my passion for technology. I love to get together with friends with the same mindset as me and work on amazing open source projects! MAKING A HACK CLUB WAS A GREAT DECISION!!!",
+    },
+    {
+      sprite: "https://cloud-8rvh6jo64-hack-club-bot.vercel.app/0sprite.png",
+      author: "Dieter",
+      age: 18,
+      from: "South Carolina",
+      response:
+        "I'm a big fan of Cheese and Spinach pizza—the texture is amazing! I started my club to fill a gap in computer science projects at my school. Leading this club allows me to challenge members; for instance, we use Sprig to create our own 2-bit games. It's Open Source, which significantly enhances our projects!",
+    },
+    {
+      sprite: "https://cloud-2ca30e1bb-hack-club-bot.vercel.app/0sprite.png",
+      author: "JC",
+      age: 17,
+      from: "Massachusetts",
+      response:
+        "Leading a club is a lot of fun! You get to build cool stuff with other club members, but being a leader means you also get to teach people how to code. Plus who isn't excited about a Christmas pizza party (with pineapple of course)?",
+    },
+    {
+      sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
+      author: "Miguel",
+      age: 17,
+      from: "Illinois",
+      response:
+        "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!",
+    },
+    {
+      sprite:
+        "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
+      author: "Jaime",
+      age: 18,
+      from: "South Carolina",
+      response:
+        "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!",
+    },
+    {
+      sprite:
+        "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
+      author: "Sarah",
+      age: 12,
+      from: "Massachusetts",
+      response:
+        "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!",
+    },
+    {
+      sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
+      author: "Shubham",
+      age: 15,
+      from: "Bay Area",
+      response:
+        "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild.",
+    },
+  ];
+
+  return (
+    <>
+      <Meta
+        as={Head}
+        title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
+        description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
+        image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
+      />
+      <ForceTheme theme="light" />
+      <Nav color="dark" sx={{ backgroundColor: "white" }} />
+      <Box
+        sx={{
+          paddingBottom: 256,
+        }}
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            width: "100%",
+            height: "720px",
+            left: 0,
+            top: 0,
+            zIndex: 2,
+            background:
+              "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
+            mixBlendMode: "color-burn",
+            pointerEvents: "none",
+            display: ["none", "flex"],
+          }}
+        ></Box>
 
-    </Box>
-    <Container sx={{ textAlign: 'center', position: 'relative', width: "100%", height: "100%", left: 0, top: 0, zIndex: 2, color: 'dark', paddingTop: [96, 96, 128], paddingLeft: "16px", paddingRight: "16px"
-}}>
-    <Image alt={"GitHub + Hack Club"} sx={{width: ["128px", "128px", "256px"], marginBottom: "16px"
-  
-  }} src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"/>
-        <Heading
-          as="h1"
-          variant="title"
+        <Box
+          sx={{
+            position: "absolute",
+            width: "100%",
+            height: "720px",
+            left: 0,
+            top: 0,
+            zIndex: 1,
+            background: [
+              "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)",
+              "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)",
+            ],
+            mixBlendMode: "hard-light",
+            pointerEvents: "none",
+          }}
+        ></Box>
+        <Container
           sx={{
-            fontSize: ["38px", 6, null, 7],
-            paddingBottom: "16px",
-            span: {
-            background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
-            WebkitBackgroundClip: "text",
-              WebkitTextStroke: 'currentColor',
-              WebkitTextFillColor: 'transparent'
-            }
+            textAlign: "center",
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            left: 0,
+            top: 0,
+            zIndex: 2,
+            color: "dark",
+            paddingTop: [96, 96, 128],
+            paddingLeft: "16px",
+            paddingRight: "16px",
           }}
         >
-          Start A Hack Club,<br/> Get <span>
-            <Text>$100 in Free Pizza</Text>
-            <Image alt={""} sx={{position: "absolute", display: ["none", "none", "none", "flex"], left: "25%", bottom: "42px"}} src="https://cloud-b3bvwbz46-hack-club-bot.vercel.app/0line.svg"/></span>
-        </Heading>
-        <Text variant="lead">GitHub is providing $100 pizza grants to 500 Hack Clubs. <strong>You're not too late!</strong></Text>
-        
-      </Container>
-
-      <Box sx={{alignItems: "center", gap: ["12px", "16px", "24px"], marginTop: "32px", display: "flex", zIndex: 2, justifyContent: "center"}}>
-              <Button
-                variant="ctaLg"
-                as="a"
-                href="/clubs"
-                onClick={() => console.log("this clicks")}
-                sx={{fontSize: [16, 24]}}
-              >
-                Start A Club
-              </Button>
-              <Button
-                variant="outlineLg"
-                as="a"
-                href="#GetPizza"
-                sx={{fontSize: [16, 24]}}
-
-              >
-                Get Your Pizza
-              </Button>
+          <Image
+            alt={"GitHub + Hack Club"}
+            sx={{ width: ["128px", "128px", "256px"], marginBottom: "16px" }}
+            src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"
+          />
+          <Heading
+            as="h1"
+            variant="title"
+            sx={{
+              fontSize: ["38px", 6, null, 7],
+              paddingBottom: "16px",
+              span: {
+                background: [
+                  "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+                ],
+                WebkitBackgroundClip: "text",
+                WebkitTextStroke: "currentColor",
+                WebkitTextFillColor: "transparent",
+              },
+            }}
+          >
+            Start A Hack Club,
+            <br /> Get{" "}
+            <span>
+              <Text>$100 in Free Pizza</Text>
+              <Image
+                alt={""}
+                sx={{
+                  position: "absolute",
+                  display: ["none", "none", "none", "flex"],
+                  left: "25%",
+                  bottom: "42px",
+                }}
+                src="https://cloud-b3bvwbz46-hack-club-bot.vercel.app/0line.svg"
+              />
+            </span>
+          </Heading>
+          <Text variant="lead">
+            GitHub is providing $100 pizza grants to 500 Hack Clubs.{" "}
+            <strong>You're not too late!</strong>
+          </Text>
+        </Container>
+
+        <Box
+          sx={{
+            alignItems: "center",
+            gap: ["12px", "16px", "24px"],
+            marginTop: "32px",
+            display: "flex",
+            zIndex: 2,
+            justifyContent: "center",
+          }}
+        >
+          <Button
+            variant="ctaLg"
+            as="a"
+            href="/clubs"
+            onClick={() => console.log("this clicks")}
+            sx={{ fontSize: [16, 24] }}
+          >
+            Start A Club
+          </Button>
+          <Button
+            variant="outlineLg"
+            as="a"
+            href="#GetPizza"
+            sx={{ fontSize: [16, 24] }}
+          >
+            Get Your Pizza
+          </Button>
         </Box>
       </Box>
 
-    <Container sx={{display: "flex", width: "calc(100% - 32px)", position: "relative", marginTop: "-196px", padding: "32px", border: "1px solid #FF8C37", borderRadius: "16px"}}>
-
-    {/* <Tilt>
+      <Container
+        sx={{
+          display: "flex",
+          width: "calc(100% - 32px)",
+          position: "relative",
+          marginTop: "-196px",
+          padding: "32px",
+          border: "1px solid #FF8C37",
+          borderRadius: "16px",
+        }}
+      >
+        {/* <Tilt>
     <Image sx={{position: "absolute", marginTop: "-82px", marginLeft: "-82px"}} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
     </Tilt>
     <Tilt>
@@ -172,357 +255,548 @@ pointerEvents: 'none'
     <Tilt>
     <Image sx={{position: "absolute", bottom: 0, marginBottom: "-182px", marginLeft: "-82px"}} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
     </Tilt> */}
-    <Box sx={{position: "absolute", top: -48, left: -48}}>
-    <Tilt
-    options={{perspective: 75}}
-    >
-    <Image
-    alt="mushroom"
-    sx={{
-      imageRendering: "pixelated",
-      display: ["none", "none", "flex"]
-    }} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
-    </Tilt>
-    </Box>   
-    <Box sx={{position: "absolute", top: -48, right: -48,
-  
-  }}>
-    <Tilt
-        options={{perspective: 75}}
+        <Box sx={{ position: "absolute", top: -48, left: -48 }}>
+          <Tilt options={{ perspective: 75 }}>
+            <Image
+              alt="mushroom"
+              sx={{
+                imageRendering: "pixelated",
+                display: ["none", "none", "flex"],
+              }}
+              src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"
+            />
+          </Tilt>
+        </Box>
+        <Box sx={{ position: "absolute", top: -48, right: -48 }}>
+          <Tilt options={{ perspective: 75 }}>
+            <Image
+              alt="pineapple"
+              sx={{
+                imageRendering: "pixelated",
+                display: ["none", "none", "flex"],
+              }}
+              src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"
+            />
+          </Tilt>
+        </Box>
+        <Box sx={{ position: "absolute", bottom: -48, left: -48 }}>
+          <Tilt options={{ perspective: 75 }}>
+            <Image
+              alt="tomato"
+              sx={{
+                imageRendering: "pixelated",
+                display: ["none", "none", "flex"],
+              }}
+              src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"
+            />
+          </Tilt>
+        </Box>
+        <Box sx={{ position: "absolute", bottom: -48, right: -48 }}>
+          <Tilt options={{ perspective: 75 }}>
+            <Image
+              alt="pizza"
+              sx={{
+                imageRendering: "pixelated",
 
-    >
-    <Image 
-    alt="pineapple"
-    sx={{imageRendering: "pixelated",
-        display: ["none", "none", "flex"]
-      }} src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"/>
-    </Tilt>
-    </Box> 
-    <Box sx={{position: "absolute", bottom: -48, left: -48}}>
-    <Tilt
-        options={{perspective: 75}}
+                display: ["none", "none", "flex"],
+              }}
+              src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"
+            />
+          </Tilt>
+        </Box>
+        <Grid
+          sx={{ alignItems: "center", position: "relative" }}
+          gap={[2, 3]}
+          columns={[null, null, null, "3fr 2fr"]}
         >
-    <Image  
-    
-    alt="tomato"
-    sx={{imageRendering: "pixelated",
-        display: ["none", "none", "flex"]
-
-  }} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
-    </Tilt>
-    </Box>   
-    <Box sx={{position: "absolute", bottom: -48, right: -48}}>
-    <Tilt
-        options={{perspective: 75}}
-
-    >
-    <Image 
-    alt="pizza"
-    sx={{imageRendering: "pixelated",
-  
-  display: ["none", "none", "flex"]
-}} src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"/>
-    </Tilt>
-    </Box>   
-    <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, null, '3fr 2fr']}>
-
           <Box>
-
-        <Heading
-            as="h2"
-            variant="heading"
-            sx={{
+            <Heading
+              as="h2"
+              variant="heading"
+              sx={{
                 fontSize: [40, 40, 42],
                 lineHeight: "100%",
                 paddingBottom: "16px",
                 span: {
-                background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-                WebkitBackgroundClip: "text",
-                WebkitTextStroke: 'currentColor',
-                WebkitTextFillColor: 'transparent'
-                }
-            }}
+                  background:
+                    "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+                  WebkitBackgroundClip: "text",
+                  WebkitTextStroke: "currentColor",
+                  WebkitTextFillColor: "transparent",
+                },
+              }}
             >
-            Create A Space for Makers          
-        </Heading>
-        <Text sx={{fontSize: 22}}>
-        Hack Club is a place for technical teens to get together and build projects together.  Create a club at your high school and help others discover the joy of coding through building projects.
-        </Text>
-        </Box>
-        <Box>
-            <Image alt="teens collaborating on tech products" sx={{borderRadius: "16px"}} src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"/>
-        </Box>
-    </Grid>
-    <br/>
-    </Container>
-    <Container sx={{paddingLeft: 16, paddingRight: 16}}>
-    <Grid sx={{marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0}} gap={4} columns={[null, null, '1fr 1fr 1fr']}>
-    <Box sx={{backgroundColor: "#E1A300", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
-        >
-            Join A Community of Teen Hackers      
-        </Heading>
-
-        <Text sx={{fontSize: 18, display: "block"}}>
-        In our Slack community of over 25,000 hackers, you'll be invited to a space for Hack Club leaders to ask questions & chat, share projects, & attend events.
-        </Text>
-        <Button
-        href="/slack"
-        as="a"
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EEA820"}}
-        >Join The Slack</Button>
-    </Box>
-    
-    <Box sx={{backgroundColor: "#F48801", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+              Create A Space for Makers
+            </Heading>
+            <Text sx={{ fontSize: 22 }}>
+              Hack Club is a place for technical teens to get together and build
+              projects together. Create a club at your high school and help
+              others discover the joy of coding through building projects.
+            </Text>
+          </Box>
+          <Box>
+            <Image
+              alt="teens collaborating on tech products"
+              sx={{ borderRadius: "16px" }}
+              src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"
+            />
+          </Box>
+        </Grid>
+        <br />
+      </Container>
+      <Container sx={{ paddingLeft: 16, paddingRight: 16 }}>
+        <Grid
+          sx={{ marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0 }}
+          gap={4}
+          columns={[null, null, "1fr 1fr 1fr"]}
         >
-Tools & Perks To Lead Your Club
-        </Heading>
-
-        <Text sx={{fontSize: 18, display: "block"}}>
-        As a club leader, you'll get to use community projects like Sprig & Jams in your Hack Club! Your Club will also get free access to Zoom Pro & Figma Pro.
-        </Text>
-        <Button
-                as="a"
+          <Box
+            sx={{
+              backgroundColor: "#E1A300",
+              padding: 32,
+              margin: 0,
+              borderRadius: "24px",
+              color: "#fff",
+            }}
+          >
+            <Heading
+              as="h2"
+              variant="heading"
+              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
+            >
+              Join A Community of Teen Hackers
+            </Heading>
 
-href="https://toolbox.hackclub.com/"
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#FF8C37"}}
-        >Discover Toolbox</Button>
-    </Box>
+            <Text sx={{ fontSize: 18, display: "block" }}>
+              In our Slack community of over 25,000 hackers, you'll be invited
+              to a space for Hack Club leaders to ask questions & chat, share
+              projects, & attend events.
+            </Text>
+            <Button
+              href="/slack"
+              as="a"
+              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#EEA820" }}
+            >
+              Join The Slack
+            </Button>
+          </Box>
 
-    <Box sx={{backgroundColor: "#F6013B", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
-        >
-            Lead Weekly 
-            Club Meetings   
-        </Heading>
+          <Box
+            sx={{
+              backgroundColor: "#F48801",
+              padding: 32,
+              margin: 0,
+              borderRadius: "24px",
+              color: "#fff",
+            }}
+          >
+            <Heading
+              as="h2"
+              variant="heading"
+              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
+            >
+              Tools & Perks To Lead Your Club
+            </Heading>
 
-        <Text sx={{fontSize: 18, display: "block"}}>
-        Every week you can craft club meetings to help makers at your school discover the joy of coding. Get inspired by some Jams we built to help you lead your club.        </Text>
-        
-        <Button
-href="https://jams.hackclub.com/"
-as="a"
+            <Text sx={{ fontSize: 18, display: "block" }}>
+              As a club leader, you'll get to use community projects like Sprig
+              & Jams in your Hack Club! Your Club will also get free access to
+              Zoom Pro & Figma Pro.
+            </Text>
+            <Button
+              as="a"
+              href="https://toolbox.hackclub.com/"
+              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#FF8C37" }}
+            >
+              Discover Toolbox
+            </Button>
+          </Box>
 
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EC3750"}}
-        >Explore Jams</Button>
-    </Box>
+          <Box
+            sx={{
+              backgroundColor: "#F6013B",
+              padding: 32,
+              margin: 0,
+              borderRadius: "24px",
+              color: "#fff",
+            }}
+          >
+            <Heading
+              as="h2"
+              variant="heading"
+              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
+            >
+              Lead Weekly Club Meetings
+            </Heading>
 
+            <Text sx={{ fontSize: 18, display: "block" }}>
+              Every week you can craft club meetings to help makers at your
+              school discover the joy of coding. Get inspired by some Jams we
+              built to help you lead your club.{" "}
+            </Text>
 
-    </Grid>
-    
-    </Container>
-    <Box>
-        <Container sx={{marginTop: 32, padding: "16px"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0,
-          background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-           fontSize: [28, 34, 36],
-            background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-            WebkitBackgroundClip: "text",
-              WebkitTextFillColor: 'transparent',
-              filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
-        
-        }}
-        >
+            <Button
+              href="https://jams.hackclub.com/"
+              as="a"
+              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#EC3750" }}
+            >
+              Explore Jams
+            </Button>
+          </Box>
+        </Grid>
+      </Container>
+      <Box>
+        <Container sx={{ marginTop: 32, padding: "16px" }}>
+          <Heading
+            as="h2"
+            variant="heading"
+            sx={{
+              padding: 0,
+              background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+              fontSize: [28, 34, 36],
+              background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              filter:
+                "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))",
+            }}
+          >
             Pizzas & Clubs by Leaders
-            </Heading>        </Container>
-
-
-
-            <Ticker speed={3} sx={{ overflowX: 'hidden' }}>
-            {() => (
-              <Box
-                as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
-
-              >
-                {pizzasByClubs.map((pizzaByClub, idx) => (
-                  <Box key={idx} sx={{position: "relative", borderRadius: "16px", padding: "8px 16px 16px 16px", width: ["300px", "500px"], marginLeft: "16px", marginRight: "16px", 
-                  border: "1px solid var(--Muted, #8492A6)"
-                  }}>
-                    <Tilt 
-  
-                    sx={{backgroundColor: "#fff"}} options={{scale: 1.25, perspective: 2000, speed: 500}}>
-                    <img alt="pizza drawn by club" src={pizzaByClub.sprite} style={{position: "absolute", width: "48px", top: "-16px", left: "-16px", height: "48px", padding: "8px",
-                  imageRendering: "pixelated",
-                  borderRadius: "8px",
-                  border: `1.75px solid ${getColor(idx)}`,
-                  backgroundColor: "#fff",
-                  zIndex: 2
-                }}/>
-                </Tilt>
-                    <Text sx={{paddingLeft: "24px", fontSize: [18, 18, 22], fontWeight: 600,
-
-                                background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-                                WebkitBackgroundClip: "text",
-                                  WebkitTextFillColor: 'transparent',
-                                  filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
-                            
-                  
-                  }}>{pizzaByClub.author} ({pizzaByClub.age}) from {pizzaByClub.from}</Text>
-                    <br/>
-                    <Text sx={{paddingTop: "16px", fontSize: [16, 18]}}>{pizzaByClub.response}</Text>
-                  </Box>
-                ))}
-              </Box>
-            )}
-          </Ticker>
- 
-    </Box>
-        
-    <Container sx={{padding: "16px"}}>
-      <Box
-      sx={{
-        borderRadius: "16px",
-background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
-boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
-padding: ["24px", "32px"],
-        marginBottom: "64px"
-      }}
-      >
-        <p 
-                id="GetPizza"
+          </Heading>{" "}
+        </Container>
+
+        <Ticker speed={3} sx={{ overflowX: "hidden" }}>
+          {() => (
+            <Box as="div" sx={{ display: "flex", py: [4, 5, 5] }}>
+              {pizzasByClubs.map((pizzaByClub, idx) => (
+                <Box
+                  key={idx}
+                  sx={{
+                    position: "relative",
+                    borderRadius: "16px",
+                    padding: "8px 16px 16px 16px",
+                    width: ["300px", "500px"],
+                    marginLeft: "16px",
+                    marginRight: "16px",
+                    border: "1px solid var(--Muted, #8492A6)",
+                  }}
+                >
+                  <Tilt
+                    sx={{ backgroundColor: "#fff" }}
+                    options={{ scale: 1.25, perspective: 2000, speed: 500 }}
+                  >
+                    <img
+                      alt="pizza drawn by club"
+                      src={pizzaByClub.sprite}
+                      style={{
+                        position: "absolute",
+                        width: "48px",
+                        top: "-16px",
+                        left: "-16px",
+                        height: "48px",
+                        padding: "8px",
+                        imageRendering: "pixelated",
+                        borderRadius: "8px",
+                        border: `1.75px solid ${getColor(idx)}`,
+                        backgroundColor: "#fff",
+                        zIndex: 2,
+                      }}
+                    />
+                  </Tilt>
+                  <Text
+                    sx={{
+                      paddingLeft: "24px",
+                      fontSize: [18, 18, 22],
+                      fontWeight: 600,
+
+                      background:
+                        "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+                      WebkitBackgroundClip: "text",
+                      WebkitTextFillColor: "transparent",
+                      filter:
+                        "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))",
+                    }}
+                  >
+                    {pizzaByClub.author} ({pizzaByClub.age}) from{" "}
+                    {pizzaByClub.from}
+                  </Text>
+                  <br />
+                  <Text sx={{ paddingTop: "16px", fontSize: [16, 18] }}>
+                    {pizzaByClub.response}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+        </Ticker>
+      </Box>
 
-        style={{marginTop: "-128px", opacity: 0, position: "absolute"}}>
-          Above
-        </p>
-                <Heading
-        as="h2"
-        variant="heading"
-        sx={{
-          fontSize: 36,
-          color: "#fff",
-          fontWeight: 600 ,
-          marginBottom: ["16px", "16px", "0px"]
-        }}
+      <Container sx={{ padding: "16px" }}>
+        <Box
+          sx={{
+            borderRadius: "16px",
+            background:
+              "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
+            boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
+            padding: ["24px", "32px"],
+            marginBottom: "64px",
+          }}
         >
+          <p
+            id="GetPizza"
+            style={{ marginTop: "-128px", opacity: 0, position: "absolute" }}
+          >
+            Above
+          </p>
+          <Heading
+            as="h2"
+            variant="heading"
+            sx={{
+              fontSize: 36,
+              color: "#fff",
+              fontWeight: 600,
+              marginBottom: ["16px", "16px", "0px"],
+            }}
+          >
             Get Your Pizza
-            </Heading>
-
-            <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, '2.5fr 3fr 2.5fr']}>
-            
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="1. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Start Your Club</Text>
+          </Heading>
+
+          <Grid
+            sx={{ alignItems: "center", position: "relative" }}
+            gap={[2, 3]}
+            columns={[null, null, "2.5fr 3fr 2.5fr"]}
+          >
+            <Box
+              sx={{
+                backgroundColor: "#fff",
+                padding: "16px",
+                borderRadius: "16px",
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <img
+                  alt="1. "
+                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
+                  src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"
+                />
+                <Text
+                  sx={{
+                    color: "#000",
+                    fontSize: 26,
+                    display: "block",
+                    fontWeight: 600,
+                  }}
+                >
+                  Start Your Club
+                </Text>
               </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Every Hack Club starts with a teenager like you who wants to bring an amazing community to their high school.
+              <Text
+                sx={{
+                  color: "#000",
+                  marginTop: "8px",
+                  display: "block",
+                  fontSize: 18,
+                  fontWeight: 500,
+                  lineHeight: "150%",
+                }}
+              >
+                Every Hack Club starts with a teenager like you who wants to
+                bring an amazing community to their high school.
               </Text>
-              <Image alt="teen club of coders" sx={{width: ["75%", "75%", "40%"], borderRadius: "16px", marginTop: "8px", marginBottom: "8px"}} src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"/>
+              <Image
+                alt="teen club of coders"
+                sx={{
+                  width: ["75%", "75%", "40%"],
+                  borderRadius: "16px",
+                  marginTop: "8px",
+                  marginBottom: "8px",
+                }}
+                src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"
+              />
               <Box>
-              <Button
-              variant="outline"
-              as="a"
-              href="/clubs"
-              mt={[3, 0, 0]}
+                <Button
+                  variant="outline"
+                  as="a"
+                  href="/clubs"
+                  mt={[3, 0, 0]}
+                  sx={{
+                    fontSize: "18px",
+                  }}
+                >
+                  Start A Club
+                </Button>
+              </Box>
+            </Box>
+
+            <Box
               sx={{
-                fontSize: "18px"
+                backgroundColor: "#fff",
+                padding: "16px",
+                borderRadius: "16px",
               }}
             >
-              Start A Club
-            </Button>
-            </Box>
-
-            </Box>
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="2. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Draw A Pizza</Text>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <img
+                  alt="2. "
+                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
+                  src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"
+                />
+                <Text
+                  sx={{
+                    color: "#000",
+                    fontSize: 26,
+                    display: "block",
+                    fontWeight: 600,
+                  }}
+                >
+                  Draw A Pizza
+                </Text>
               </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Join <Link  href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link> on the Hack Club  Slack & draw a Pixel Pizza
-                            </Text>
-              <img alt="pixel editor gif" style={{width: "75%", borderRadius: "16px", marginTop: "12px", marginBottom: "8px"}} src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"/>
+              <Text
+                sx={{
+                  color: "#000",
+                  marginTop: "8px",
+                  display: "block",
+                  fontSize: 18,
+                  fontWeight: 500,
+                  lineHeight: "150%",
+                }}
+              >
+                Join{" "}
+                <Link href="https://hackclub.slack.com/archives/C05RZ6K7RS5">
+                  #pizza-party
+                </Link>{" "}
+                on the Hack Club Slack & draw a Pixel Pizza
+              </Text>
+              <img
+                alt="pixel editor gif"
+                style={{
+                  width: "75%",
+                  borderRadius: "16px",
+                  marginTop: "12px",
+                  marginBottom: "8px",
+                }}
+                src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"
+              />
               <Box>
-              <Button
-              variant="cta"
-              as="a"
-              href="/slack"
-              mt={[3, 0, 0]}
+                <Button
+                  variant="cta"
+                  as="a"
+                  href="/slack"
+                  mt={[3, 0, 0]}
+                  sx={{
+                    fontSize: "18px",
+                  }}
+                >
+                  Join The Slack
+                </Button>
+              </Box>
+            </Box>
+
+            <Box
               sx={{
-                fontSize: "18px"
+                backgroundColor: "#fff",
+                padding: "16px",
+                borderRadius: "16px",
               }}
             >
-              Join The Slack
-            </Button>
-            </Box>
-
-            </Box>
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="3." style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Order Pizza</Text>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <img
+                  alt="3."
+                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
+                  src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"
+                />
+                <Text
+                  sx={{
+                    color: "#000",
+                    fontSize: 26,
+                    display: "block",
+                    fontWeight: 600,
+                  }}
+                >
+                  Order Pizza
+                </Text>
               </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Receive a Pizza Grant through HCB & use your HCB Virtual Card to order pizzas
+              <Text
+                sx={{
+                  color: "#000",
+                  marginTop: "8px",
+                  display: "block",
+                  fontSize: 18,
+                  fontWeight: 500,
+                  lineHeight: "150%",
+                }}
+              >
+                Receive a Pizza Grant through HCB & use your HCB Virtual Card to
+                order pizzas
               </Text>
               <Tilt
-              sx={{
-                boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
-              }}
-    >
-              <img alt="HCB Card" style={{width: "75%", borderRadius: "8px", marginTop: "12px", marginBottom: "8px",
-                            boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
-
-            }} src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"/>
+                sx={{
+                  boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)",
+                }}
+              >
+                <img
+                  alt="HCB Card"
+                  style={{
+                    width: "75%",
+                    borderRadius: "8px",
+                    marginTop: "12px",
+                    marginBottom: "8px",
+                    boxShadow:
+                      "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)",
+                  }}
+                  src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"
+                />
               </Tilt>
-                <Box>
+              <Box></Box>
             </Box>
-
-            </Box>
-
-            </Grid>
-
-      </Box>
-      <Box sx={{fontSize: 20, textAlign: "center", display: "flex", justifyContent: "center", marginBottom: "64px"}}>
-        <Text sx={{border: "1px solid #EC3750", color: "#EC3750", padding: "16px 32px", borderRadius: "32px"}}>p.s. if you already lead a club, you can still get pizza! draw  a pizza in<Link style={{marginLeft: "8px"}} href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link></Text>
-      </Box>
-    </Container>    
-    <Footer dark 
-            
+          </Grid>
+        </Box>
+        <Box
+          sx={{
+            fontSize: 20,
+            textAlign: "center",
+            display: "flex",
+            justifyContent: "center",
+            marginBottom: "64px",
+          }}
+        >
+          <Text
             sx={{
-              backgroundColor: 'dark',
-              position: 'relative',
-              overflow: 'hidden',
-              textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-              'h2,span,p,a': { color: 'white !important' },
-              '> div img': { objectPosition: ['left', 'center'] },
-              svg: {
-                fill: 'white',
-                filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-              }
+              border: "1px solid #EC3750",
+              color: "#EC3750",
+              padding: "16px 32px",
+              borderRadius: "32px",
             }}
-    />
-  </>
-)}
+          >
+            p.s. if you already lead a club, you can still get pizza! draw a
+            pizza in
+            <Link
+              style={{ marginLeft: "8px" }}
+              href="https://hackclub.slack.com/archives/C05RZ6K7RS5"
+            >
+              #pizza-party
+            </Link>
+          </Text>
+        </Box>
+      </Container>
+      <Footer
+        dark
+        sx={{
+          backgroundColor: "dark",
+          position: "relative",
+          overflow: "hidden",
+          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+          "h2,span,p,a": { color: "white !important" },
+          "> div img": { objectPosition: ["left", "center"] },
+          svg: {
+            fill: "white",
+            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+          },
+        }}
+      />
+    </>
+  );
+};
 
-export default PizzaPage
+export default PizzaPage;
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/team.js b/pages/team.js
index 2209c007d..1fd379af6 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Bio from '../components/bio'
-import ForceTheme from '../components/force-theme'
+import { Box, Container, Text, Grid, Flex } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Bio from "../components/bio";
+import ForceTheme from "../components/force-theme";
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: '75%'
+              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "75%",
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: '650px' }}
+              sx={{ maxWidth: "650px" }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: 'rgb(51 142 218 / 40%)',
+                bg: "rgb(51 142 218 / 40%)",
                 p: 3,
-                borderRadius: '20px',
+                borderRadius: "20px",
                 mb: 3,
                 gap: 3,
-                flexWrap: ['wrap', null, null, 'nowrap']
+                flexWrap: ["wrap", null, null, "nowrap"],
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: 'center',
+                  textAlign: "center",
                   fontSize: 4,
-                  writingMode: [null, null, null, 'vertical-rl'],
+                  writingMode: [null, null, null, "vertical-rl"],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, 'rotate(180deg)'],
-                  width: ['100%', null, null, 'fit-content'],
+                  transform: [null, null, null, "rotate(180deg)"],
+                  width: ["100%", null, null, "fit-content"],
                   marginBottom: [
-                    '0px!important',
-                    '0px!important',
-                    '0px!important',
-                    3
-                  ]
+                    "0px!important",
+                    "0px!important",
+                    "0px!important",
+                    3,
+                  ],
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(51 214 166 / 40%)',
+                    bg: "rgb(51 214 166 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: 'rgb(255 142 55 / 40%)',
+                    bg: "rgb(255 142 55 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(236 55 80 / 40%)',
+                    bg: "rgb(236 55 80 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: 'rgb(166 51 214 / 40%)',
+                    bg: "rgb(166 51 214 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: '1.2',
+                  lineHeight: "1.2",
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: '600px',
-                  width: '100%',
-                  margin: 'auto'
+                  maxWidth: "600px",
+                  width: "100%",
+                  margin: "auto",
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  )
+  );
 }
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 7c7be22b07a41d4213933439204fc85f8cd73b94 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 002/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/hcb.js                 | 106 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        | 171 +--
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  15 +
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/index.js                                | 828 +++++++--------
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/onboard.js                              | 650 ++++++------
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/team.js                                 |  92 +-
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 211 files changed, 8929 insertions(+), 8851 deletions(-)
 create mode 100644 components/mail-card.js

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hcb.js b/components/index/cards/hcb.js
index fdbf68c5e..ddf029af2 100644
--- a/components/index/cards/hcb.js
+++ b/components/index/cards/hcb.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Grid, Heading, Text } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Grid, Heading, Text } from "theme-ui";
+import { Fade } from "react-reveal";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
 export default function Bank({ data }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         color="white"
         sx={{
-          backgroundColor: 'dark',
-          minHeight: ['300px', '400px', '380px'],
-          backgroundColor: 'darkless',
+          backgroundColor: "dark",
+          minHeight: ["300px", "400px", "380px"],
+          backgroundColor: "darkless",
           backgroundImage: `linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('/home/hackathons-bg.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: '40%',
-          color: 'snow'
+          backgroundSize: "cover",
+          backgroundPosition: "40%",
+          color: "snow",
         }}
         badge
         text={data[0]}
       >
         <Heading
           variant="title"
-          sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3] }}
+          sx={{ color: "red", fontSize: ["36px", 4, 5], mt: [0, 3] }}
         >
           HCB
         </Heading>
-        <Grid columns={[1, '1.3fr 1fr', 2]}>
+        <Grid columns={[1, "1.3fr 1fr", 2]}>
           <Box>
             <Text as="p" variant="subtitle">
               Become a 501(c)3 nonprofit and join 700+ teams using HCB to run
@@ -48,30 +48,30 @@ export default function Bank({ data }) {
             </Buttons>
             <Box
               sx={{
-                position: 'relative',
-                width: '100%',
-                display: [null, 'none', 'none'],
-                mb: '-50px',
-                mt: 3
+                position: "relative",
+                width: "100%",
+                display: [null, "none", "none"],
+                mb: "-50px",
+                mt: 3,
               }}
             >
               <Box
                 sx={{
-                  width: '100%',
-                  height: '250px',
-                  position: 'relative',
-                  display: 'block',
-                  textAlign: 'center',
-                  '&:before': {
+                  width: "100%",
+                  height: "250px",
+                  position: "relative",
+                  display: "block",
+                  textAlign: "center",
+                  "&:before": {
                     content: '""',
-                    backgroundImage: 'url(/home/hcb-mobile.webp)',
-                    backgroundSize: '100%',
-                    backgroundRepeat: 'no-repeat',
-                    width: '100%',
-                    height: '100%',
-                    marginX: 'auto',
-                    display: 'block'
-                  }
+                    backgroundImage: "url(/home/hcb-mobile.webp)",
+                    backgroundSize: "100%",
+                    backgroundRepeat: "no-repeat",
+                    width: "100%",
+                    height: "100%",
+                    marginX: "auto",
+                    display: "block",
+                  },
                 }}
               >
                 {/* <Box
@@ -95,31 +95,31 @@ export default function Bank({ data }) {
       </CardModel>
       <Box
         sx={{
-          position: 'absolute',
-          right: [0, '-120px', '-30px'],
-          bottom: [0, '-30px', '-50px'],
-          display: ['none', 'block', 'block'],
-          zIndex: 3
+          position: "absolute",
+          right: [0, "-120px", "-30px"],
+          bottom: [0, "-30px", "-50px"],
+          display: ["none", "block", "block"],
+          zIndex: 3,
         }}
       >
-        {' '}
+        {" "}
         <Box
           sx={{
-            width: ['250px', '500px'],
-            height: ['180px', '360px'],
-            position: 'relative',
-            display: 'block',
-            textAlign: 'center',
-            '&:before': {
+            width: ["250px", "500px"],
+            height: ["180px", "360px"],
+            position: "relative",
+            display: "block",
+            textAlign: "center",
+            "&:before": {
               content: '""',
-              backgroundImage: 'url(/home/hcb.webp)',
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              width: '100%',
-              height: '100%',
-              marginX: 'auto',
-              display: 'block'
-            }
+              backgroundImage: "url(/home/hcb.webp)",
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              width: "100%",
+              height: "100%",
+              marginX: "auto",
+              display: "block",
+            },
           }}
         >
           {/* <Box
@@ -139,5 +139,5 @@ export default function Bank({ data }) {
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -9,94 +9,107 @@ import {
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/home/footer.png";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1000px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 4,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +118,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +132,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,28 +148,35 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box>
+            <MailCard/>
+        </Box>
       </Card>
       <BGImg
         gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
@@ -160,7 +185,7 @@ const MailingList = () => {
         alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..8581cbabf
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,15 @@
+import { Card, Text } from "theme-ui";
+
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
+  );
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/index.js b/pages/index.js
index 145861a30..ce3c6f24c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,38 +7,38 @@ import {
   Flex,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import React, { useEffect, useRef, useState } from 'react'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Stage from '../components/stage'
-import Carousel from '../components/index/carousel'
-import Outernet from '../components/index/cards/outernet'
-import Sprig from '../components/index/cards/sprig'
-import Sinerider from '../components/index/cards/sinerider'
-import SprigConsole from '../components/index/cards/sprig-console'
-import Clubs from '../components/index/cards/clubs'
-import Workshops from '../components/index/cards/workshops'
-import HCB from '../components/index/cards/hcb'
-import Hackathons from '../components/index/cards/hackathons'
-import OuternetImgFile from '../public/home/outernet-110.jpg'
-import Announcement from '../components/announcement'
-import Konami from 'react-konami-code'
-import JSConfetti from 'js-confetti'
-import Secret from '../components/secret'
-import MailingList from '../components/index/cards/mailing-list'
-import Slack from '../components/index/cards/slack'
-import Icon from '../components/icon'
-import GitHub from '../components/index/github'
-import Photo from '../components/photo'
-import Comma from '../components/comma'
-import Haxidraw from '../components/index/cards/haxidraw'
+  Text,
+} from "theme-ui";
+import React, { useEffect, useRef, useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Stage from "../components/stage";
+import Carousel from "../components/index/carousel";
+import Outernet from "../components/index/cards/outernet";
+import Sprig from "../components/index/cards/sprig";
+import Sinerider from "../components/index/cards/sinerider";
+import SprigConsole from "../components/index/cards/sprig-console";
+import Clubs from "../components/index/cards/clubs";
+import Workshops from "../components/index/cards/workshops";
+import HCB from "../components/index/cards/hcb";
+import Hackathons from "../components/index/cards/hackathons";
+import OuternetImgFile from "../public/home/outernet-110.jpg";
+import Announcement from "../components/announcement";
+import Konami from "react-konami-code";
+import JSConfetti from "js-confetti";
+import Secret from "../components/secret";
+import MailingList from "../components/index/cards/mailing-list";
+import Slack from "../components/index/cards/slack";
+import Icon from "../components/icon";
+import GitHub from "../components/index/github";
+import Photo from "../components/photo";
+import Comma from "../components/comma";
+import Haxidraw from "../components/index/cards/haxidraw";
 
 /** @jsxImportSource theme-ui */
 
@@ -56,78 +56,78 @@ function Page({
   gameTitle,
   events,
   carouselCards,
-  context
+  context,
 }) {
-  let [gameImage, setGameImage] = useState('')
-  let [gameImage1, setGameImage1] = useState('')
-  let [reveal, setReveal] = useState(false)
-  const [hover, setHover] = useState(true)
-  let [github, setGithub] = useState(0)
-  let [slackKey, setSlackKey] = useState(0)
-  let [key, setKey] = useState(0)
+  let [gameImage, setGameImage] = useState("");
+  let [gameImage1, setGameImage1] = useState("");
+  let [reveal, setReveal] = useState(false);
+  const [hover, setHover] = useState(true);
+  let [github, setGithub] = useState(0);
+  let [slackKey, setSlackKey] = useState(0);
+  let [key, setKey] = useState(0);
 
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
 
-  let jsConfetti = useRef()
+  let jsConfetti = useRef();
 
   useEffect(() => {
-    jsConfetti.current = new JSConfetti()
+    jsConfetti.current = new JSConfetti();
 
-    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
-    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
-  }, [])
+    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`;
+    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `;
+  }, []);
 
   const easterEgg = () => {
-    alert('Hey, you typed the Konami Code!')
+    alert("Hey, you typed the Konami Code!");
 
     jsConfetti.current.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  };
 
   useEffect(() => {
     if (reveal && !hover) {
       setTimeout(() => {
-        setReveal(false)
-      }, 2000)
+        setReveal(false);
+      }, 2000);
     }
-  }, [reveal, hover])
+  }, [reveal, hover]);
 
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let images = [
-    { alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
+    { alt: "Map of Hack Clubs around the world", src: "/home/map.png" },
     {
-      alt: 'Hack Clubbers at SpaceX HQ in LA',
-      src: '/home/zephyr-spacex.jpeg'
+      alt: "Hack Clubbers at SpaceX HQ in LA",
+      src: "/home/zephyr-spacex.jpeg",
     },
     {
-      alt: 'MA Hacks, Hack Clubber organized hackathon',
-      src: '/hackathons/mahacks.jpeg'
+      alt: "MA Hacks, Hack Clubber organized hackathon",
+      src: "/hackathons/mahacks.jpeg",
     },
-    { alt: 'AMA with Sal Khan', src: '/home/ama.png' },
-    { alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
-  ]
+    { alt: "AMA with Sal Khan", src: "/home/ama.png" },
+    { alt: "Hack Clubbers at Flagship, 2019", src: "/home/flagship_4.jpg" },
+  ];
 
   // janky right now and does not show last image
 
   useEffect(() => {
     console.log(
-      `White sheets of paper\nWaiting to be printed on\nA blank console waits`
-    )
+      `White sheets of paper\nWaiting to be printed on\nA blank console waits`,
+    );
     if (count === images.length - 1) {
-      setCount(0)
+      setCount(0);
     }
-  }, [count, images.length])
+  }, [count, images.length]);
 
   return (
     <>
@@ -149,17 +149,17 @@ function Page({
       <Box
         as="main"
         sx={{
-          overflowX: 'hidden',
-          position: 'relative'
+          overflowX: "hidden",
+          position: "relative",
         }}
       >
         <Secret
           reveal={reveal}
           onMouseEnter={() => {
-            setHover(true)
+            setHover(true);
           }}
           onMouseOut={() => {
-            setHover(false)
+            setHover(false);
           }}
         />
         <Konami action={easterEgg}>
@@ -169,12 +169,12 @@ function Page({
         <Box
           as="header"
           sx={{
-            bg: 'dark',
+            bg: "dark",
             pt: [5, 6],
             pb: [2, 3],
-            textAlign: 'left',
-            position: 'relative',
-            overflowX: 'hidden'
+            textAlign: "left",
+            position: "relative",
+            overflowX: "hidden",
           }}
         >
           <BGImg
@@ -192,21 +192,21 @@ function Page({
           />
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: [null, 'layout'],
-              position: 'relative',
-              mx: 'auto',
+              width: "90vw",
+              maxWidth: [null, "layout"],
+              position: "relative",
+              mx: "auto",
               py: [4, 4, 4],
-              textShadow: 'text'
+              textShadow: "text",
             }}
           >
             <Text
               variant="eyebrow"
               sx={{
-                color: 'sunken',
+                color: "sunken",
                 pb: 2,
-                position: 'relative',
-                display: 'block'
+                position: "relative",
+                display: "block",
               }}
               as="h4"
             >
@@ -217,42 +217,42 @@ function Page({
                 as="h1"
                 variant="title"
                 sx={{
-                  color: 'white',
+                  color: "white",
                   mb: [3, 4],
                   zIndex: 1,
-                  textAlign: 'left',
-                  fontSize: ['42px', '52px', '64px'],
+                  textAlign: "left",
+                  fontSize: ["42px", "52px", "64px"],
                   lineHeight: 1.2,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
-                We are <Comma>{slackData.total_members_count}</Comma>{' '}
+                We are <Comma>{slackData.total_members_count}</Comma>{" "}
                 <Text
                   sx={{
-                    color: 'transparent',
+                    color: "transparent",
                     ml: 2,
                     mr: 3,
-                    whiteSpace: 'nowrap'
+                    whiteSpace: "nowrap",
                   }}
                 >
                   <Text
                     onClick={() => {
-                      setHover(false)
-                      !reveal ? setReveal(true) : setReveal(false)
+                      setHover(false);
+                      !reveal ? setReveal(true) : setReveal(false);
                     }}
                     sx={{
                       // lineHeight: 0.875,
                       px: 2,
-                      backgroundColor: 'red',
-                      position: 'absolute',
+                      backgroundColor: "red",
+                      position: "absolute",
                       borderRadius: 10,
-                      transform: 'rotate(-3deg) translateY(-5px)',
-                      color: 'white',
-                      whiteSpace: 'nowrap',
-                      textDecoration: 'none',
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      transform: "rotate(-3deg) translateY(-5px)",
+                      color: "white",
+                      whiteSpace: "nowrap",
+                      textDecoration: "none",
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                     aria-hidden="true"
                   >
@@ -260,7 +260,7 @@ function Page({
                   </Text>
                   teen hackers
                 </Text>
-                <br sx={{ display: ['inline', 'none', 'none'] }} /> from around
+                <br sx={{ display: ["inline", "none", "none"] }} /> from around
                 the world who code together
               </Text>
               <Button
@@ -268,7 +268,7 @@ function Page({
                 as="a"
                 href="/slack"
                 mt={[3, 0, 0]}
-                sx={{ transformOrigin: 'center left' }}
+                sx={{ transformOrigin: "center left" }}
               >
                 Join our community
               </Button>
@@ -276,10 +276,10 @@ function Page({
           </Box>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: ['flex-start', 'flex-start', 'flex-end'],
+              display: "flex",
+              justifyContent: ["flex-start", "flex-start", "flex-end"],
               marginRight: 2,
-              mt: [4, 3, 1]
+              mt: [4, 3, 1],
             }}
           >
             <Badge
@@ -289,14 +289,14 @@ function Page({
               rel="noopener"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'black',
-                color: 'white',
+                zIndex: "1",
+                bg: "black",
+                color: "white",
                 opacity: 1,
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                ':hover': { opacity: 1 },
-                transition: '0.3s ease'
+                textDecoration: "none",
+                fontWeight: "normal",
+                ":hover": { opacity: 1 },
+                transition: "0.3s ease",
                 // mixBlendMode: 'multiply'
               }}
               title="📸 Photo by Matt Gleich, Hack Clubber in NH!"
@@ -305,32 +305,32 @@ function Page({
             </Badge>
           </Box>
         </Box>
-        <Box as="section" sx={{ py: [4, 5, '82px'], color: 'black' }}>
+        <Box as="section" sx={{ py: [4, 5, "82px"], color: "black" }}>
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Text
               variant="title"
               as="h1"
-              sx={{ fontSize: ['36px', '48px', '56px'] }}
+              sx={{ fontSize: ["36px", "48px", "56px"] }}
             >
-              Discover the{' '}
+              Discover the{" "}
               <Text
                 as="span"
                 sx={{
-                  borderRadius: 'default',
+                  borderRadius: "default",
                   px: 1,
                   mx: 0,
-                  whiteSpace: ['wrap', 'nowrap', 'nowrap'],
-                  color: 'white',
-                  background: theme => theme.util.gx('red', 'orange'),
-                  '-webkit-background-clip': 'text',
-                  '-webkit-text-fill-color': 'transparent'
+                  whiteSpace: ["wrap", "nowrap", "nowrap"],
+                  color: "white",
+                  background: (theme) => theme.util.gx("red", "orange"),
+                  "-webkit-background-clip": "text",
+                  "-webkit-text-fill-color": "transparent",
                 }}
               >
                 joy of code
@@ -341,50 +341,50 @@ function Page({
               variant="subtitle"
               as="p"
               sx={{
-                fontSize: ['18px', '20px', '22px'],
+                fontSize: ["18px", "20px", "22px"],
                 pb: [3, 3, 4],
-                maxWidth: '62ch'
+                maxWidth: "62ch",
               }}
             >
               Every day, thousands of Hack&nbsp;Clubbers gather online and
               in-person to make things with code. Whether you’re a beginner
               programmer or have years of experience, there’s a place for you at
-              Hack&nbsp;Club. Read about our{' '}
+              Hack&nbsp;Club. Read about our{" "}
               <Link href="/philosophy" target="_blank" rel="noopener">
                 hacker ethic
               </Link>
               .
             </Text>
-            <Grid columns={[1, 1, 1, '2.5fr 3fr']} gap={[0, 3, 4]} pt={[3, 4]}>
+            <Grid columns={[1, 1, 1, "2.5fr 3fr"]} gap={[0, 3, 4]} pt={[3, 4]}>
               <Box
                 sx={{
-                  position: 'relative',
-                  height: ['300px', '300px', '300px', '100%'],
-                  py: [3, 3, 3, 0]
+                  position: "relative",
+                  height: ["300px", "300px", "300px", "100%"],
+                  py: [3, 3, 3, 0],
                 }}
                 onClick={() => {
-                  setCount(count + 1)
+                  setCount(count + 1);
                 }}
               >
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -409,24 +409,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(-3deg)' : 'rotate(3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(-3deg)" : "rotate(3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -447,24 +447,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -485,28 +485,28 @@ function Page({
                     width: 36,
                     height: 36,
                     borderRadius: 24,
-                    display: 'inline-block',
+                    display: "inline-block",
                     fontSize: 2,
-                    lineHeight: '30px',
-                    textAlign: 'center',
-                    fontWeight: 'bold',
-                    border: '3px solid currentColor'
+                    lineHeight: "30px",
+                    textAlign: "center",
+                    fontWeight: "bold",
+                    border: "3px solid currentColor",
                   },
-                  p: { my: 0, fontSize: ['18px', '20px', '22px'] },
-                  strong: { display: 'block', fontSize: ['22px', 2, 3] }
+                  p: { my: 0, fontSize: ["18px", "20px", "22px"] },
+                  strong: { display: "block", fontSize: ["22px", 2, 3] },
                 }}
                 as="ul"
               >
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -518,9 +518,9 @@ function Page({
                       Connect with other teenage coders
                     </strong>
                     Have a coding question? Looking for project feedback? You’ll
-                    find hundreds of fabulous people to talk to in our global{' '}
+                    find hundreds of fabulous people to talk to in our global{" "}
                     <Link href="/slack" target="_blank" rel="noopener">
-                      Slack{' '}
+                      Slack{" "}
                     </Link>
                     (like Discord), active at all hours.
                   </Text>
@@ -528,13 +528,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -545,7 +545,7 @@ function Page({
                     as="p"
                     variant="subtitle"
                     sx={{
-                      mt: 0
+                      mt: 0,
                     }}
                   >
                     <strong sx={{ mb: 1 }}>
@@ -562,13 +562,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -578,11 +578,11 @@ function Page({
                   <Text as="p" variant="subtitle">
                     <strong sx={{ mb: 1 }}>Gather IRL with other makers</strong>
                     Meet other Hack&nbsp;Clubbers in your community to build
-                    together at one of the 400+{' '}
+                    together at one of the 400+{" "}
                     <Link href="/clubs" target="_blank" rel="noopener">
                       Hack&nbsp;Clubs
-                    </Link>{' '}
-                    and{' '}
+                    </Link>{" "}
+                    and{" "}
                     <Link href="/hackathons" target="_blank" rel="noopener">
                       high school hackathons
                     </Link>
@@ -597,44 +597,44 @@ function Page({
         <Box
           as="section"
           sx={{
-            background: 'snow',
+            background: "snow",
             backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-            backgroundSize: '40px 40px',
-            backgroundRepeat: 'repeat',
-            backgroundPosition: '10% 10%'
+            backgroundSize: "40px 40px",
+            backgroundRepeat: "repeat",
+            backgroundPosition: "10% 10%",
           }}
         >
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
             py={[4, 4, 5]}
           >
             <Box>
-              <Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
-                Connect with{' '}
+              <Text variant="title" sx={{ fontSize: ["36px", 4, 5] }}>
+                Connect with{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     px: 2,
                     mx: 0,
-                    whiteSpace: 'nowrap',
-                    color: 'white',
-                    bg: 'red'
+                    whiteSpace: "nowrap",
+                    color: "white",
+                    bg: "red",
                   }}
                 >
                   builders
-                </Text>{' '}
+                </Text>{" "}
                 from around the world
               </Text>
               <Text
                 variant="subtitle"
                 as="p"
-                sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
+                sx={{ fontSize: ["18px", "20px", "22px"], pb: [3, 0, 0] }}
               >
                 We gather both online and in-person to share our love of code
                 and make things together!
@@ -645,26 +645,26 @@ function Page({
           </Box>
         </Box>
         <Box>
-          <Box py={[4, 5, '82px']}>
+          <Box py={[4, 5, "82px"]}>
             <Box
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['column', 'column', 'column', 'row'],
-                  justifyContent: gitHubData ? 'center' : 'flex-start',
+                  flexDirection: ["column", "column", "column", "row"],
+                  justifyContent: gitHubData ? "center" : "flex-start",
                   alignItems: [
-                    'flex-start',
-                    'flex-start',
-                    'flex-start',
-                    'center'
+                    "flex-start",
+                    "flex-start",
+                    "flex-start",
+                    "center",
                   ],
-                  gap: '10px'
+                  gap: "10px",
                 }}
               >
                 <Box sx={{ mb: [3, 0, 0] }}>
@@ -672,31 +672,31 @@ function Page({
                     variant="title"
                     as="h2"
                     sx={{
-                      fontSize: ['36px', '48px', '56px'],
-                      maxWidth: '20ch'
+                      fontSize: ["36px", "48px", "56px"],
+                      maxWidth: "20ch",
                     }}
                   >
-                    We build{' '}
+                    We build{" "}
                     <Text
                       as="span"
                       sx={{
-                        borderRadius: 'default',
+                        borderRadius: "default",
                         mx: 0,
-                        whiteSpace: 'nowrap',
-                        color: 'orange'
+                        whiteSpace: "nowrap",
+                        color: "orange",
                       }}
                     >
                       open source
-                    </Text>{' '}
+                    </Text>{" "}
                     games and tools together
                   </Text>
                   <Text
                     variant="subtitle"
                     as="p"
                     sx={{
-                      fontSize: ['18px', '20px', '22px'],
+                      fontSize: ["18px", "20px", "22px"],
                       pb: [3, 0, 0],
-                      maxWidth: '60ch'
+                      maxWidth: "60ch",
                     }}
                   >
                     In collaboration with engineers on the Hack&nbsp;Club team,
@@ -708,30 +708,30 @@ function Page({
                 {gitHubData && (
                   <Flex
                     sx={{
-                      flexDirection: ['row', null, null, 'column'],
+                      flexDirection: ["row", null, null, "column"],
                       gap: [1, 2, 2],
-                      alignItems: ['center', 'center', 'center', 'flex-start'],
-                      flexWrap: 'wrap',
-                      width: ['100%', null, null, 'fit-content'],
+                      alignItems: ["center", "center", "center", "flex-start"],
+                      flexWrap: "wrap",
+                      width: ["100%", null, null, "fit-content"],
 
-                      '& > a:nth-child(n+4)': {
-                        display: ['none', null, null, 'flex']
-                      }
+                      "& > a:nth-child(n+4)": {
+                        display: ["none", null, null, "flex"],
+                      },
                     }}
                   >
                     <Text
                       sx={{
-                        fontSize: ['11px', '11px', '14px'],
-                        textAlign: 'left',
-                        lineHeight: '90%',
-                        fontStyle: 'italic',
-                        width: 'fit-content'
+                        fontSize: ["11px", "11px", "14px"],
+                        textAlign: "left",
+                        lineHeight: "90%",
+                        fontStyle: "italic",
+                        width: "fit-content",
                       }}
                     >
                       Live from GitHub
                     </Text>
                     {gitHubData
-                      .filter(data => !data.user.endsWith('[bot]'))
+                      .filter((data) => !data.user.endsWith("[bot]"))
                       .slice(0, 4)
                       .map((data, key) => {
                         return (
@@ -744,7 +744,7 @@ function Page({
                             message={data.message}
                             key={key}
                           />
-                        )
+                        );
                       })}
                   </Flex>
                 )}
@@ -770,12 +770,12 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'relative',
-              background: 'snow',
+              position: "relative",
+              background: "snow",
               backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-              backgroundSize: '40px 40px',
-              backgroundRepeat: 'repeat',
-              backgroundPosition: '10% 10%'
+              backgroundSize: "40px 40px",
+              backgroundRepeat: "repeat",
+              backgroundPosition: "10% 10%",
               // '&:hover': {
               //   backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
               // }
@@ -783,22 +783,22 @@ function Page({
           >
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
+                position: "absolute",
+                width: "100%",
+                height: "100%",
                 top: 0,
-                left: 0
+                left: 0,
               }}
             >
               {}
             </Box>
             <Box
-              py={[4, 5, '82px']}
+              py={[4, 5, "82px"]}
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Box>
@@ -806,20 +806,20 @@ function Page({
                   variant="title"
                   as="h2"
                   sx={{
-                    fontSize: ['36px', '48px', '72px'],
-                    width: '18ch',
-                    textAlign: 'center',
-                    margin: 'auto'
+                    fontSize: ["36px", "48px", "72px"],
+                    width: "18ch",
+                    textAlign: "center",
+                    margin: "auto",
                   }}
                 >
-                  Find your{' '}
+                  Find your{" "}
                   <Text
                     as="span"
                     sx={{
-                      borderRadius: 'default',
+                      borderRadius: "default",
                       mx: 0,
-                      whiteSpace: 'nowrap',
-                      color: 'orange'
+                      whiteSpace: "nowrap",
+                      color: "orange",
                     }}
                   >
                     IRL community.
@@ -829,10 +829,10 @@ function Page({
                   variant="subtitle"
                   as="p"
                   sx={{
-                    fontSize: ['18px', '24px', '32px'],
-                    margin: 'auto',
+                    fontSize: ["18px", "24px", "32px"],
+                    margin: "auto",
                     pt: 2,
-                    textAlign: 'center'
+                    textAlign: "center",
                   }}
                 >
                   Thousands of Hack Clubbers organize and participate in
@@ -851,19 +851,19 @@ function Page({
             </Box>
           </Box>
         </Box>
-        <Box py={[4, 5, '82px']}>
+        <Box py={[4, 5, "82px"]}>
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Box>
               <Text
                 as="p"
                 variant="eyebrow"
-                sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}
+                sx={{ fontSize: ["22px", 2, 3], textAlign: "center" }}
               >
                 We've got a lot going on - Let’s recap
               </Text>
@@ -871,22 +871,22 @@ function Page({
                 variant="title"
                 as="h2"
                 sx={{
-                  fontSize: ['36px', '48px', '72px'],
-                  width: '16ch',
-                  textAlign: 'center',
-                  margin: 'auto'
+                  fontSize: ["36px", "48px", "72px"],
+                  width: "16ch",
+                  textAlign: "center",
+                  margin: "auto",
                 }}
               >
-                Find your second home at{' '}
+                Find your second home at{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     ml: 0,
-                    whiteSpace: ['wrap', 'nowrap'],
-                    background: theme => theme.util.gx('red', 'orange'),
-                    '-webkit-background-clip': 'text',
-                    '-webkit-text-fill-color': 'transparent'
+                    whiteSpace: ["wrap", "nowrap"],
+                    background: (theme) => theme.util.gx("red", "orange"),
+                    "-webkit-background-clip": "text",
+                    "-webkit-text-fill-color": "transparent",
                   }}
                 >
                   Hack&nbsp;Club
@@ -899,17 +899,17 @@ function Page({
               gap={3}
               columns={[1, 2, 3]}
               sx={{
-                textAlign: 'left',
-                '> a, > div': {
-                  borderRadius: 'extra',
-                  boxShadow: 'elevated',
-                  p: [3, null, 4]
+                textAlign: "left",
+                "> a, > div": {
+                  borderRadius: "extra",
+                  boxShadow: "elevated",
+                  p: [3, null, 4],
                 },
                 span: {
                   boxShadow:
-                    '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                    "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
                 },
-                svg: { fill: 'currentColor' }
+                svg: { fill: "currentColor" },
               }}
             >
               <Card
@@ -920,20 +920,20 @@ function Page({
                 variant="interactive"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(51, 142, 218)' },
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(51, 142, 218)" },
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
               >
                 <Icon
@@ -941,13 +941,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -957,32 +957,32 @@ function Page({
                   desc="Connect with other technical teenagers on Slack and hack on things together."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-                  color: 'white',
-                  svg: { color: '#fb558e' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+                  color: "white",
+                  svg: { color: "#fb558e" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="https://github.com/hackclub"
@@ -995,13 +995,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: [1, '16px', '20px'],
+                    fontSize: [1, "16px", "20px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1011,32 +1011,32 @@ function Page({
                   desc="We’re currently building a game engine, daily streak system, graphing game, and more!"
                   sx={{
                     p: {
-                      fontSize: [1, '16px', '20px']
+                      fontSize: [1, "16px", "20px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(236, 55, 80)' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(236, 55, 80)" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="/clubs"
@@ -1049,13 +1049,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1065,11 +1065,11 @@ function Page({
                   desc="Build an in-person community of high school hackers, and we’re here to help."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
@@ -1077,23 +1077,23 @@ function Page({
           </Box>
         </Box>
       </Box>
-      {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
-        'z' && (
+      {new URL(asPath, "http://example.com").searchParams.get("gen") ===
+        "z" && (
         <>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               top: 0,
-              width: '100%',
-              zIndex: 1000
+              width: "100%",
+              zIndex: 1000,
             }}
           >
             <Box
               sx={{
-                position: 'relative',
-                margin: 'auto',
-                width: 'fit-content',
-                lineHeight: 0
+                position: "relative",
+                margin: "auto",
+                width: "fit-content",
+                lineHeight: 0,
               }}
             >
               <iframe
@@ -1109,11 +1109,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               right: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1128,11 +1128,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               left: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1151,16 +1151,16 @@ function Page({
       <Footer
         dark
         sx={{
-          backgroundColor: 'dark',
-          position: 'relative',
-          overflow: 'hidden',
-          textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-          'h2,span,p,a': { color: 'white !important' },
-          '> div img': { objectPosition: ['left', 'center'] },
+          backgroundColor: "dark",
+          position: "relative",
+          overflow: "hidden",
+          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+          "h2,span,p,a": { color: "white !important" },
+          "> div img": { objectPosition: ["left", "center"] },
           svg: {
-            fill: 'white',
-            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-          }
+            fill: "white",
+            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+          },
         }}
       >
         <style>
@@ -1170,73 +1170,73 @@ function Page({
         </style>
       </Footer>
     </>
-  )
+  );
 }
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 export async function getStaticProps() {
-  const carouselCards = require('../lib/carousel.json')
+  const carouselCards = require("../lib/carousel.json");
 
   // HCB: get total raised
-  let bankData = []
-  let initialBankData = await fetch('https://hcb.hackclub.com/stats').then(r =>
-    r.json()
-  )
-  let raised = initialBankData.raised / 100
+  let bankData = [];
+  let initialBankData = await fetch("https://hcb.hackclub.com/stats").then(
+    (r) => r.json(),
+  );
+  let raised = initialBankData.raised / 100;
 
   bankData.push(
-    `💰 ${raised.toLocaleString('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    })} raised`
-  )
+    `💰 ${raised.toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+    })} raised`,
+  );
 
   // Slack: get total raised
-  const { Slack: Slacky } = require('./api/slack')
-  let slackData = await Slacky()
+  const { Slack: Slacky } = require("./api/slack");
+  let slackData = await Slacky();
 
   // GitHub: get latest github activity (currently this is erroring and
   // preventing the site from deploying
 
-  const { fetchGitHub } = require('./api/github')
-  let gitHubData = await fetchGitHub()
+  const { fetchGitHub } = require("./api/github");
+  let gitHubData = await fetchGitHub();
 
   //   let gitHubData = null
 
   // GitHub: get latest GitHub stars
-  const { fetchStars } = require('./api/stars')
-  let stars = await fetchStars()
+  const { fetchStars } = require("./api/stars");
+  let stars = await fetchStars();
 
   // Sprig: get newest games
-  const { getGames } = require('./api/games')
-  let game = await getGames()
+  const { getGames } = require("./api/games");
+  let game = await getGames();
 
-  let gameTitle = []
+  let gameTitle = [];
 
-  gameTitle = game.map(r => r.title)
+  gameTitle = game.map((r) => r.title);
 
   // Sprig: get console count
-  const { getConsoles } = require('./api/sprig-console')
-  const consoleCount = await getConsoles()
+  const { getConsoles } = require("./api/sprig-console");
+  const consoleCount = await getConsoles();
 
   // Hackathons: get latest hackathons
-  let hackathonsData
+  let hackathonsData;
   try {
     const response = await fetch(
-      'https://hackathons.hackclub.com/api/events/upcoming'
-    )
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (response.ok) {
-      hackathonsData = await response.json()
+      hackathonsData = await response.json();
     } else {
-      hackathonsData = [] // or some default value if the fetch fails
+      hackathonsData = []; // or some default value if the fetch fails
     }
   } catch (error) {
-    hackathonsData = [] // or some default value if an error occurs
+    hackathonsData = []; // or some default value if an error occurs
   }
 
   let events = await fetch(
-    'https://events.hackclub.com/api/events/upcoming/'
-  ).then(res => res.json())
+    "https://events.hackclub.com/api/events/upcoming/",
+  ).then((res) => res.json());
 
   return {
     props: {
@@ -1249,10 +1249,10 @@ export async function getStaticProps() {
       slackData,
       stars,
       events,
-      carouselCards
+      carouselCards,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
 
-export default Page
+export default Page;
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/onboard.js b/pages/onboard.js
index 9ef14650d..0a1085408 100644
--- a/pages/onboard.js
+++ b/pages/onboard.js
@@ -1,35 +1,35 @@
-import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from 'theme-ui'
-import Balancer from 'react-wrap-balancer'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import Sparkles from '../components/sparkles'
-import Tilt from '../components/tilt'
-import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
-import { useRef, useEffect, useState } from 'react'
+import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from "theme-ui";
+import Balancer from "react-wrap-balancer";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import Sparkles from "../components/sparkles";
+import Tilt from "../components/tilt";
+import usePrefersReducedMotion from "../lib/use-prefers-reduced-motion";
+import { useRef, useEffect, useState } from "react";
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
  */
 const traceSx = {
   width: 6,
-  bg: '#e2b747',
-  alignSelf: 'stretch',
+  bg: "#e2b747",
+  alignSelf: "stretch",
   mr: 100,
-  position: 'relative'
-}
+  position: "relative",
+};
 
-const dimBg = '#151515'
+const dimBg = "#151515";
 
 // Beloved classic utility function :3
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 // "LET'S RECAP" pixel art (exported from Piskel)
 // Original: https://doggo.ninja/fiK0nk.piskel
-const recapWidth = 71
-const recapHeight = 10
+const recapWidth = 71;
+const recapHeight = 10;
 const recapPixels = [
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
   0x00000000, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff,
@@ -149,140 +149,140 @@ const recapPixels = [
   0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0x00000000, 0xffffffff,
   0xffffffff, 0x00000000, 0x00000000, 0xffffffff, 0xffffffff, 0x00000000,
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
-  0xffffffff, 0xffffffff
-]
+  0xffffffff, 0xffffffff,
+];
 
-const slackLink = '/slack/?event=onboard'
+const slackLink = "/slack/?event=onboard";
 
-const stickerButtonText = 'Click 4 Stickers'
-const stickerButtonFont = 'Oleo Script'
+const stickerButtonText = "Click 4 Stickers";
+const stickerButtonFont = "Oleo Script";
 const stickerButtonFontStylesheet = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-  stickerButtonFont
-)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`
+  stickerButtonFont,
+)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`;
 
 const wandImgTraced =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png";
 const wandImgRendered =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png";
 
 const ShipPage = () => {
-  const prefersReducedMotion = usePrefersReducedMotion()
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   // Wand flicker animation
-  const [wandImg, setWandImg] = useState(wandImgTraced)
-  const wandAnimated = useRef(false)
+  const [wandImg, setWandImg] = useState(wandImgTraced);
+  const wandAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const flicker = async () => {
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(Math.random() * 80 + 10)
-      if (canceled) return
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, Math.random() * 4000 + 500)
-    }
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(Math.random() * 80 + 10);
+      if (canceled) return;
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, Math.random() * 4000 + 500);
+    };
 
     const animate = async () => {
-      if (wandAnimated.current) return
-      wandAnimated.current = true
-
-      await sleep(1500)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(60)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(340)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(14)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(55)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(10)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(150)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, 1200)
-    }
+      if (wandAnimated.current) return;
+      wandAnimated.current = true;
+
+      await sleep(1500);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(60);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(340);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(14);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(55);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(10);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(150);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, 1200);
+    };
 
     if (prefersReducedMotion) {
-      setWandImg(wandImgRendered)
+      setWandImg(wandImgRendered);
     } else {
-      animate()
+      animate();
     }
 
-    return () => (canceled = true)
-  }, [prefersReducedMotion])
+    return () => (canceled = true);
+  }, [prefersReducedMotion]);
 
   // Spotlight effect
-  const spotlightRef = useRef()
+  const spotlightRef = useRef();
   useEffect(() => {
-    const handler = event => {
+    const handler = (event) => {
       spotlightRef.current.style.background = `radial-gradient(
 				circle at ${event.pageX}px ${event.pageY}px,
 				rgba(0, 0, 0, 0) 10px,
 				rgba(0, 0, 0, 0.8) 80px
-			)`
-    }
-    window.addEventListener('mousemove', handler)
-    return () => window.removeEventListener('mousemove', handler)
-  }, [])
+			)`;
+    };
+    window.addEventListener("mousemove", handler);
+    return () => window.removeEventListener("mousemove", handler);
+  }, []);
 
   // Calculating the bus height to match the bottom left of the first connector.
-  const [busHeight, setBusHeight] = useState(null)
-  const containerRef = useRef() // For ResizeObserver
-  const connectorRef = useRef() // To get bottom left position
-  const busRef = useRef() // To calculate height differential
+  const [busHeight, setBusHeight] = useState(null);
+  const containerRef = useRef(); // For ResizeObserver
+  const connectorRef = useRef(); // To get bottom left position
+  const busRef = useRef(); // To calculate height differential
 
   useEffect(() => {
     const observer = new ResizeObserver(() => {
-      const connectorRect = connectorRef.current.getBoundingClientRect()
-      const busRect = busRef.current.getBoundingClientRect()
-      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5)
-    })
+      const connectorRect = connectorRef.current.getBoundingClientRect();
+      const busRect = busRef.current.getBoundingClientRect();
+      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5);
+    });
 
-    observer.observe(containerRef.current)
-    return () => observer.disconnect()
-  }, [])
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   // Fancy lights animation
-  const lightsScrollTrigger = useRef()
-  const lightsAnimated = useRef(false)
+  const lightsScrollTrigger = useRef();
+  const lightsAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const setAtIndex = (i, color) => {
-      if (canceled) return
+      if (canceled) return;
 
       // Going outside of React for performance
-      const el = document.getElementById(`pixel-${i}`)
-      if (!el) return
+      const el = document.getElementById(`pixel-${i}`);
+      if (!el) return;
 
       if (recapPixels[i]) {
-        el.style.background = color
-        el.style.boxShadow = `0 0 10px ${color}`
+        el.style.background = color;
+        el.style.boxShadow = `0 0 10px ${color}`;
       } else {
-        el.style.background = dimBg
-        el.style.boxShadow = 'none'
+        el.style.background = dimBg;
+        el.style.boxShadow = "none";
       }
-    }
-    const setAll = color => {
-      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color)
-    }
+    };
+    const setAll = (color) => {
+      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color);
+    };
 
     const animate = async () => {
-      if (lightsAnimated.current) return
-      lightsAnimated.current = true
+      if (lightsAnimated.current) return;
+      lightsAnimated.current = true;
 
       // Illuminate lights in diagonal lines starting with only top left.
       for (
@@ -295,66 +295,66 @@ const ShipPage = () => {
           offset >= Math.max(0, curColumn - recapHeight);
           offset--
         ) {
-          const i = curColumn * recapWidth + offset - offset * recapWidth
-          setAtIndex(i, '#ffffff')
-          if (!recapPixels[i]) await sleep(4)
-          if (canceled) return
+          const i = curColumn * recapWidth + offset - offset * recapWidth;
+          setAtIndex(i, "#ffffff");
+          if (!recapPixels[i]) await sleep(4);
+          if (canceled) return;
         }
         // await sleep(2); if (canceled) return
       }
 
       // Flash the lights twice
-      await sleep(600)
-      if (canceled) return
+      await sleep(600);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(80)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(80);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(20)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(20);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(30)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(30);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(100)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(100);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(200)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(200);
+      if (canceled) return;
 
       // Animate rainbow 2-column increments
       for (let x = 0; x < recapWidth; x++) {
-        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`
+        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`;
         for (let y = 0; y < recapHeight; y++) {
-          const i = y * recapWidth + x
-          setAtIndex(i, color)
+          const i = y * recapWidth + x;
+          setAtIndex(i, color);
         }
-        if (x % 2 === 1) await sleep(35)
+        if (x % 2 === 1) await sleep(35);
       }
-    }
+    };
 
     if (prefersReducedMotion) {
-      if (!lightsAnimated.current) setAll('#ffffff')
-      return () => (canceled = true)
+      if (!lightsAnimated.current) setAll("#ffffff");
+      return () => (canceled = true);
     } else {
       const observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting) animate()
+          if (entry.isIntersecting) animate();
         },
-        { threshold: 0.5 }
-      )
-      observer.observe(lightsScrollTrigger.current)
+        { threshold: 0.5 },
+      );
+      observer.observe(lightsScrollTrigger.current);
       return () => {
-        canceled = true
-        observer.disconnect()
-      }
+        canceled = true;
+        observer.disconnect();
+      };
     }
-  }, [prefersReducedMotion])
+  }, [prefersReducedMotion]);
 
   return (
     <>
@@ -393,54 +393,54 @@ const ShipPage = () => {
       <Box
         as="header"
         sx={{
-          bg: '#000000',
+          bg: "#000000",
           backgroundImage: `
 						linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
 						url('https://cloud-dst3a9oz5-hack-club-bot.vercel.app/0image.png')
 					`,
-          color: '#ffffff',
-          position: 'relative'
+          color: "#ffffff",
+          position: "relative",
         }}
       >
         <Box
           ref={spotlightRef}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             zIndex: 2,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            bg: '#000000',
-            pointerEvents: 'none'
+            bg: "#000000",
+            pointerEvents: "none",
           }}
         />
 
         <Flex
           sx={{
             p: 4,
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             zIndex: 5,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Flex
             sx={{
               pt: 80,
-              width: '100%',
-              maxWidth: 'layout',
-              alignItems: 'center'
+              width: "100%",
+              maxWidth: "layout",
+              alignItems: "center",
             }}
           >
-            <Flex sx={{ flex: 1, flexDirection: 'column', gap: 25 }}>
+            <Flex sx={{ flex: 1, flexDirection: "column", gap: 25 }}>
               <Heading
                 as="h1"
                 sx={{
                   fontSize: 80,
-                  maxWidth: 'copyPlus',
-                  textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
-                  color: '#87ffa1'
+                  maxWidth: "copyPlus",
+                  textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
+                  color: "#87ffa1",
                 }}
               >
                 <Balancer ratio={0.3}>OnBoard</Balancer>
@@ -448,10 +448,10 @@ const ShipPage = () => {
 
               <Heading
                 as="div"
-                sx={{ fontSize: 4, fontWeight: 400, maxWidth: 'copyPlus' }}
+                sx={{ fontSize: 4, fontWeight: 400, maxWidth: "copyPlus" }}
               >
                 <Balancer ratio={0.3}>
-                  Circuit boards are{' '}
+                  Circuit boards are{" "}
                   <Sparkles>
                     <Text sx={{ fontWeight: 400 }}>magical</Text>
                   </Sparkles>
@@ -466,7 +466,7 @@ const ShipPage = () => {
                   href="https://hack.af/pcb-jam"
                   target="_blank"
                   sx={{
-                    background: t => t.util.gx('#60cc38', '#113b11')
+                    background: (t) => t.util.gx("#60cc38", "#113b11"),
                   }}
                 >
                   Learn PCB Design Now!
@@ -478,8 +478,8 @@ const ShipPage = () => {
                   href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                   target="_blank"
                   sx={{
-                    borderColor: '#113b11',
-                    color: '#60cc38'
+                    borderColor: "#113b11",
+                    color: "#60cc38",
                   }}
                 >
                   Get a Grant
@@ -504,8 +504,8 @@ const ShipPage = () => {
               pb: 35,
               fontSize: 36,
               fontWeight: 500,
-              maxWidth: 'copy',
-              textAlign: 'center'
+              maxWidth: "copy",
+              textAlign: "center",
             }}
           >
             <Balancer ratio={0.8}>
@@ -519,12 +519,12 @@ const ShipPage = () => {
             sx={{
               fontSize: 2,
               h3: { fontSize: 2 },
-              width: '100%',
-              maxWidth: 'layout',
-              pb: 40
+              width: "100%",
+              maxWidth: "layout",
+              pb: 40,
             }}
           >
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Community & Friends</Text>
               <Text as="p">
                 Share your progress and ask for help with Hack Club teens who
@@ -532,7 +532,7 @@ const ShipPage = () => {
               </Text>
             </Flex>
 
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Free Manufacturing</Text>
               <Text as="p">
                 We’ll pay $100 to cover manufacturing costs, enough for 2-3
@@ -550,16 +550,16 @@ const ShipPage = () => {
           pt: 6,
           pb: 4,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
@@ -567,9 +567,9 @@ const ShipPage = () => {
             sx={{
               fontSize: 42,
               fontWeight: 500,
-              borderTop: '4px solid',
-              borderTopColor: 'red',
-              pt: 4
+              borderTop: "4px solid",
+              borderTopColor: "red",
+              pt: 4,
             }}
           >
             <Balancer ratio={0.3}>
@@ -577,15 +577,15 @@ const ShipPage = () => {
             </Balancer>
           </Heading>
           <Text sx={{ fontSize: 3 }}>
-            Learn how to design your own circuit boards from scratch with our{' '}
-            <strong>official tutorials</strong> and jams, like Maggie’s{' '}
+            Learn how to design your own circuit boards from scratch with our{" "}
+            <strong>official tutorials</strong> and jams, like Maggie’s{" "}
             <Link href="https://hack.af/pcb-jam" target="_blank">
               intro to PCB design jam
             </Link>
-            . Ask in the{' '}
+            . Ask in the{" "}
             <Link href={slackLink} target="_blank">
               Hack Club Slack
-            </Link>{' '}
+            </Link>{" "}
             if you have any questions!
           </Text>
         </Flex>
@@ -594,27 +594,27 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 5,
           pb: 6,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 36, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 36, fontWeight: 500, textAlign: "center" }}
           >
             <Balancer>What have people made already?</Balancer>
           </Heading>
@@ -623,39 +623,39 @@ const ShipPage = () => {
             width={350}
             gap={3}
             sx={{
-              width: '100%',
+              width: "100%",
               fontSize: 2,
               a: {
-                display: 'block',
-                position: 'relative',
-                bg: '#000000',
-                borderRadius: 'default',
+                display: "block",
+                position: "relative",
+                bg: "#000000",
+                borderRadius: "default",
                 px: 3,
                 py: 4,
-                color: 'inherit',
-                textDecoration: 'inherit',
-                '.arrow': {
-                  position: 'relative',
-                  left: '0px',
-                  top: '1px', // Looks more aligned with text.
-                  display: 'inline-block',
-                  transition: 'left 80ms ease-in'
+                color: "inherit",
+                textDecoration: "inherit",
+                ".arrow": {
+                  position: "relative",
+                  left: "0px",
+                  top: "1px", // Looks more aligned with text.
+                  display: "inline-block",
+                  transition: "left 80ms ease-in",
+                },
+                "&:hover .arrow": {
+                  left: "4px",
                 },
-                '&:hover .arrow': {
-                  left: '4px'
-                }
               },
               article: {
-                flexDirection: 'column',
+                flexDirection: "column",
                 gap: 3,
-                justifyContent: 'center',
-                height: '100%',
-                zIndex: 1
+                justifyContent: "center",
+                height: "100%",
+                zIndex: 1,
               },
               img: {
-                pointerEvents: 'none',
-                zIndex: 2
-              }
+                pointerEvents: "none",
+                zIndex: 2,
+              },
             }}
           >
             <a
@@ -666,7 +666,7 @@ const ShipPage = () => {
                 <Text as="p" sx={{ pr: 115 }}>
                   A <strong>fidget spinner</strong> without any moving parts.
                 </Text>
-                <Text as="p" sx={{ pr: 100, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 100, color: "gray" }}>
                   See Micha's work&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -675,9 +675,9 @@ const ShipPage = () => {
                   alt="A red circular circuit board with a graphic of white fidget spinner on it."
                   sx={{
                     maxWidth: 120,
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
-                    right: 10
+                    right: 10,
                   }}
                 />
               </Flex>
@@ -689,10 +689,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: 100 }}>
-                  A <strong>movement sensor</strong> add-on to an open source{' '}
+                  A <strong>movement sensor</strong> add-on to an open source{" "}
                   <strong>game console</strong>.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   Read the source&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
@@ -700,9 +700,9 @@ const ShipPage = () => {
                   alt="A black circuit board for a game console with copper wiring."
                   sx={{
                     maxWidth: 280,
-                    position: 'absolute',
+                    position: "absolute",
                     bottom: -40,
-                    right: -75
+                    right: -75,
                   }}
                 />
               </Flex>
@@ -714,10 +714,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
-                  Hugo's <strong>USB-C hub</strong> for the best{' '}
+                  Hugo's <strong>USB-C hub</strong> for the best{" "}
                   <strong>hackathon swag</strong> ever.
                 </Text>
-                <Text as="p" sx={{ color: 'gray', pr: 150 }}>
+                <Text as="p" sx={{ color: "gray", pr: 150 }}>
                   Build one for your event&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -729,8 +729,8 @@ const ShipPage = () => {
                     right: -15,
                     bottom: -10,
                     maxWidth: 260,
-                    position: 'absolute',
-                    zIndex: 6
+                    position: "absolute",
+                    zIndex: 6,
                   }}
                 />
               </Flex>
@@ -745,18 +745,18 @@ const ShipPage = () => {
                   Karmanyaah's <strong>digital level</strong> in the shape of a
                   longhorn.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   See the designs&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
                   src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
                   alt="A longhorn-shaped PCB with glowing horns."
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
                     right: -30,
                     maxWidth: 230,
-                    transform: 'rotate(20deg)'
+                    transform: "rotate(20deg)",
                   }}
                 />
               </Flex>
@@ -780,24 +780,24 @@ const ShipPage = () => {
         sx={{
           px: 4,
           pt: 5,
-          bg: '#ffffff',
-          color: '#000000',
-          justifyContent: 'center'
+          bg: "#ffffff",
+          color: "#000000",
+          justifyContent: "center",
         }}
       >
         <Flex
           as="section"
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
           ref={containerRef}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 5, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 5, fontWeight: 500, textAlign: "center" }}
           >
             How to Qualify
           </Heading>
@@ -806,29 +806,29 @@ const ShipPage = () => {
             <Box
               sx={{
                 ...traceSx,
-                alignSelf: 'flex-end',
-                height: busHeight
+                alignSelf: "flex-end",
+                height: busHeight,
               }}
               ref={busRef}
             />
 
             <Flex
               sx={{
-                flexDirection: ['column', 'column', 'row'],
+                flexDirection: ["column", "column", "row"],
                 flex: 1,
                 gap: 5,
-                pb: 5
+                pb: 5,
               }}
             >
               <Flex
                 as="ul"
                 sx={{
-                  flexDirection: 'column',
+                  flexDirection: "column",
                   fontSize: 24,
-                  listStyleType: 'none',
+                  listStyleType: "none",
                   gap: 4,
                   flex: 1,
-                  p: 0
+                  p: 0,
                 }}
               >
                 {[
@@ -841,7 +841,7 @@ const ShipPage = () => {
                     screenshot.
                   </>,
                   <>
-                    <strong>Open source your design</strong> on GitHub and{' '}
+                    <strong>Open source your design</strong> on GitHub and{" "}
                     <Link
                       href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                       target="_blank"
@@ -849,15 +849,15 @@ const ShipPage = () => {
                       apply for the grant
                     </Link>
                     ! You must be a teenager in high school to apply.
-                  </>
+                  </>,
                 ].map((text, i) => (
                   <Text
                     as="li"
                     key={i}
                     sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      position: 'relative'
+                      display: "flex",
+                      alignItems: "center",
+                      position: "relative",
                     }}
                   >
                     <Box
@@ -865,11 +865,11 @@ const ShipPage = () => {
                         width: 30,
                         height: 30,
                         borderWidth: traceSx.width,
-                        borderStyle: 'solid',
+                        borderStyle: "solid",
                         borderColor: traceSx.bg,
-                        borderRadius: '50%',
-                        left: t => -60,
-                        position: 'absolute'
+                        borderRadius: "50%",
+                        left: (t) => -60,
+                        position: "absolute",
                       }}
                     >
                       <Box
@@ -881,11 +881,11 @@ const ShipPage = () => {
                           width: traceSx.width,
                           height: 69,
                           bg: traceSx.bg,
-                          position: 'absolute',
-                          transform: 'rotate(45deg)',
-                          transformOrigin: 'top right',
-                          top: '20.5px',
-                          left: '-5px'
+                          position: "absolute",
+                          transform: "rotate(45deg)",
+                          transformOrigin: "top right",
+                          top: "20.5px",
+                          left: "-5px",
                         }}
                       />
                     </Box>
@@ -903,8 +903,8 @@ const ShipPage = () => {
                   sx={{
                     flex: 1,
                     maxWidth: 350,
-                    objectFit: 'contain',
-                    mt: ['-40px', '-40px', 0]
+                    objectFit: "contain",
+                    mt: ["-40px", "-40px", 0],
                   }}
                 />
               </Tilt>
@@ -916,26 +916,26 @@ const ShipPage = () => {
       <Flex
         sx={{
           px: 4,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
-        <Flex as="section" sx={{ width: '100%', maxWidth: 'layout' }}>
+        <Flex as="section" sx={{ width: "100%", maxWidth: "layout" }}>
           <Box sx={traceSx}>
             <Box
               sx={{
                 height: traceSx.width,
                 width: 40,
                 bg: traceSx.bg,
-                position: 'absolute',
+                position: "absolute",
                 bottom: 0,
-                left: -20 + traceSx.width / 2
+                left: -20 + traceSx.width / 2,
               }}
             />
           </Box>
 
-          <Flex sx={{ flex: 1, flexDirection: 'column', gap: 4, py: 5 }}>
+          <Flex sx={{ flex: 1, flexDirection: "column", gap: 4, py: 5 }}>
             <Heading as="h2" sx={{ fontSize: 36, fontWeight: 500 }}>
               <Balancer>Join the Hack Club Slack</Balancer>
             </Heading>
@@ -960,35 +960,35 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 6,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 5,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
         >
           {/* For accessibility and screen readers: */}
           <Heading
             as="h2"
             sx={{
-              position: 'absolute',
-              width: '1px',
-              height: '1px',
-              margin: '-1px',
-              overflow: 'hidden',
-              clip: 'rect(0, 0, 0, 0)',
-              whiteSpace: 'nowrap',
-              borderWidth: 0
+              position: "absolute",
+              width: "1px",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              clip: "rect(0, 0, 0, 0)",
+              whiteSpace: "nowrap",
+              borderWidth: 0,
             }}
           >
             Let's Recap
@@ -996,15 +996,15 @@ const ShipPage = () => {
 
           <Grid
             ref={lightsScrollTrigger}
-            gap={['2px', '3px', '4px']}
+            gap={["2px", "3px", "4px"]}
             columns={recapWidth}
-            sx={{ width: '100%', maxWidth: 800 }}
+            sx={{ width: "100%", maxWidth: 800 }}
           >
             {recapPixels.map((_, i) => (
               <Box
                 id={`pixel-${i}`}
                 key={i}
-                sx={{ bg: dimBg, paddingTop: '100%' }}
+                sx={{ bg: dimBg, paddingTop: "100%" }}
               />
             ))}
           </Grid>
@@ -1013,23 +1013,23 @@ const ShipPage = () => {
             width={300}
             gap={4}
             sx={{
-              width: '100%',
+              width: "100%",
               article: {
                 bg: dimBg,
-                borderRadius: 'default',
+                borderRadius: "default",
                 p: 4,
-                flexDirection: 'column',
-                boxShadow: 'inset 0px 0px 14px rgba(255, 255, 255, 0.15);'
+                flexDirection: "column",
+                boxShadow: "inset 0px 0px 14px rgba(255, 255, 255, 0.15);",
               },
               h3: {
                 fontSize: 3,
-                mb: 3
+                mb: 3,
               },
               p: {
                 fontSize: 18,
                 pb: 3,
-                mb: '6px'
-              }
+                mb: "6px",
+              },
             }}
           >
             <Flex as="article">
@@ -1051,7 +1051,7 @@ const ShipPage = () => {
             <Flex
               as="article"
               sx={{
-                transform: 'scale(1.1)'
+                transform: "scale(1.1)",
               }}
             >
               <Text as="h3">Learn to PCB</Text>
@@ -1078,16 +1078,16 @@ const ShipPage = () => {
         </Flex>
       </Flex>
 
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         <Image
           src="https://cloud-f4lij7sq1-hack-club-bot.vercel.app/0flowerpcb.png"
           alt="A big image of several pink flower-shaped PCBs."
           loading="lazy"
           sx={{
-            display: 'block',
-            width: '100%',
+            display: "block",
+            width: "100%",
             height: 500,
-            objectFit: 'cover'
+            objectFit: "cover",
           }}
         />
 
@@ -1096,44 +1096,44 @@ const ShipPage = () => {
           href="https://airtable.com/shrOOU2ZZFYtffUVz"
           target="_blank"
           sx={{
-            bg: '#ff0000',
-            color: 'rgba(255, 255, 255, 0.7)',
-            textDecoration: 'none',
+            bg: "#ff0000",
+            color: "rgba(255, 255, 255, 0.7)",
+            textDecoration: "none",
             size: 160,
-            flexDirection: 'column',
-            textAlign: 'center',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            flexDirection: "column",
+            textAlign: "center",
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: -80,
-            right: '14vw',
-            fontSize: '24px',
+            right: "14vw",
+            fontSize: "24px",
             lineHeight: 1.2,
-            fontWeight: 'bold',
+            fontWeight: "bold",
             fontFamily: `'${stickerButtonFont}', cursive`,
-            transform: 'rotate(-25deg)',
-            borderRadius: '50%',
+            transform: "rotate(-25deg)",
+            borderRadius: "50%",
             // Terrible buttons styles, doesn't even look good, but didn't want to waste more time:
             backgroundImage:
-              'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)',
+              "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)",
             boxShadow:
-              '0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset',
-            filter: 'drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))',
-            textShadow: '0px 0px 2px rgba(255, 255, 255, 0.45)',
-            WebkitTapHighlightColor: 'transparent',
+              "0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset",
+            filter: "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))",
+            textShadow: "0px 0px 2px rgba(255, 255, 255, 0.45)",
+            WebkitTapHighlightColor: "transparent",
             transition:
-              'box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear',
-            ':active': {
+              "box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear",
+            ":active": {
               backgroundImage:
-                'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)',
+                "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)",
               boxShadow:
-                '0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset',
-              filter: 'drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))',
-              fontSize: '22px'
-            }
+                "0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset",
+              filter: "drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))",
+              fontSize: "22px",
+            },
           }}
         >
-          {stickerButtonText.split(' ').map((line, i) => (
+          {stickerButtonText.split(" ").map((line, i) => (
             <div key={i}>{line}</div>
           ))}
         </Flex>
@@ -1141,7 +1141,7 @@ const ShipPage = () => {
 
       <Footer dark />
     </>
-  )
-}
+  );
+};
 
-export default ShipPage
+export default ShipPage;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/team.js b/pages/team.js
index 2209c007d..1fd379af6 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Bio from '../components/bio'
-import ForceTheme from '../components/force-theme'
+import { Box, Container, Text, Grid, Flex } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Bio from "../components/bio";
+import ForceTheme from "../components/force-theme";
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: '75%'
+              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "75%",
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: '650px' }}
+              sx={{ maxWidth: "650px" }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: 'rgb(51 142 218 / 40%)',
+                bg: "rgb(51 142 218 / 40%)",
                 p: 3,
-                borderRadius: '20px',
+                borderRadius: "20px",
                 mb: 3,
                 gap: 3,
-                flexWrap: ['wrap', null, null, 'nowrap']
+                flexWrap: ["wrap", null, null, "nowrap"],
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: 'center',
+                  textAlign: "center",
                   fontSize: 4,
-                  writingMode: [null, null, null, 'vertical-rl'],
+                  writingMode: [null, null, null, "vertical-rl"],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, 'rotate(180deg)'],
-                  width: ['100%', null, null, 'fit-content'],
+                  transform: [null, null, null, "rotate(180deg)"],
+                  width: ["100%", null, null, "fit-content"],
                   marginBottom: [
-                    '0px!important',
-                    '0px!important',
-                    '0px!important',
-                    3
-                  ]
+                    "0px!important",
+                    "0px!important",
+                    "0px!important",
+                    3,
+                  ],
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(51 214 166 / 40%)',
+                    bg: "rgb(51 214 166 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: 'rgb(255 142 55 / 40%)',
+                    bg: "rgb(255 142 55 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(236 55 80 / 40%)',
+                    bg: "rgb(236 55 80 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: 'rgb(166 51 214 / 40%)',
+                    bg: "rgb(166 51 214 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: '1.2',
+                  lineHeight: "1.2",
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: '600px',
-                  width: '100%',
-                  margin: 'auto'
+                  maxWidth: "600px",
+                  width: "100%",
+                  margin: "auto",
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  )
+  );
 }
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 690b9477e358466c0c645262c0ec7a6a2a312c9b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 003/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From daf9d548dd9cabf1f4601cc5c6e84933fff77ff2 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 004/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 +++++++++++++------
 components/mail-card.js                | 10 ++++---
 public/home/letter-pattern.svg         | 37 ++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 public/home/letter-pattern.svg

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file
diff --git a/public/home/letter-pattern.svg b/public/home/letter-pattern.svg
new file mode 100644
index 000000000..23bda7942
--- /dev/null
+++ b/public/home/letter-pattern.svg
@@ -0,0 +1,37 @@
+<svg width="293" height="6" viewBox="0 0 293 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6L10.9823 0H15.4038L12.4215 6H8Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.421509 6L3.40379 0H7.82527L4.843 6H0.421509Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6L26.9823 0H31.4038L28.4215 6H24Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4215 6L35.4038 0H39.8253L36.843 6H32.4215Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.843 6L43.8253 0H48.2468L45.2645 6H40.843Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5785 6L18.5608 0H22.9823L20 6H15.5785Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2645 6L52.2468 0H56.6683L53.686 6H49.2645Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.686 6L60.6683 0H65.0898L62.1075 6H57.686Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1075 6L69.0898 0H73.5113L70.529 6H66.1075Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5291 6L77.5113 0H81.9328L78.9505 6H74.5291Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9506 6L85.9328 0H90.3543L87.372 6H82.9506Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3721 6L94.3543 0H98.7758L95.7936 6H91.3721Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.7936 6L102.776 0H107.197L104.215 6H99.7936Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.215 6L111.197 0H115.619L112.637 6H108.215Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.637 6L119.619 0H124.04L121.058 6H116.637Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.058 6L128.04 0H132.462L129.48 6H125.058Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M133.48 6L136.462 0H140.883L137.901 6H133.48Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.901 6L144.883 0H149.305L146.323 6H141.901Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.323 6L153.305 0H157.726L154.744 6H150.323Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.744 6L161.726 0H166.148L163.166 6H158.744Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.166 6L170.148 0H174.569L171.587 6H167.166Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.587 6L178.569 0H182.991L180.009 6H175.587Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.009 6L186.991 0H191.412L188.43 6H184.009Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.43 6L195.412 0H199.834L196.852 6H192.43Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200.852 6L203.834 0H208.255L205.273 6H200.852Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.273 6L212.255 0H216.677L213.695 6H209.273Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.695 6L220.677 0H225.098L222.116 6H217.695Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.116 6L229.098 0H233.52L230.538 6H226.116Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.538 6L237.52 0H241.941L238.959 6H234.538Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M242.959 6L245.942 0H250.363L247.381 6H242.959Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.381 6L254.363 0H258.785L255.802 6H251.381Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.802 6L262.785 0H267.206L264.224 6H259.802Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.224 6L271.206 0H275.628L272.645 6H268.224Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.645 6L279.628 0H284.049L281.067 6H276.645Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M285.067 6L288.049 0H292.471L289.488 6H285.067Z" fill="#EC3750"/>
+</svg>

From f7ccb08840122b84d495e32792f35ba301d7615e Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 005/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 4627f29e0e8f0d070b16b36f409d9b4495ca252a Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 006/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        | 171 +--
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  15 +
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/index.js                                | 828 +++++++--------
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/onboard.js                              | 650 ++++++------
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/team.js                                 |  92 +-
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 210 files changed, 8876 insertions(+), 8798 deletions(-)
 create mode 100644 components/mail-card.js

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -9,94 +9,107 @@ import {
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/home/footer.png";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1000px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 4,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +118,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +132,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,28 +148,35 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box>
+            <MailCard/>
+        </Box>
       </Card>
       <BGImg
         gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
@@ -160,7 +185,7 @@ const MailingList = () => {
         alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..8581cbabf
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,15 @@
+import { Card, Text } from "theme-ui";
+
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
+  );
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/index.js b/pages/index.js
index 145861a30..ce3c6f24c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,38 +7,38 @@ import {
   Flex,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import React, { useEffect, useRef, useState } from 'react'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Stage from '../components/stage'
-import Carousel from '../components/index/carousel'
-import Outernet from '../components/index/cards/outernet'
-import Sprig from '../components/index/cards/sprig'
-import Sinerider from '../components/index/cards/sinerider'
-import SprigConsole from '../components/index/cards/sprig-console'
-import Clubs from '../components/index/cards/clubs'
-import Workshops from '../components/index/cards/workshops'
-import HCB from '../components/index/cards/hcb'
-import Hackathons from '../components/index/cards/hackathons'
-import OuternetImgFile from '../public/home/outernet-110.jpg'
-import Announcement from '../components/announcement'
-import Konami from 'react-konami-code'
-import JSConfetti from 'js-confetti'
-import Secret from '../components/secret'
-import MailingList from '../components/index/cards/mailing-list'
-import Slack from '../components/index/cards/slack'
-import Icon from '../components/icon'
-import GitHub from '../components/index/github'
-import Photo from '../components/photo'
-import Comma from '../components/comma'
-import Haxidraw from '../components/index/cards/haxidraw'
+  Text,
+} from "theme-ui";
+import React, { useEffect, useRef, useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Stage from "../components/stage";
+import Carousel from "../components/index/carousel";
+import Outernet from "../components/index/cards/outernet";
+import Sprig from "../components/index/cards/sprig";
+import Sinerider from "../components/index/cards/sinerider";
+import SprigConsole from "../components/index/cards/sprig-console";
+import Clubs from "../components/index/cards/clubs";
+import Workshops from "../components/index/cards/workshops";
+import HCB from "../components/index/cards/hcb";
+import Hackathons from "../components/index/cards/hackathons";
+import OuternetImgFile from "../public/home/outernet-110.jpg";
+import Announcement from "../components/announcement";
+import Konami from "react-konami-code";
+import JSConfetti from "js-confetti";
+import Secret from "../components/secret";
+import MailingList from "../components/index/cards/mailing-list";
+import Slack from "../components/index/cards/slack";
+import Icon from "../components/icon";
+import GitHub from "../components/index/github";
+import Photo from "../components/photo";
+import Comma from "../components/comma";
+import Haxidraw from "../components/index/cards/haxidraw";
 
 /** @jsxImportSource theme-ui */
 
@@ -56,78 +56,78 @@ function Page({
   gameTitle,
   events,
   carouselCards,
-  context
+  context,
 }) {
-  let [gameImage, setGameImage] = useState('')
-  let [gameImage1, setGameImage1] = useState('')
-  let [reveal, setReveal] = useState(false)
-  const [hover, setHover] = useState(true)
-  let [github, setGithub] = useState(0)
-  let [slackKey, setSlackKey] = useState(0)
-  let [key, setKey] = useState(0)
+  let [gameImage, setGameImage] = useState("");
+  let [gameImage1, setGameImage1] = useState("");
+  let [reveal, setReveal] = useState(false);
+  const [hover, setHover] = useState(true);
+  let [github, setGithub] = useState(0);
+  let [slackKey, setSlackKey] = useState(0);
+  let [key, setKey] = useState(0);
 
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
 
-  let jsConfetti = useRef()
+  let jsConfetti = useRef();
 
   useEffect(() => {
-    jsConfetti.current = new JSConfetti()
+    jsConfetti.current = new JSConfetti();
 
-    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
-    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
-  }, [])
+    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`;
+    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `;
+  }, []);
 
   const easterEgg = () => {
-    alert('Hey, you typed the Konami Code!')
+    alert("Hey, you typed the Konami Code!");
 
     jsConfetti.current.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  };
 
   useEffect(() => {
     if (reveal && !hover) {
       setTimeout(() => {
-        setReveal(false)
-      }, 2000)
+        setReveal(false);
+      }, 2000);
     }
-  }, [reveal, hover])
+  }, [reveal, hover]);
 
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let images = [
-    { alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
+    { alt: "Map of Hack Clubs around the world", src: "/home/map.png" },
     {
-      alt: 'Hack Clubbers at SpaceX HQ in LA',
-      src: '/home/zephyr-spacex.jpeg'
+      alt: "Hack Clubbers at SpaceX HQ in LA",
+      src: "/home/zephyr-spacex.jpeg",
     },
     {
-      alt: 'MA Hacks, Hack Clubber organized hackathon',
-      src: '/hackathons/mahacks.jpeg'
+      alt: "MA Hacks, Hack Clubber organized hackathon",
+      src: "/hackathons/mahacks.jpeg",
     },
-    { alt: 'AMA with Sal Khan', src: '/home/ama.png' },
-    { alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
-  ]
+    { alt: "AMA with Sal Khan", src: "/home/ama.png" },
+    { alt: "Hack Clubbers at Flagship, 2019", src: "/home/flagship_4.jpg" },
+  ];
 
   // janky right now and does not show last image
 
   useEffect(() => {
     console.log(
-      `White sheets of paper\nWaiting to be printed on\nA blank console waits`
-    )
+      `White sheets of paper\nWaiting to be printed on\nA blank console waits`,
+    );
     if (count === images.length - 1) {
-      setCount(0)
+      setCount(0);
     }
-  }, [count, images.length])
+  }, [count, images.length]);
 
   return (
     <>
@@ -149,17 +149,17 @@ function Page({
       <Box
         as="main"
         sx={{
-          overflowX: 'hidden',
-          position: 'relative'
+          overflowX: "hidden",
+          position: "relative",
         }}
       >
         <Secret
           reveal={reveal}
           onMouseEnter={() => {
-            setHover(true)
+            setHover(true);
           }}
           onMouseOut={() => {
-            setHover(false)
+            setHover(false);
           }}
         />
         <Konami action={easterEgg}>
@@ -169,12 +169,12 @@ function Page({
         <Box
           as="header"
           sx={{
-            bg: 'dark',
+            bg: "dark",
             pt: [5, 6],
             pb: [2, 3],
-            textAlign: 'left',
-            position: 'relative',
-            overflowX: 'hidden'
+            textAlign: "left",
+            position: "relative",
+            overflowX: "hidden",
           }}
         >
           <BGImg
@@ -192,21 +192,21 @@ function Page({
           />
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: [null, 'layout'],
-              position: 'relative',
-              mx: 'auto',
+              width: "90vw",
+              maxWidth: [null, "layout"],
+              position: "relative",
+              mx: "auto",
               py: [4, 4, 4],
-              textShadow: 'text'
+              textShadow: "text",
             }}
           >
             <Text
               variant="eyebrow"
               sx={{
-                color: 'sunken',
+                color: "sunken",
                 pb: 2,
-                position: 'relative',
-                display: 'block'
+                position: "relative",
+                display: "block",
               }}
               as="h4"
             >
@@ -217,42 +217,42 @@ function Page({
                 as="h1"
                 variant="title"
                 sx={{
-                  color: 'white',
+                  color: "white",
                   mb: [3, 4],
                   zIndex: 1,
-                  textAlign: 'left',
-                  fontSize: ['42px', '52px', '64px'],
+                  textAlign: "left",
+                  fontSize: ["42px", "52px", "64px"],
                   lineHeight: 1.2,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
-                We are <Comma>{slackData.total_members_count}</Comma>{' '}
+                We are <Comma>{slackData.total_members_count}</Comma>{" "}
                 <Text
                   sx={{
-                    color: 'transparent',
+                    color: "transparent",
                     ml: 2,
                     mr: 3,
-                    whiteSpace: 'nowrap'
+                    whiteSpace: "nowrap",
                   }}
                 >
                   <Text
                     onClick={() => {
-                      setHover(false)
-                      !reveal ? setReveal(true) : setReveal(false)
+                      setHover(false);
+                      !reveal ? setReveal(true) : setReveal(false);
                     }}
                     sx={{
                       // lineHeight: 0.875,
                       px: 2,
-                      backgroundColor: 'red',
-                      position: 'absolute',
+                      backgroundColor: "red",
+                      position: "absolute",
                       borderRadius: 10,
-                      transform: 'rotate(-3deg) translateY(-5px)',
-                      color: 'white',
-                      whiteSpace: 'nowrap',
-                      textDecoration: 'none',
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      transform: "rotate(-3deg) translateY(-5px)",
+                      color: "white",
+                      whiteSpace: "nowrap",
+                      textDecoration: "none",
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                     aria-hidden="true"
                   >
@@ -260,7 +260,7 @@ function Page({
                   </Text>
                   teen hackers
                 </Text>
-                <br sx={{ display: ['inline', 'none', 'none'] }} /> from around
+                <br sx={{ display: ["inline", "none", "none"] }} /> from around
                 the world who code together
               </Text>
               <Button
@@ -268,7 +268,7 @@ function Page({
                 as="a"
                 href="/slack"
                 mt={[3, 0, 0]}
-                sx={{ transformOrigin: 'center left' }}
+                sx={{ transformOrigin: "center left" }}
               >
                 Join our community
               </Button>
@@ -276,10 +276,10 @@ function Page({
           </Box>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: ['flex-start', 'flex-start', 'flex-end'],
+              display: "flex",
+              justifyContent: ["flex-start", "flex-start", "flex-end"],
               marginRight: 2,
-              mt: [4, 3, 1]
+              mt: [4, 3, 1],
             }}
           >
             <Badge
@@ -289,14 +289,14 @@ function Page({
               rel="noopener"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'black',
-                color: 'white',
+                zIndex: "1",
+                bg: "black",
+                color: "white",
                 opacity: 1,
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                ':hover': { opacity: 1 },
-                transition: '0.3s ease'
+                textDecoration: "none",
+                fontWeight: "normal",
+                ":hover": { opacity: 1 },
+                transition: "0.3s ease",
                 // mixBlendMode: 'multiply'
               }}
               title="📸 Photo by Matt Gleich, Hack Clubber in NH!"
@@ -305,32 +305,32 @@ function Page({
             </Badge>
           </Box>
         </Box>
-        <Box as="section" sx={{ py: [4, 5, '82px'], color: 'black' }}>
+        <Box as="section" sx={{ py: [4, 5, "82px"], color: "black" }}>
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Text
               variant="title"
               as="h1"
-              sx={{ fontSize: ['36px', '48px', '56px'] }}
+              sx={{ fontSize: ["36px", "48px", "56px"] }}
             >
-              Discover the{' '}
+              Discover the{" "}
               <Text
                 as="span"
                 sx={{
-                  borderRadius: 'default',
+                  borderRadius: "default",
                   px: 1,
                   mx: 0,
-                  whiteSpace: ['wrap', 'nowrap', 'nowrap'],
-                  color: 'white',
-                  background: theme => theme.util.gx('red', 'orange'),
-                  '-webkit-background-clip': 'text',
-                  '-webkit-text-fill-color': 'transparent'
+                  whiteSpace: ["wrap", "nowrap", "nowrap"],
+                  color: "white",
+                  background: (theme) => theme.util.gx("red", "orange"),
+                  "-webkit-background-clip": "text",
+                  "-webkit-text-fill-color": "transparent",
                 }}
               >
                 joy of code
@@ -341,50 +341,50 @@ function Page({
               variant="subtitle"
               as="p"
               sx={{
-                fontSize: ['18px', '20px', '22px'],
+                fontSize: ["18px", "20px", "22px"],
                 pb: [3, 3, 4],
-                maxWidth: '62ch'
+                maxWidth: "62ch",
               }}
             >
               Every day, thousands of Hack&nbsp;Clubbers gather online and
               in-person to make things with code. Whether you’re a beginner
               programmer or have years of experience, there’s a place for you at
-              Hack&nbsp;Club. Read about our{' '}
+              Hack&nbsp;Club. Read about our{" "}
               <Link href="/philosophy" target="_blank" rel="noopener">
                 hacker ethic
               </Link>
               .
             </Text>
-            <Grid columns={[1, 1, 1, '2.5fr 3fr']} gap={[0, 3, 4]} pt={[3, 4]}>
+            <Grid columns={[1, 1, 1, "2.5fr 3fr"]} gap={[0, 3, 4]} pt={[3, 4]}>
               <Box
                 sx={{
-                  position: 'relative',
-                  height: ['300px', '300px', '300px', '100%'],
-                  py: [3, 3, 3, 0]
+                  position: "relative",
+                  height: ["300px", "300px", "300px", "100%"],
+                  py: [3, 3, 3, 0],
                 }}
                 onClick={() => {
-                  setCount(count + 1)
+                  setCount(count + 1);
                 }}
               >
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -409,24 +409,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(-3deg)' : 'rotate(3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(-3deg)" : "rotate(3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -447,24 +447,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
+                  sx={{ position: "absolute", width: "100%", height: "100%" }}
                 >
                   <Box
                     sx={{
-                      position: 'relative',
-                      height: ['300px', '300px', '100%'],
+                      position: "relative",
+                      height: ["300px", "300px", "100%"],
                       figure: {
-                        position: 'absolute',
+                        position: "absolute",
                         transform:
-                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
-                        height: '85%',
-                        width: ['80%', '80%', '70%', '100%'],
-                        marginLeft: ['10%', '10%', '15%', '0']
+                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
+                        height: "85%",
+                        width: ["80%", "80%", "70%", "100%"],
+                        marginLeft: ["10%", "10%", "15%", "0"],
                       },
                       zIndex: 3,
-                      '&:hover': {
-                        cursor: 'pointer'
-                      }
+                      "&:hover": {
+                        cursor: "pointer",
+                      },
                     }}
                   >
                     <Photo
@@ -485,28 +485,28 @@ function Page({
                     width: 36,
                     height: 36,
                     borderRadius: 24,
-                    display: 'inline-block',
+                    display: "inline-block",
                     fontSize: 2,
-                    lineHeight: '30px',
-                    textAlign: 'center',
-                    fontWeight: 'bold',
-                    border: '3px solid currentColor'
+                    lineHeight: "30px",
+                    textAlign: "center",
+                    fontWeight: "bold",
+                    border: "3px solid currentColor",
                   },
-                  p: { my: 0, fontSize: ['18px', '20px', '22px'] },
-                  strong: { display: 'block', fontSize: ['22px', 2, 3] }
+                  p: { my: 0, fontSize: ["18px", "20px", "22px"] },
+                  strong: { display: "block", fontSize: ["22px", 2, 3] },
                 }}
                 as="ul"
               >
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -518,9 +518,9 @@ function Page({
                       Connect with other teenage coders
                     </strong>
                     Have a coding question? Looking for project feedback? You’ll
-                    find hundreds of fabulous people to talk to in our global{' '}
+                    find hundreds of fabulous people to talk to in our global{" "}
                     <Link href="/slack" target="_blank" rel="noopener">
-                      Slack{' '}
+                      Slack{" "}
                     </Link>
                     (like Discord), active at all hours.
                   </Text>
@@ -528,13 +528,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -545,7 +545,7 @@ function Page({
                     as="p"
                     variant="subtitle"
                     sx={{
-                      mt: 0
+                      mt: 0,
                     }}
                   >
                     <strong sx={{ mb: 1 }}>
@@ -562,13 +562,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: '0.52s',
+                    transitionDuration: "0.52s",
                     py: 2,
                     px: 2,
-                    color: 'inherit',
-                    position: 'relative',
-                    textDecoration: 'none',
-                    borderRadius: 'extra'
+                    color: "inherit",
+                    position: "relative",
+                    textDecoration: "none",
+                    borderRadius: "extra",
                   }}
                   as="li"
                 >
@@ -578,11 +578,11 @@ function Page({
                   <Text as="p" variant="subtitle">
                     <strong sx={{ mb: 1 }}>Gather IRL with other makers</strong>
                     Meet other Hack&nbsp;Clubbers in your community to build
-                    together at one of the 400+{' '}
+                    together at one of the 400+{" "}
                     <Link href="/clubs" target="_blank" rel="noopener">
                       Hack&nbsp;Clubs
-                    </Link>{' '}
-                    and{' '}
+                    </Link>{" "}
+                    and{" "}
                     <Link href="/hackathons" target="_blank" rel="noopener">
                       high school hackathons
                     </Link>
@@ -597,44 +597,44 @@ function Page({
         <Box
           as="section"
           sx={{
-            background: 'snow',
+            background: "snow",
             backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-            backgroundSize: '40px 40px',
-            backgroundRepeat: 'repeat',
-            backgroundPosition: '10% 10%'
+            backgroundSize: "40px 40px",
+            backgroundRepeat: "repeat",
+            backgroundPosition: "10% 10%",
           }}
         >
           <Box
             sx={{
-              position: 'relative',
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              position: "relative",
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
             py={[4, 4, 5]}
           >
             <Box>
-              <Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
-                Connect with{' '}
+              <Text variant="title" sx={{ fontSize: ["36px", 4, 5] }}>
+                Connect with{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     px: 2,
                     mx: 0,
-                    whiteSpace: 'nowrap',
-                    color: 'white',
-                    bg: 'red'
+                    whiteSpace: "nowrap",
+                    color: "white",
+                    bg: "red",
                   }}
                 >
                   builders
-                </Text>{' '}
+                </Text>{" "}
                 from around the world
               </Text>
               <Text
                 variant="subtitle"
                 as="p"
-                sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
+                sx={{ fontSize: ["18px", "20px", "22px"], pb: [3, 0, 0] }}
               >
                 We gather both online and in-person to share our love of code
                 and make things together!
@@ -645,26 +645,26 @@ function Page({
           </Box>
         </Box>
         <Box>
-          <Box py={[4, 5, '82px']}>
+          <Box py={[4, 5, "82px"]}>
             <Box
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['column', 'column', 'column', 'row'],
-                  justifyContent: gitHubData ? 'center' : 'flex-start',
+                  flexDirection: ["column", "column", "column", "row"],
+                  justifyContent: gitHubData ? "center" : "flex-start",
                   alignItems: [
-                    'flex-start',
-                    'flex-start',
-                    'flex-start',
-                    'center'
+                    "flex-start",
+                    "flex-start",
+                    "flex-start",
+                    "center",
                   ],
-                  gap: '10px'
+                  gap: "10px",
                 }}
               >
                 <Box sx={{ mb: [3, 0, 0] }}>
@@ -672,31 +672,31 @@ function Page({
                     variant="title"
                     as="h2"
                     sx={{
-                      fontSize: ['36px', '48px', '56px'],
-                      maxWidth: '20ch'
+                      fontSize: ["36px", "48px", "56px"],
+                      maxWidth: "20ch",
                     }}
                   >
-                    We build{' '}
+                    We build{" "}
                     <Text
                       as="span"
                       sx={{
-                        borderRadius: 'default',
+                        borderRadius: "default",
                         mx: 0,
-                        whiteSpace: 'nowrap',
-                        color: 'orange'
+                        whiteSpace: "nowrap",
+                        color: "orange",
                       }}
                     >
                       open source
-                    </Text>{' '}
+                    </Text>{" "}
                     games and tools together
                   </Text>
                   <Text
                     variant="subtitle"
                     as="p"
                     sx={{
-                      fontSize: ['18px', '20px', '22px'],
+                      fontSize: ["18px", "20px", "22px"],
                       pb: [3, 0, 0],
-                      maxWidth: '60ch'
+                      maxWidth: "60ch",
                     }}
                   >
                     In collaboration with engineers on the Hack&nbsp;Club team,
@@ -708,30 +708,30 @@ function Page({
                 {gitHubData && (
                   <Flex
                     sx={{
-                      flexDirection: ['row', null, null, 'column'],
+                      flexDirection: ["row", null, null, "column"],
                       gap: [1, 2, 2],
-                      alignItems: ['center', 'center', 'center', 'flex-start'],
-                      flexWrap: 'wrap',
-                      width: ['100%', null, null, 'fit-content'],
+                      alignItems: ["center", "center", "center", "flex-start"],
+                      flexWrap: "wrap",
+                      width: ["100%", null, null, "fit-content"],
 
-                      '& > a:nth-child(n+4)': {
-                        display: ['none', null, null, 'flex']
-                      }
+                      "& > a:nth-child(n+4)": {
+                        display: ["none", null, null, "flex"],
+                      },
                     }}
                   >
                     <Text
                       sx={{
-                        fontSize: ['11px', '11px', '14px'],
-                        textAlign: 'left',
-                        lineHeight: '90%',
-                        fontStyle: 'italic',
-                        width: 'fit-content'
+                        fontSize: ["11px", "11px", "14px"],
+                        textAlign: "left",
+                        lineHeight: "90%",
+                        fontStyle: "italic",
+                        width: "fit-content",
                       }}
                     >
                       Live from GitHub
                     </Text>
                     {gitHubData
-                      .filter(data => !data.user.endsWith('[bot]'))
+                      .filter((data) => !data.user.endsWith("[bot]"))
                       .slice(0, 4)
                       .map((data, key) => {
                         return (
@@ -744,7 +744,7 @@ function Page({
                             message={data.message}
                             key={key}
                           />
-                        )
+                        );
                       })}
                   </Flex>
                 )}
@@ -770,12 +770,12 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'relative',
-              background: 'snow',
+              position: "relative",
+              background: "snow",
               backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-              backgroundSize: '40px 40px',
-              backgroundRepeat: 'repeat',
-              backgroundPosition: '10% 10%'
+              backgroundSize: "40px 40px",
+              backgroundRepeat: "repeat",
+              backgroundPosition: "10% 10%",
               // '&:hover': {
               //   backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
               // }
@@ -783,22 +783,22 @@ function Page({
           >
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
+                position: "absolute",
+                width: "100%",
+                height: "100%",
                 top: 0,
-                left: 0
+                left: 0,
               }}
             >
               {}
             </Box>
             <Box
-              py={[4, 5, '82px']}
+              py={[4, 5, "82px"]}
               sx={{
-                width: '90vw',
-                maxWidth: 'layout',
-                margin: 'auto',
-                position: 'relative'
+                width: "90vw",
+                maxWidth: "layout",
+                margin: "auto",
+                position: "relative",
               }}
             >
               <Box>
@@ -806,20 +806,20 @@ function Page({
                   variant="title"
                   as="h2"
                   sx={{
-                    fontSize: ['36px', '48px', '72px'],
-                    width: '18ch',
-                    textAlign: 'center',
-                    margin: 'auto'
+                    fontSize: ["36px", "48px", "72px"],
+                    width: "18ch",
+                    textAlign: "center",
+                    margin: "auto",
                   }}
                 >
-                  Find your{' '}
+                  Find your{" "}
                   <Text
                     as="span"
                     sx={{
-                      borderRadius: 'default',
+                      borderRadius: "default",
                       mx: 0,
-                      whiteSpace: 'nowrap',
-                      color: 'orange'
+                      whiteSpace: "nowrap",
+                      color: "orange",
                     }}
                   >
                     IRL community.
@@ -829,10 +829,10 @@ function Page({
                   variant="subtitle"
                   as="p"
                   sx={{
-                    fontSize: ['18px', '24px', '32px'],
-                    margin: 'auto',
+                    fontSize: ["18px", "24px", "32px"],
+                    margin: "auto",
                     pt: 2,
-                    textAlign: 'center'
+                    textAlign: "center",
                   }}
                 >
                   Thousands of Hack Clubbers organize and participate in
@@ -851,19 +851,19 @@ function Page({
             </Box>
           </Box>
         </Box>
-        <Box py={[4, 5, '82px']}>
+        <Box py={[4, 5, "82px"]}>
           <Box
             sx={{
-              width: '90vw',
-              maxWidth: 'layout',
-              margin: 'auto'
+              width: "90vw",
+              maxWidth: "layout",
+              margin: "auto",
             }}
           >
             <Box>
               <Text
                 as="p"
                 variant="eyebrow"
-                sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}
+                sx={{ fontSize: ["22px", 2, 3], textAlign: "center" }}
               >
                 We've got a lot going on - Let’s recap
               </Text>
@@ -871,22 +871,22 @@ function Page({
                 variant="title"
                 as="h2"
                 sx={{
-                  fontSize: ['36px', '48px', '72px'],
-                  width: '16ch',
-                  textAlign: 'center',
-                  margin: 'auto'
+                  fontSize: ["36px", "48px", "72px"],
+                  width: "16ch",
+                  textAlign: "center",
+                  margin: "auto",
                 }}
               >
-                Find your second home at{' '}
+                Find your second home at{" "}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: 'default',
+                    borderRadius: "default",
                     ml: 0,
-                    whiteSpace: ['wrap', 'nowrap'],
-                    background: theme => theme.util.gx('red', 'orange'),
-                    '-webkit-background-clip': 'text',
-                    '-webkit-text-fill-color': 'transparent'
+                    whiteSpace: ["wrap", "nowrap"],
+                    background: (theme) => theme.util.gx("red", "orange"),
+                    "-webkit-background-clip": "text",
+                    "-webkit-text-fill-color": "transparent",
                   }}
                 >
                   Hack&nbsp;Club
@@ -899,17 +899,17 @@ function Page({
               gap={3}
               columns={[1, 2, 3]}
               sx={{
-                textAlign: 'left',
-                '> a, > div': {
-                  borderRadius: 'extra',
-                  boxShadow: 'elevated',
-                  p: [3, null, 4]
+                textAlign: "left",
+                "> a, > div": {
+                  borderRadius: "extra",
+                  boxShadow: "elevated",
+                  p: [3, null, 4],
                 },
                 span: {
                   boxShadow:
-                    '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                    "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
                 },
-                svg: { fill: 'currentColor' }
+                svg: { fill: "currentColor" },
               }}
             >
               <Card
@@ -920,20 +920,20 @@ function Page({
                 variant="interactive"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(51, 142, 218)' },
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(51, 142, 218)" },
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
               >
                 <Icon
@@ -941,13 +941,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -957,32 +957,32 @@ function Page({
                   desc="Connect with other technical teenagers on Slack and hack on things together."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-                  color: 'white',
-                  svg: { color: '#fb558e' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+                  color: "white",
+                  svg: { color: "#fb558e" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="https://github.com/hackclub"
@@ -995,13 +995,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: [1, '16px', '20px'],
+                    fontSize: [1, "16px", "20px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1011,32 +1011,32 @@ function Page({
                   desc="We’re currently building a game engine, daily streak system, graphing game, and more!"
                   sx={{
                     p: {
-                      fontSize: [1, '16px', '20px']
+                      fontSize: [1, "16px", "20px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-                  color: 'white',
-                  svg: { color: 'rgb(236, 55, 80)' },
-                  textDecoration: 'none',
-                  position: 'relative',
-                  '.icon': {
+                    "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+                  color: "white",
+                  svg: { color: "rgb(236, 55, 80)" },
+                  textDecoration: "none",
+                  position: "relative",
+                  ".icon": {
                     transition:
-                      'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+                      "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+                  },
+                  ":hover,:focus": {
+                    ".icon": {
+                      transform: "translateX(28px) translateY(-28px)",
+                      opacity: 0,
+                    },
                   },
-                  ':hover,:focus': {
-                    '.icon': {
-                      transform: 'translateX(28px) translateY(-28px)',
-                      opacity: 0
-                    }
-                  }
                 }}
                 as="a"
                 href="/clubs"
@@ -1049,13 +1049,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ['18px', '20px', '22px'],
+                    fontSize: ["18px", "20px", "22px"],
                     zIndex: 3,
-                    color: 'white !important'
+                    color: "white !important",
                   }}
                 />
                 <Stage
@@ -1065,11 +1065,11 @@ function Page({
                   desc="Build an in-person community of high school hackers, and we’re here to help."
                   sx={{
                     p: {
-                      fontSize: ['18px', '20px', '22px']
+                      fontSize: ["18px", "20px", "22px"],
                     },
                     h3: {
-                      fontSize: ['22px', 2, 3]
-                    }
+                      fontSize: ["22px", 2, 3],
+                    },
                   }}
                 />
               </Card>
@@ -1077,23 +1077,23 @@ function Page({
           </Box>
         </Box>
       </Box>
-      {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
-        'z' && (
+      {new URL(asPath, "http://example.com").searchParams.get("gen") ===
+        "z" && (
         <>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               top: 0,
-              width: '100%',
-              zIndex: 1000
+              width: "100%",
+              zIndex: 1000,
             }}
           >
             <Box
               sx={{
-                position: 'relative',
-                margin: 'auto',
-                width: 'fit-content',
-                lineHeight: 0
+                position: "relative",
+                margin: "auto",
+                width: "fit-content",
+                lineHeight: 0,
               }}
             >
               <iframe
@@ -1109,11 +1109,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               right: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1128,11 +1128,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: 'fixed',
+              position: "fixed",
               bottom: 0,
               left: 0,
               zIndex: 1000,
-              lineHeight: 0
+              lineHeight: 0,
             }}
           >
             <iframe
@@ -1151,16 +1151,16 @@ function Page({
       <Footer
         dark
         sx={{
-          backgroundColor: 'dark',
-          position: 'relative',
-          overflow: 'hidden',
-          textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-          'h2,span,p,a': { color: 'white !important' },
-          '> div img': { objectPosition: ['left', 'center'] },
+          backgroundColor: "dark",
+          position: "relative",
+          overflow: "hidden",
+          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+          "h2,span,p,a": { color: "white !important" },
+          "> div img": { objectPosition: ["left", "center"] },
           svg: {
-            fill: 'white',
-            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-          }
+            fill: "white",
+            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+          },
         }}
       >
         <style>
@@ -1170,73 +1170,73 @@ function Page({
         </style>
       </Footer>
     </>
-  )
+  );
 }
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 export async function getStaticProps() {
-  const carouselCards = require('../lib/carousel.json')
+  const carouselCards = require("../lib/carousel.json");
 
   // HCB: get total raised
-  let bankData = []
-  let initialBankData = await fetch('https://hcb.hackclub.com/stats').then(r =>
-    r.json()
-  )
-  let raised = initialBankData.raised / 100
+  let bankData = [];
+  let initialBankData = await fetch("https://hcb.hackclub.com/stats").then(
+    (r) => r.json(),
+  );
+  let raised = initialBankData.raised / 100;
 
   bankData.push(
-    `💰 ${raised.toLocaleString('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    })} raised`
-  )
+    `💰 ${raised.toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+    })} raised`,
+  );
 
   // Slack: get total raised
-  const { Slack: Slacky } = require('./api/slack')
-  let slackData = await Slacky()
+  const { Slack: Slacky } = require("./api/slack");
+  let slackData = await Slacky();
 
   // GitHub: get latest github activity (currently this is erroring and
   // preventing the site from deploying
 
-  const { fetchGitHub } = require('./api/github')
-  let gitHubData = await fetchGitHub()
+  const { fetchGitHub } = require("./api/github");
+  let gitHubData = await fetchGitHub();
 
   //   let gitHubData = null
 
   // GitHub: get latest GitHub stars
-  const { fetchStars } = require('./api/stars')
-  let stars = await fetchStars()
+  const { fetchStars } = require("./api/stars");
+  let stars = await fetchStars();
 
   // Sprig: get newest games
-  const { getGames } = require('./api/games')
-  let game = await getGames()
+  const { getGames } = require("./api/games");
+  let game = await getGames();
 
-  let gameTitle = []
+  let gameTitle = [];
 
-  gameTitle = game.map(r => r.title)
+  gameTitle = game.map((r) => r.title);
 
   // Sprig: get console count
-  const { getConsoles } = require('./api/sprig-console')
-  const consoleCount = await getConsoles()
+  const { getConsoles } = require("./api/sprig-console");
+  const consoleCount = await getConsoles();
 
   // Hackathons: get latest hackathons
-  let hackathonsData
+  let hackathonsData;
   try {
     const response = await fetch(
-      'https://hackathons.hackclub.com/api/events/upcoming'
-    )
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (response.ok) {
-      hackathonsData = await response.json()
+      hackathonsData = await response.json();
     } else {
-      hackathonsData = [] // or some default value if the fetch fails
+      hackathonsData = []; // or some default value if the fetch fails
     }
   } catch (error) {
-    hackathonsData = [] // or some default value if an error occurs
+    hackathonsData = []; // or some default value if an error occurs
   }
 
   let events = await fetch(
-    'https://events.hackclub.com/api/events/upcoming/'
-  ).then(res => res.json())
+    "https://events.hackclub.com/api/events/upcoming/",
+  ).then((res) => res.json());
 
   return {
     props: {
@@ -1249,10 +1249,10 @@ export async function getStaticProps() {
       slackData,
       stars,
       events,
-      carouselCards
+      carouselCards,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
 
-export default Page
+export default Page;
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/onboard.js b/pages/onboard.js
index 9ef14650d..0a1085408 100644
--- a/pages/onboard.js
+++ b/pages/onboard.js
@@ -1,35 +1,35 @@
-import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from 'theme-ui'
-import Balancer from 'react-wrap-balancer'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import Sparkles from '../components/sparkles'
-import Tilt from '../components/tilt'
-import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
-import { useRef, useEffect, useState } from 'react'
+import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from "theme-ui";
+import Balancer from "react-wrap-balancer";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import Sparkles from "../components/sparkles";
+import Tilt from "../components/tilt";
+import usePrefersReducedMotion from "../lib/use-prefers-reduced-motion";
+import { useRef, useEffect, useState } from "react";
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
  */
 const traceSx = {
   width: 6,
-  bg: '#e2b747',
-  alignSelf: 'stretch',
+  bg: "#e2b747",
+  alignSelf: "stretch",
   mr: 100,
-  position: 'relative'
-}
+  position: "relative",
+};
 
-const dimBg = '#151515'
+const dimBg = "#151515";
 
 // Beloved classic utility function :3
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 // "LET'S RECAP" pixel art (exported from Piskel)
 // Original: https://doggo.ninja/fiK0nk.piskel
-const recapWidth = 71
-const recapHeight = 10
+const recapWidth = 71;
+const recapHeight = 10;
 const recapPixels = [
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
   0x00000000, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff,
@@ -149,140 +149,140 @@ const recapPixels = [
   0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0x00000000, 0xffffffff,
   0xffffffff, 0x00000000, 0x00000000, 0xffffffff, 0xffffffff, 0x00000000,
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
-  0xffffffff, 0xffffffff
-]
+  0xffffffff, 0xffffffff,
+];
 
-const slackLink = '/slack/?event=onboard'
+const slackLink = "/slack/?event=onboard";
 
-const stickerButtonText = 'Click 4 Stickers'
-const stickerButtonFont = 'Oleo Script'
+const stickerButtonText = "Click 4 Stickers";
+const stickerButtonFont = "Oleo Script";
 const stickerButtonFontStylesheet = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-  stickerButtonFont
-)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`
+  stickerButtonFont,
+)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`;
 
 const wandImgTraced =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png";
 const wandImgRendered =
-  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png'
+  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png";
 
 const ShipPage = () => {
-  const prefersReducedMotion = usePrefersReducedMotion()
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   // Wand flicker animation
-  const [wandImg, setWandImg] = useState(wandImgTraced)
-  const wandAnimated = useRef(false)
+  const [wandImg, setWandImg] = useState(wandImgTraced);
+  const wandAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const flicker = async () => {
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(Math.random() * 80 + 10)
-      if (canceled) return
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, Math.random() * 4000 + 500)
-    }
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(Math.random() * 80 + 10);
+      if (canceled) return;
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, Math.random() * 4000 + 500);
+    };
 
     const animate = async () => {
-      if (wandAnimated.current) return
-      wandAnimated.current = true
-
-      await sleep(1500)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(60)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(340)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(14)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(55)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      await sleep(10)
-      if (canceled) return
-      setWandImg(wandImgTraced)
-      await sleep(150)
-      if (canceled) return
-
-      setWandImg(wandImgRendered)
-      setTimeout(flicker, 1200)
-    }
+      if (wandAnimated.current) return;
+      wandAnimated.current = true;
+
+      await sleep(1500);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(60);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(340);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(14);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(55);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      await sleep(10);
+      if (canceled) return;
+      setWandImg(wandImgTraced);
+      await sleep(150);
+      if (canceled) return;
+
+      setWandImg(wandImgRendered);
+      setTimeout(flicker, 1200);
+    };
 
     if (prefersReducedMotion) {
-      setWandImg(wandImgRendered)
+      setWandImg(wandImgRendered);
     } else {
-      animate()
+      animate();
     }
 
-    return () => (canceled = true)
-  }, [prefersReducedMotion])
+    return () => (canceled = true);
+  }, [prefersReducedMotion]);
 
   // Spotlight effect
-  const spotlightRef = useRef()
+  const spotlightRef = useRef();
   useEffect(() => {
-    const handler = event => {
+    const handler = (event) => {
       spotlightRef.current.style.background = `radial-gradient(
 				circle at ${event.pageX}px ${event.pageY}px,
 				rgba(0, 0, 0, 0) 10px,
 				rgba(0, 0, 0, 0.8) 80px
-			)`
-    }
-    window.addEventListener('mousemove', handler)
-    return () => window.removeEventListener('mousemove', handler)
-  }, [])
+			)`;
+    };
+    window.addEventListener("mousemove", handler);
+    return () => window.removeEventListener("mousemove", handler);
+  }, []);
 
   // Calculating the bus height to match the bottom left of the first connector.
-  const [busHeight, setBusHeight] = useState(null)
-  const containerRef = useRef() // For ResizeObserver
-  const connectorRef = useRef() // To get bottom left position
-  const busRef = useRef() // To calculate height differential
+  const [busHeight, setBusHeight] = useState(null);
+  const containerRef = useRef(); // For ResizeObserver
+  const connectorRef = useRef(); // To get bottom left position
+  const busRef = useRef(); // To calculate height differential
 
   useEffect(() => {
     const observer = new ResizeObserver(() => {
-      const connectorRect = connectorRef.current.getBoundingClientRect()
-      const busRect = busRef.current.getBoundingClientRect()
-      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5)
-    })
+      const connectorRect = connectorRef.current.getBoundingClientRect();
+      const busRect = busRef.current.getBoundingClientRect();
+      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5);
+    });
 
-    observer.observe(containerRef.current)
-    return () => observer.disconnect()
-  }, [])
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   // Fancy lights animation
-  const lightsScrollTrigger = useRef()
-  const lightsAnimated = useRef(false)
+  const lightsScrollTrigger = useRef();
+  const lightsAnimated = useRef(false);
   useEffect(() => {
-    let canceled = false
+    let canceled = false;
 
     const setAtIndex = (i, color) => {
-      if (canceled) return
+      if (canceled) return;
 
       // Going outside of React for performance
-      const el = document.getElementById(`pixel-${i}`)
-      if (!el) return
+      const el = document.getElementById(`pixel-${i}`);
+      if (!el) return;
 
       if (recapPixels[i]) {
-        el.style.background = color
-        el.style.boxShadow = `0 0 10px ${color}`
+        el.style.background = color;
+        el.style.boxShadow = `0 0 10px ${color}`;
       } else {
-        el.style.background = dimBg
-        el.style.boxShadow = 'none'
+        el.style.background = dimBg;
+        el.style.boxShadow = "none";
       }
-    }
-    const setAll = color => {
-      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color)
-    }
+    };
+    const setAll = (color) => {
+      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color);
+    };
 
     const animate = async () => {
-      if (lightsAnimated.current) return
-      lightsAnimated.current = true
+      if (lightsAnimated.current) return;
+      lightsAnimated.current = true;
 
       // Illuminate lights in diagonal lines starting with only top left.
       for (
@@ -295,66 +295,66 @@ const ShipPage = () => {
           offset >= Math.max(0, curColumn - recapHeight);
           offset--
         ) {
-          const i = curColumn * recapWidth + offset - offset * recapWidth
-          setAtIndex(i, '#ffffff')
-          if (!recapPixels[i]) await sleep(4)
-          if (canceled) return
+          const i = curColumn * recapWidth + offset - offset * recapWidth;
+          setAtIndex(i, "#ffffff");
+          if (!recapPixels[i]) await sleep(4);
+          if (canceled) return;
         }
         // await sleep(2); if (canceled) return
       }
 
       // Flash the lights twice
-      await sleep(600)
-      if (canceled) return
+      await sleep(600);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(80)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(80);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(20)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(20);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(30)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(30);
+      if (canceled) return;
 
-      setAll('#aaaaaa')
-      await sleep(100)
-      if (canceled) return
+      setAll("#aaaaaa");
+      await sleep(100);
+      if (canceled) return;
 
-      setAll(dimBg)
-      await sleep(200)
-      if (canceled) return
+      setAll(dimBg);
+      await sleep(200);
+      if (canceled) return;
 
       // Animate rainbow 2-column increments
       for (let x = 0; x < recapWidth; x++) {
-        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`
+        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`;
         for (let y = 0; y < recapHeight; y++) {
-          const i = y * recapWidth + x
-          setAtIndex(i, color)
+          const i = y * recapWidth + x;
+          setAtIndex(i, color);
         }
-        if (x % 2 === 1) await sleep(35)
+        if (x % 2 === 1) await sleep(35);
       }
-    }
+    };
 
     if (prefersReducedMotion) {
-      if (!lightsAnimated.current) setAll('#ffffff')
-      return () => (canceled = true)
+      if (!lightsAnimated.current) setAll("#ffffff");
+      return () => (canceled = true);
     } else {
       const observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting) animate()
+          if (entry.isIntersecting) animate();
         },
-        { threshold: 0.5 }
-      )
-      observer.observe(lightsScrollTrigger.current)
+        { threshold: 0.5 },
+      );
+      observer.observe(lightsScrollTrigger.current);
       return () => {
-        canceled = true
-        observer.disconnect()
-      }
+        canceled = true;
+        observer.disconnect();
+      };
     }
-  }, [prefersReducedMotion])
+  }, [prefersReducedMotion]);
 
   return (
     <>
@@ -393,54 +393,54 @@ const ShipPage = () => {
       <Box
         as="header"
         sx={{
-          bg: '#000000',
+          bg: "#000000",
           backgroundImage: `
 						linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
 						url('https://cloud-dst3a9oz5-hack-club-bot.vercel.app/0image.png')
 					`,
-          color: '#ffffff',
-          position: 'relative'
+          color: "#ffffff",
+          position: "relative",
         }}
       >
         <Box
           ref={spotlightRef}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             zIndex: 2,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            bg: '#000000',
-            pointerEvents: 'none'
+            bg: "#000000",
+            pointerEvents: "none",
           }}
         />
 
         <Flex
           sx={{
             p: 4,
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             zIndex: 5,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Flex
             sx={{
               pt: 80,
-              width: '100%',
-              maxWidth: 'layout',
-              alignItems: 'center'
+              width: "100%",
+              maxWidth: "layout",
+              alignItems: "center",
             }}
           >
-            <Flex sx={{ flex: 1, flexDirection: 'column', gap: 25 }}>
+            <Flex sx={{ flex: 1, flexDirection: "column", gap: 25 }}>
               <Heading
                 as="h1"
                 sx={{
                   fontSize: 80,
-                  maxWidth: 'copyPlus',
-                  textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
-                  color: '#87ffa1'
+                  maxWidth: "copyPlus",
+                  textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
+                  color: "#87ffa1",
                 }}
               >
                 <Balancer ratio={0.3}>OnBoard</Balancer>
@@ -448,10 +448,10 @@ const ShipPage = () => {
 
               <Heading
                 as="div"
-                sx={{ fontSize: 4, fontWeight: 400, maxWidth: 'copyPlus' }}
+                sx={{ fontSize: 4, fontWeight: 400, maxWidth: "copyPlus" }}
               >
                 <Balancer ratio={0.3}>
-                  Circuit boards are{' '}
+                  Circuit boards are{" "}
                   <Sparkles>
                     <Text sx={{ fontWeight: 400 }}>magical</Text>
                   </Sparkles>
@@ -466,7 +466,7 @@ const ShipPage = () => {
                   href="https://hack.af/pcb-jam"
                   target="_blank"
                   sx={{
-                    background: t => t.util.gx('#60cc38', '#113b11')
+                    background: (t) => t.util.gx("#60cc38", "#113b11"),
                   }}
                 >
                   Learn PCB Design Now!
@@ -478,8 +478,8 @@ const ShipPage = () => {
                   href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                   target="_blank"
                   sx={{
-                    borderColor: '#113b11',
-                    color: '#60cc38'
+                    borderColor: "#113b11",
+                    color: "#60cc38",
                   }}
                 >
                   Get a Grant
@@ -504,8 +504,8 @@ const ShipPage = () => {
               pb: 35,
               fontSize: 36,
               fontWeight: 500,
-              maxWidth: 'copy',
-              textAlign: 'center'
+              maxWidth: "copy",
+              textAlign: "center",
             }}
           >
             <Balancer ratio={0.8}>
@@ -519,12 +519,12 @@ const ShipPage = () => {
             sx={{
               fontSize: 2,
               h3: { fontSize: 2 },
-              width: '100%',
-              maxWidth: 'layout',
-              pb: 40
+              width: "100%",
+              maxWidth: "layout",
+              pb: 40,
             }}
           >
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Community & Friends</Text>
               <Text as="p">
                 Share your progress and ask for help with Hack Club teens who
@@ -532,7 +532,7 @@ const ShipPage = () => {
               </Text>
             </Flex>
 
-            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
               <Text as="h3">Free Manufacturing</Text>
               <Text as="p">
                 We’ll pay $100 to cover manufacturing costs, enough for 2-3
@@ -550,16 +550,16 @@ const ShipPage = () => {
           pt: 6,
           pb: 4,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
@@ -567,9 +567,9 @@ const ShipPage = () => {
             sx={{
               fontSize: 42,
               fontWeight: 500,
-              borderTop: '4px solid',
-              borderTopColor: 'red',
-              pt: 4
+              borderTop: "4px solid",
+              borderTopColor: "red",
+              pt: 4,
             }}
           >
             <Balancer ratio={0.3}>
@@ -577,15 +577,15 @@ const ShipPage = () => {
             </Balancer>
           </Heading>
           <Text sx={{ fontSize: 3 }}>
-            Learn how to design your own circuit boards from scratch with our{' '}
-            <strong>official tutorials</strong> and jams, like Maggie’s{' '}
+            Learn how to design your own circuit boards from scratch with our{" "}
+            <strong>official tutorials</strong> and jams, like Maggie’s{" "}
             <Link href="https://hack.af/pcb-jam" target="_blank">
               intro to PCB design jam
             </Link>
-            . Ask in the{' '}
+            . Ask in the{" "}
             <Link href={slackLink} target="_blank">
               Hack Club Slack
-            </Link>{' '}
+            </Link>{" "}
             if you have any questions!
           </Text>
         </Flex>
@@ -594,27 +594,27 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 5,
           pb: 6,
           bg: dimBg,
-          color: '#ffffff',
-          justifyContent: 'center'
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 4,
-            width: '100%',
-            maxWidth: 'copyPlus'
+            width: "100%",
+            maxWidth: "copyPlus",
           }}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 36, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 36, fontWeight: 500, textAlign: "center" }}
           >
             <Balancer>What have people made already?</Balancer>
           </Heading>
@@ -623,39 +623,39 @@ const ShipPage = () => {
             width={350}
             gap={3}
             sx={{
-              width: '100%',
+              width: "100%",
               fontSize: 2,
               a: {
-                display: 'block',
-                position: 'relative',
-                bg: '#000000',
-                borderRadius: 'default',
+                display: "block",
+                position: "relative",
+                bg: "#000000",
+                borderRadius: "default",
                 px: 3,
                 py: 4,
-                color: 'inherit',
-                textDecoration: 'inherit',
-                '.arrow': {
-                  position: 'relative',
-                  left: '0px',
-                  top: '1px', // Looks more aligned with text.
-                  display: 'inline-block',
-                  transition: 'left 80ms ease-in'
+                color: "inherit",
+                textDecoration: "inherit",
+                ".arrow": {
+                  position: "relative",
+                  left: "0px",
+                  top: "1px", // Looks more aligned with text.
+                  display: "inline-block",
+                  transition: "left 80ms ease-in",
+                },
+                "&:hover .arrow": {
+                  left: "4px",
                 },
-                '&:hover .arrow': {
-                  left: '4px'
-                }
               },
               article: {
-                flexDirection: 'column',
+                flexDirection: "column",
                 gap: 3,
-                justifyContent: 'center',
-                height: '100%',
-                zIndex: 1
+                justifyContent: "center",
+                height: "100%",
+                zIndex: 1,
               },
               img: {
-                pointerEvents: 'none',
-                zIndex: 2
-              }
+                pointerEvents: "none",
+                zIndex: 2,
+              },
             }}
           >
             <a
@@ -666,7 +666,7 @@ const ShipPage = () => {
                 <Text as="p" sx={{ pr: 115 }}>
                   A <strong>fidget spinner</strong> without any moving parts.
                 </Text>
-                <Text as="p" sx={{ pr: 100, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 100, color: "gray" }}>
                   See Micha's work&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -675,9 +675,9 @@ const ShipPage = () => {
                   alt="A red circular circuit board with a graphic of white fidget spinner on it."
                   sx={{
                     maxWidth: 120,
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
-                    right: 10
+                    right: 10,
                   }}
                 />
               </Flex>
@@ -689,10 +689,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: 100 }}>
-                  A <strong>movement sensor</strong> add-on to an open source{' '}
+                  A <strong>movement sensor</strong> add-on to an open source{" "}
                   <strong>game console</strong>.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   Read the source&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
@@ -700,9 +700,9 @@ const ShipPage = () => {
                   alt="A black circuit board for a game console with copper wiring."
                   sx={{
                     maxWidth: 280,
-                    position: 'absolute',
+                    position: "absolute",
                     bottom: -40,
-                    right: -75
+                    right: -75,
                   }}
                 />
               </Flex>
@@ -714,10 +714,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
-                  Hugo's <strong>USB-C hub</strong> for the best{' '}
+                  Hugo's <strong>USB-C hub</strong> for the best{" "}
                   <strong>hackathon swag</strong> ever.
                 </Text>
-                <Text as="p" sx={{ color: 'gray', pr: 150 }}>
+                <Text as="p" sx={{ color: "gray", pr: 150 }}>
                   Build one for your event&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -729,8 +729,8 @@ const ShipPage = () => {
                     right: -15,
                     bottom: -10,
                     maxWidth: 260,
-                    position: 'absolute',
-                    zIndex: 6
+                    position: "absolute",
+                    zIndex: 6,
                   }}
                 />
               </Flex>
@@ -745,18 +745,18 @@ const ShipPage = () => {
                   Karmanyaah's <strong>digital level</strong> in the shape of a
                   longhorn.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
+                <Text as="p" sx={{ pr: 140, color: "gray" }}>
                   See the designs&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
                   src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
                   alt="A longhorn-shaped PCB with glowing horns."
                   sx={{
-                    position: 'absolute',
+                    position: "absolute",
                     top: 40,
                     right: -30,
                     maxWidth: 230,
-                    transform: 'rotate(20deg)'
+                    transform: "rotate(20deg)",
                   }}
                 />
               </Flex>
@@ -780,24 +780,24 @@ const ShipPage = () => {
         sx={{
           px: 4,
           pt: 5,
-          bg: '#ffffff',
-          color: '#000000',
-          justifyContent: 'center'
+          bg: "#ffffff",
+          color: "#000000",
+          justifyContent: "center",
         }}
       >
         <Flex
           as="section"
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             gap: 4,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
           ref={containerRef}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 5, fontWeight: 500, textAlign: 'center' }}
+            sx={{ fontSize: 5, fontWeight: 500, textAlign: "center" }}
           >
             How to Qualify
           </Heading>
@@ -806,29 +806,29 @@ const ShipPage = () => {
             <Box
               sx={{
                 ...traceSx,
-                alignSelf: 'flex-end',
-                height: busHeight
+                alignSelf: "flex-end",
+                height: busHeight,
               }}
               ref={busRef}
             />
 
             <Flex
               sx={{
-                flexDirection: ['column', 'column', 'row'],
+                flexDirection: ["column", "column", "row"],
                 flex: 1,
                 gap: 5,
-                pb: 5
+                pb: 5,
               }}
             >
               <Flex
                 as="ul"
                 sx={{
-                  flexDirection: 'column',
+                  flexDirection: "column",
                   fontSize: 24,
-                  listStyleType: 'none',
+                  listStyleType: "none",
                   gap: 4,
                   flex: 1,
-                  p: 0
+                  p: 0,
                 }}
               >
                 {[
@@ -841,7 +841,7 @@ const ShipPage = () => {
                     screenshot.
                   </>,
                   <>
-                    <strong>Open source your design</strong> on GitHub and{' '}
+                    <strong>Open source your design</strong> on GitHub and{" "}
                     <Link
                       href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                       target="_blank"
@@ -849,15 +849,15 @@ const ShipPage = () => {
                       apply for the grant
                     </Link>
                     ! You must be a teenager in high school to apply.
-                  </>
+                  </>,
                 ].map((text, i) => (
                   <Text
                     as="li"
                     key={i}
                     sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      position: 'relative'
+                      display: "flex",
+                      alignItems: "center",
+                      position: "relative",
                     }}
                   >
                     <Box
@@ -865,11 +865,11 @@ const ShipPage = () => {
                         width: 30,
                         height: 30,
                         borderWidth: traceSx.width,
-                        borderStyle: 'solid',
+                        borderStyle: "solid",
                         borderColor: traceSx.bg,
-                        borderRadius: '50%',
-                        left: t => -60,
-                        position: 'absolute'
+                        borderRadius: "50%",
+                        left: (t) => -60,
+                        position: "absolute",
                       }}
                     >
                       <Box
@@ -881,11 +881,11 @@ const ShipPage = () => {
                           width: traceSx.width,
                           height: 69,
                           bg: traceSx.bg,
-                          position: 'absolute',
-                          transform: 'rotate(45deg)',
-                          transformOrigin: 'top right',
-                          top: '20.5px',
-                          left: '-5px'
+                          position: "absolute",
+                          transform: "rotate(45deg)",
+                          transformOrigin: "top right",
+                          top: "20.5px",
+                          left: "-5px",
                         }}
                       />
                     </Box>
@@ -903,8 +903,8 @@ const ShipPage = () => {
                   sx={{
                     flex: 1,
                     maxWidth: 350,
-                    objectFit: 'contain',
-                    mt: ['-40px', '-40px', 0]
+                    objectFit: "contain",
+                    mt: ["-40px", "-40px", 0],
                   }}
                 />
               </Tilt>
@@ -916,26 +916,26 @@ const ShipPage = () => {
       <Flex
         sx={{
           px: 4,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
-        <Flex as="section" sx={{ width: '100%', maxWidth: 'layout' }}>
+        <Flex as="section" sx={{ width: "100%", maxWidth: "layout" }}>
           <Box sx={traceSx}>
             <Box
               sx={{
                 height: traceSx.width,
                 width: 40,
                 bg: traceSx.bg,
-                position: 'absolute',
+                position: "absolute",
                 bottom: 0,
-                left: -20 + traceSx.width / 2
+                left: -20 + traceSx.width / 2,
               }}
             />
           </Box>
 
-          <Flex sx={{ flex: 1, flexDirection: 'column', gap: 4, py: 5 }}>
+          <Flex sx={{ flex: 1, flexDirection: "column", gap: 4, py: 5 }}>
             <Heading as="h2" sx={{ fontSize: 36, fontWeight: 500 }}>
               <Balancer>Join the Hack Club Slack</Balancer>
             </Heading>
@@ -960,35 +960,35 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: 'hidden',
+          overflowX: "hidden",
           px: 4,
           py: 6,
-          bg: '#000000',
-          color: '#ffffff',
-          justifyContent: 'center'
+          bg: "#000000",
+          color: "#ffffff",
+          justifyContent: "center",
         }}
       >
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'center',
+            flexDirection: "column",
+            alignItems: "center",
             gap: 5,
-            width: '100%',
-            maxWidth: 'layout'
+            width: "100%",
+            maxWidth: "layout",
           }}
         >
           {/* For accessibility and screen readers: */}
           <Heading
             as="h2"
             sx={{
-              position: 'absolute',
-              width: '1px',
-              height: '1px',
-              margin: '-1px',
-              overflow: 'hidden',
-              clip: 'rect(0, 0, 0, 0)',
-              whiteSpace: 'nowrap',
-              borderWidth: 0
+              position: "absolute",
+              width: "1px",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              clip: "rect(0, 0, 0, 0)",
+              whiteSpace: "nowrap",
+              borderWidth: 0,
             }}
           >
             Let's Recap
@@ -996,15 +996,15 @@ const ShipPage = () => {
 
           <Grid
             ref={lightsScrollTrigger}
-            gap={['2px', '3px', '4px']}
+            gap={["2px", "3px", "4px"]}
             columns={recapWidth}
-            sx={{ width: '100%', maxWidth: 800 }}
+            sx={{ width: "100%", maxWidth: 800 }}
           >
             {recapPixels.map((_, i) => (
               <Box
                 id={`pixel-${i}`}
                 key={i}
-                sx={{ bg: dimBg, paddingTop: '100%' }}
+                sx={{ bg: dimBg, paddingTop: "100%" }}
               />
             ))}
           </Grid>
@@ -1013,23 +1013,23 @@ const ShipPage = () => {
             width={300}
             gap={4}
             sx={{
-              width: '100%',
+              width: "100%",
               article: {
                 bg: dimBg,
-                borderRadius: 'default',
+                borderRadius: "default",
                 p: 4,
-                flexDirection: 'column',
-                boxShadow: 'inset 0px 0px 14px rgba(255, 255, 255, 0.15);'
+                flexDirection: "column",
+                boxShadow: "inset 0px 0px 14px rgba(255, 255, 255, 0.15);",
               },
               h3: {
                 fontSize: 3,
-                mb: 3
+                mb: 3,
               },
               p: {
                 fontSize: 18,
                 pb: 3,
-                mb: '6px'
-              }
+                mb: "6px",
+              },
             }}
           >
             <Flex as="article">
@@ -1051,7 +1051,7 @@ const ShipPage = () => {
             <Flex
               as="article"
               sx={{
-                transform: 'scale(1.1)'
+                transform: "scale(1.1)",
               }}
             >
               <Text as="h3">Learn to PCB</Text>
@@ -1078,16 +1078,16 @@ const ShipPage = () => {
         </Flex>
       </Flex>
 
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         <Image
           src="https://cloud-f4lij7sq1-hack-club-bot.vercel.app/0flowerpcb.png"
           alt="A big image of several pink flower-shaped PCBs."
           loading="lazy"
           sx={{
-            display: 'block',
-            width: '100%',
+            display: "block",
+            width: "100%",
             height: 500,
-            objectFit: 'cover'
+            objectFit: "cover",
           }}
         />
 
@@ -1096,44 +1096,44 @@ const ShipPage = () => {
           href="https://airtable.com/shrOOU2ZZFYtffUVz"
           target="_blank"
           sx={{
-            bg: '#ff0000',
-            color: 'rgba(255, 255, 255, 0.7)',
-            textDecoration: 'none',
+            bg: "#ff0000",
+            color: "rgba(255, 255, 255, 0.7)",
+            textDecoration: "none",
             size: 160,
-            flexDirection: 'column',
-            textAlign: 'center',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            flexDirection: "column",
+            textAlign: "center",
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: -80,
-            right: '14vw',
-            fontSize: '24px',
+            right: "14vw",
+            fontSize: "24px",
             lineHeight: 1.2,
-            fontWeight: 'bold',
+            fontWeight: "bold",
             fontFamily: `'${stickerButtonFont}', cursive`,
-            transform: 'rotate(-25deg)',
-            borderRadius: '50%',
+            transform: "rotate(-25deg)",
+            borderRadius: "50%",
             // Terrible buttons styles, doesn't even look good, but didn't want to waste more time:
             backgroundImage:
-              'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)',
+              "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)",
             boxShadow:
-              '0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset',
-            filter: 'drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))',
-            textShadow: '0px 0px 2px rgba(255, 255, 255, 0.45)',
-            WebkitTapHighlightColor: 'transparent',
+              "0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset",
+            filter: "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))",
+            textShadow: "0px 0px 2px rgba(255, 255, 255, 0.45)",
+            WebkitTapHighlightColor: "transparent",
             transition:
-              'box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear',
-            ':active': {
+              "box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear",
+            ":active": {
               backgroundImage:
-                'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)',
+                "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)",
               boxShadow:
-                '0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset',
-              filter: 'drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))',
-              fontSize: '22px'
-            }
+                "0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset",
+              filter: "drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))",
+              fontSize: "22px",
+            },
           }}
         >
-          {stickerButtonText.split(' ').map((line, i) => (
+          {stickerButtonText.split(" ").map((line, i) => (
             <div key={i}>{line}</div>
           ))}
         </Flex>
@@ -1141,7 +1141,7 @@ const ShipPage = () => {
 
       <Footer dark />
     </>
-  )
-}
+  );
+};
 
-export default ShipPage
+export default ShipPage;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/team.js b/pages/team.js
index 2209c007d..1fd379af6 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Bio from '../components/bio'
-import ForceTheme from '../components/force-theme'
+import { Box, Container, Text, Grid, Flex } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Bio from "../components/bio";
+import ForceTheme from "../components/force-theme";
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: '75%'
+              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "75%",
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: '650px' }}
+              sx={{ maxWidth: "650px" }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: 'rgb(51 142 218 / 40%)',
+                bg: "rgb(51 142 218 / 40%)",
                 p: 3,
-                borderRadius: '20px',
+                borderRadius: "20px",
                 mb: 3,
                 gap: 3,
-                flexWrap: ['wrap', null, null, 'nowrap']
+                flexWrap: ["wrap", null, null, "nowrap"],
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: 'center',
+                  textAlign: "center",
                   fontSize: 4,
-                  writingMode: [null, null, null, 'vertical-rl'],
+                  writingMode: [null, null, null, "vertical-rl"],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, 'rotate(180deg)'],
-                  width: ['100%', null, null, 'fit-content'],
+                  transform: [null, null, null, "rotate(180deg)"],
+                  width: ["100%", null, null, "fit-content"],
                   marginBottom: [
-                    '0px!important',
-                    '0px!important',
-                    '0px!important',
-                    3
-                  ]
+                    "0px!important",
+                    "0px!important",
+                    "0px!important",
+                    3,
+                  ],
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(51 214 166 / 40%)',
+                    bg: "rgb(51 214 166 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: 'rgb(255 142 55 / 40%)',
+                    bg: "rgb(255 142 55 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(236 55 80 / 40%)',
+                    bg: "rgb(236 55 80 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: 'rgb(166 51 214 / 40%)',
+                    bg: "rgb(166 51 214 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: '1.2',
+                  lineHeight: "1.2",
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: '600px',
-                  width: '100%',
-                  margin: 'auto'
+                  maxWidth: "600px",
+                  width: "100%",
+                  margin: "auto",
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  )
+  );
 }
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 96c8433d1f8a91f955303ee2e15be30c3bca86da Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 007/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 805e82c96dc5671d15bbd15e0bdefc8e891d14b8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 008/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 +++++++++++++------
 components/mail-card.js                | 10 ++++---
 public/home/letter-pattern.svg         | 37 ++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 public/home/letter-pattern.svg

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file
diff --git a/public/home/letter-pattern.svg b/public/home/letter-pattern.svg
new file mode 100644
index 000000000..23bda7942
--- /dev/null
+++ b/public/home/letter-pattern.svg
@@ -0,0 +1,37 @@
+<svg width="293" height="6" viewBox="0 0 293 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6L10.9823 0H15.4038L12.4215 6H8Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.421509 6L3.40379 0H7.82527L4.843 6H0.421509Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6L26.9823 0H31.4038L28.4215 6H24Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4215 6L35.4038 0H39.8253L36.843 6H32.4215Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.843 6L43.8253 0H48.2468L45.2645 6H40.843Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5785 6L18.5608 0H22.9823L20 6H15.5785Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2645 6L52.2468 0H56.6683L53.686 6H49.2645Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.686 6L60.6683 0H65.0898L62.1075 6H57.686Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1075 6L69.0898 0H73.5113L70.529 6H66.1075Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5291 6L77.5113 0H81.9328L78.9505 6H74.5291Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9506 6L85.9328 0H90.3543L87.372 6H82.9506Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3721 6L94.3543 0H98.7758L95.7936 6H91.3721Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.7936 6L102.776 0H107.197L104.215 6H99.7936Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.215 6L111.197 0H115.619L112.637 6H108.215Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.637 6L119.619 0H124.04L121.058 6H116.637Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.058 6L128.04 0H132.462L129.48 6H125.058Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M133.48 6L136.462 0H140.883L137.901 6H133.48Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.901 6L144.883 0H149.305L146.323 6H141.901Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.323 6L153.305 0H157.726L154.744 6H150.323Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.744 6L161.726 0H166.148L163.166 6H158.744Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.166 6L170.148 0H174.569L171.587 6H167.166Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.587 6L178.569 0H182.991L180.009 6H175.587Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.009 6L186.991 0H191.412L188.43 6H184.009Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.43 6L195.412 0H199.834L196.852 6H192.43Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200.852 6L203.834 0H208.255L205.273 6H200.852Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.273 6L212.255 0H216.677L213.695 6H209.273Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.695 6L220.677 0H225.098L222.116 6H217.695Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.116 6L229.098 0H233.52L230.538 6H226.116Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.538 6L237.52 0H241.941L238.959 6H234.538Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M242.959 6L245.942 0H250.363L247.381 6H242.959Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.381 6L254.363 0H258.785L255.802 6H251.381Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.802 6L262.785 0H267.206L264.224 6H259.802Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.224 6L271.206 0H275.628L272.645 6H268.224Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.645 6L279.628 0H284.049L281.067 6H276.645Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M285.067 6L288.049 0H292.471L289.488 6H285.067Z" fill="#EC3750"/>
+</svg>

From 7c03198886097f7df75e61b9112d4243a24070b9 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 009/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 1b943010d6827597831f02b4a19b1111f90004fd Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 010/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |    6 +-
 components/analytics.js                       |    6 +-
 components/announcement.js                    |   54 +-
 components/announcements/amount.js            |   12 +-
 components/announcements/cta.js               |   22 +-
 components/announcements/elon.mdx             |    4 +-
 components/announcements/holder.js            |   12 +-
 components/announcements/pills.js             |   36 +-
 components/announcements/preston-werner.mdx   |    2 +-
 components/announcements/relon.mdx            |    6 +-
 components/background-image.js                |   28 +-
 components/bio.js                             |  106 +-
 components/color-switcher.js                  |   34 +-
 components/comma.js                           |    4 +-
 components/donate/sponsors.js                 |   40 +-
 components/donate/sprigForm.js                |   82 +-
 components/donate/sprigMeta.js                |   10 +-
 components/dot.js                             |   36 +-
 components/fade-in.js                         |   20 +-
 components/flag.js                            |   26 +-
 components/flex-col.js                        |    4 +-
 components/footer.js                          |   66 +-
 components/force-theme.js                     |   12 +-
 components/hackathons/features/marketing.js   |   68 +-
 components/hackathons/features/money.js       |   88 +-
 components/hackathons/features/slack.js       |   88 +-
 components/hackathons/grant/apply.js          |  106 +-
 components/hackathons/grant/form.js           |   52 +-
 components/hackathons/keep-exploring.js       |   50 +-
 components/hackathons/landing.js              |  104 +-
 components/hackathons/overview.js             |   32 +-
 components/hackathons/recap.js                |   54 +-
 components/hackathons/scrolling-hackathons.js |  154 +--
 components/hcb/apply-button.js                |   16 +-
 components/hcb/apply/address-input.js         |  172 +--
 components/hcb/apply/alert-modal.js           |   32 +-
 components/hcb/apply/autofill-colour-fix.js   |   12 +-
 components/hcb/apply/checkbox.js              |   22 +-
 components/hcb/apply/field.js                 |   50 +-
 components/hcb/apply/form-container.js        |   28 +-
 components/hcb/apply/hcb-info.js              |   28 +-
 components/hcb/apply/nav-button.js            |  144 +-
 components/hcb/apply/org-form.js              |   26 +-
 components/hcb/apply/personal-form.js         |   44 +-
 components/hcb/apply/progress.js              |   50 +-
 components/hcb/apply/watermark.js             |   62 +-
 components/hcb/directory/card.js              |  124 +-
 components/hcb/everything.js                  |  162 +--
 components/hcb/features.js                    |   80 +-
 components/hcb/first/features.js              |  100 +-
 components/hcb/first/form.js                  |  144 +-
 components/hcb/first/steps.js                 |   84 +-
 components/hcb/first/testimonials.js          |   98 +-
 components/hcb/landing.js                     |  142 +-
 components/hcb/nonprofits.js                  |  146 +-
 components/hcb/run.js                         |   40 +-
 components/hcb/start.js                       |   22 +-
 components/hcb/stats.js                       |   78 +-
 components/hcb/testimonials.js                |  160 ++-
 components/hcb/timeline.js                    |   58 +-
 components/hcb/tooltip.js                     |   48 +-
 components/icon.js                            |    8 +-
 components/index/cards/angelhacks.js          |   54 +-
 components/index/cards/button.js              |   52 +-
 components/index/cards/card-model.js          |   98 +-
 components/index/cards/clubs.js               |   54 +-
 components/index/cards/epoch.js               |  160 +--
 components/index/cards/events.js              |   52 +-
 components/index/cards/hackathons.js          |  182 +--
 components/index/cards/haxidraw.js            |   32 +-
 components/index/cards/hcb.js                 |  106 +-
 components/index/cards/inspect.js             |   24 +-
 components/index/cards/mailing-list.js        |   17 +-
 components/index/cards/outernet.js            |   34 +-
 components/index/cards/sinerider.js           |   32 +-
 components/index/cards/slack.js               |   98 +-
 components/index/cards/sprig-console.js       |   94 +-
 components/index/cards/sprig.js               |  150 +-
 components/index/cards/winter.js              |   54 +-
 components/index/cards/workshops.js           |   56 +-
 components/index/carousel-cards.js            |   72 +-
 components/index/carousel.js                  |   38 +-
 components/index/events.js                    |   88 +-
 components/index/github.js                    |   58 +-
 components/letterhead.js                      |   78 +-
 components/mail-card.js                       |    6 +-
 components/mention.js                         |   22 +-
 components/nav.js                             |  132 +-
 components/particles.js                       |   56 +-
 components/photo.js                           |   36 +-
 components/posts/emoji.js                     |   52 +-
 components/posts/index.js                     |  130 +-
 components/posts/mention.js                   |   30 +-
 components/press.mdx                          |    2 +-
 components/scroll-hint.js                     |   46 +-
 components/secret.js                          |  138 +-
 components/ship/why.mdx                       |    2 +-
 components/signature.js                       |   14 +-
 components/signatures.js                      |   14 +-
 components/slack.js                           |   80 +-
 components/slack/header.js                    |   74 +-
 components/slack/join-form.js                 |   78 +-
 components/slack/slack-events.js              |  104 +-
 components/slide-down.js                      |   24 +-
 components/slide-up.js                        |   24 +-
 components/sparkles/index.js                  |   88 +-
 components/sparkles/money.js                  |   90 +-
 components/stage.js                           |   20 +-
 components/stat.js                            |   50 +-
 components/stickers/request-form.js           |   54 +-
 components/submit.js                          |   52 +-
 components/tilt.js                            |   20 +-
 components/winter/breakdown-box.js            |   48 +-
 components/winter/breakdown.js                |   34 +-
 components/winter/footer.js                   |   22 +-
 components/winter/form.js                     |   98 +-
 components/winter/info.js                     |  104 +-
 components/winter/landing.js                  |   98 +-
 components/winter/projects.js                 |  238 ++--
 components/winter/recap.js                    |   40 +-
 components/winter/rsvp.js                     |  104 +-
 components/winter/timeline.js                 |   90 +-
 lib/dates.js                                  |  153 +--
 lib/fetcher.js                                |    4 +-
 lib/hcb/apply/address-validation.js           |   64 +-
 lib/helpers.js                                |  235 ++--
 lib/members.js                                |    6 +-
 lib/sitemap.js                                |   44 +-
 lib/theme.js                                  |   18 +-
 lib/use-form.js                               |   94 +-
 lib/use-has-mounted.js                        |   12 +-
 lib/use-prefers-motion.js                     |   32 +-
 lib/use-prefers-reduced-motion.js             |   32 +-
 lib/use-random-interval.js                    |   41 +-
 middleware.js                                 |   20 +-
 next.config.mjs                               |  340 ++---
 pages/404.js                                  |   44 +-
 pages/_app.js                                 |   20 +-
 pages/_document.js                            |   44 +-
 pages/amas/geohot.js                          |  318 ++---
 pages/amas/index.js                           |  114 +-
 pages/amas/sal.js                             |  292 ++--
 pages/amas/vitalik.js                         |  300 ++--
 pages/api/channels/dogs.js                    |   10 +-
 pages/api/channels/resolve.js                 |   20 +-
 pages/api/contribute.js                       |   20 +-
 pages/api/first-team.js                       |   16 +-
 pages/api/games.js                            |   12 +-
 pages/api/github.js                           |   52 +-
 pages/api/hcb/apply.js                        |   94 +-
 pages/api/hcb/demo.js                         |   50 +-
 pages/api/join.js                             |  106 +-
 pages/api/mailing-list.js                     |   18 +-
 pages/api/slack.js                            |   32 +-
 pages/api/sprig-console.js                    |   16 +-
 pages/api/stars.js                            |   30 +-
 pages/api/stickers.js                         |   86 +-
 pages/api/stuff.js                            |   26 +-
 pages/api/winter-rsvp.js                      |   38 +-
 pages/brand.js                                |  164 +--
 pages/clubs.js                                |  328 ++---
 pages/content/covid19.mdx                     |    2 +-
 pages/content/it-admins.mdx                   |    4 +-
 pages/content/sponsorship.mdx                 |   14 +-
 pages/content/sunsetting-som.mdx              |    8 +-
 pages/content/transparency/may-2020.mdx       |    2 +-
 pages/deprecated/[deprecated].js              |   78 +-
 pages/donate.js                               |  284 ++--
 pages/elon.js                                 |   42 +-
 pages/events.js                               |  224 +--
 pages/hackathons/grant.js                     |  224 +--
 pages/hackathons/index.js                     |   46 +-
 pages/hcb/apply/index.js                      |  124 +-
 pages/hcb/apply/success.js                    |   70 +-
 pages/hcb/climate/[region].js                 |   43 +-
 pages/hcb/climate/index.js                    |  989 +++++++------
 pages/hcb/first.js                            |  116 +-
 pages/hcb/fiscal-sponsorship.js               |  262 ++--
 pages/hcb/index.js                            |   38 +-
 pages/index.js                                |  828 +++++------
 pages/jobs/brand-director.js                  |   22 +-
 pages/jobs/clubs-lead.js                      |   22 +-
 pages/jobs/customer-success-lead.js           |   22 +-
 pages/jobs/education-engineer.js              |   22 +-
 pages/jobs/events-designer.js                 |  119 +-
 pages/jobs/executive-assistant.js             |   22 +-
 pages/jobs/executive-producer.js              |   22 +-
 pages/jobs/hcb-ops-associate.js               |   22 +-
 pages/jobs/hcb-ops-lead.js                    |   22 +-
 pages/jobs/index.js                           |  122 +-
 pages/jobs/lead-hacker.js                     |  107 +-
 .../jobs/philanthropy-communications-lead.js  |   22 +-
 pages/jobs/vp-donor-engagement.js             |   22 +-
 pages/minecraft.js                            |   62 +-
 pages/night.js                                |   83 +-
 pages/onboard.js                              |  650 ++++-----
 pages/opensource.js                           |  128 +-
 pages/philanthropy/index.js                   |  532 +++----
 pages/philanthropy/supporters.js              |  142 +-
 pages/philosophy.js                           |   82 +-
 pages/pizza.js                                | 1220 +++++++----------
 pages/press.js                                |   54 +-
 pages/preston-werner-2022.js                  |   50 +-
 pages/preston-werner.js                       |   46 +-
 pages/relon.js                                |   62 +-
 pages/santa.js                                |   90 +-
 pages/ship.js                                 |  130 +-
 pages/slack.js                                |  270 ++--
 pages/stickers.js                             |  134 +-
 pages/team.js                                 |   92 +-
 pages/winter.js                               |   90 +-
 prettier.config.js                            |    8 +-
 212 files changed, 9263 insertions(+), 9574 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hcb.js b/components/index/cards/hcb.js
index ddf029af2..fdbf68c5e 100644
--- a/components/index/cards/hcb.js
+++ b/components/index/cards/hcb.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Grid, Heading, Text } from "theme-ui";
-import { Fade } from "react-reveal";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Grid, Heading, Text } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
 export default function Bank({ data }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         color="white"
         sx={{
-          backgroundColor: "dark",
-          minHeight: ["300px", "400px", "380px"],
-          backgroundColor: "darkless",
+          backgroundColor: 'dark',
+          minHeight: ['300px', '400px', '380px'],
+          backgroundColor: 'darkless',
           backgroundImage: `linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('/home/hackathons-bg.webp')`,
-          backgroundSize: "cover",
-          backgroundPosition: "40%",
-          color: "snow",
+          backgroundSize: 'cover',
+          backgroundPosition: '40%',
+          color: 'snow'
         }}
         badge
         text={data[0]}
       >
         <Heading
           variant="title"
-          sx={{ color: "red", fontSize: ["36px", 4, 5], mt: [0, 3] }}
+          sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3] }}
         >
           HCB
         </Heading>
-        <Grid columns={[1, "1.3fr 1fr", 2]}>
+        <Grid columns={[1, '1.3fr 1fr', 2]}>
           <Box>
             <Text as="p" variant="subtitle">
               Become a 501(c)3 nonprofit and join 700+ teams using HCB to run
@@ -48,30 +48,30 @@ export default function Bank({ data }) {
             </Buttons>
             <Box
               sx={{
-                position: "relative",
-                width: "100%",
-                display: [null, "none", "none"],
-                mb: "-50px",
-                mt: 3,
+                position: 'relative',
+                width: '100%',
+                display: [null, 'none', 'none'],
+                mb: '-50px',
+                mt: 3
               }}
             >
               <Box
                 sx={{
-                  width: "100%",
-                  height: "250px",
-                  position: "relative",
-                  display: "block",
-                  textAlign: "center",
-                  "&:before": {
+                  width: '100%',
+                  height: '250px',
+                  position: 'relative',
+                  display: 'block',
+                  textAlign: 'center',
+                  '&:before': {
                     content: '""',
-                    backgroundImage: "url(/home/hcb-mobile.webp)",
-                    backgroundSize: "100%",
-                    backgroundRepeat: "no-repeat",
-                    width: "100%",
-                    height: "100%",
-                    marginX: "auto",
-                    display: "block",
-                  },
+                    backgroundImage: 'url(/home/hcb-mobile.webp)',
+                    backgroundSize: '100%',
+                    backgroundRepeat: 'no-repeat',
+                    width: '100%',
+                    height: '100%',
+                    marginX: 'auto',
+                    display: 'block'
+                  }
                 }}
               >
                 {/* <Box
@@ -95,31 +95,31 @@ export default function Bank({ data }) {
       </CardModel>
       <Box
         sx={{
-          position: "absolute",
-          right: [0, "-120px", "-30px"],
-          bottom: [0, "-30px", "-50px"],
-          display: ["none", "block", "block"],
-          zIndex: 3,
+          position: 'absolute',
+          right: [0, '-120px', '-30px'],
+          bottom: [0, '-30px', '-50px'],
+          display: ['none', 'block', 'block'],
+          zIndex: 3
         }}
       >
-        {" "}
+        {' '}
         <Box
           sx={{
-            width: ["250px", "500px"],
-            height: ["180px", "360px"],
-            position: "relative",
-            display: "block",
-            textAlign: "center",
-            "&:before": {
+            width: ['250px', '500px'],
+            height: ['180px', '360px'],
+            position: 'relative',
+            display: 'block',
+            textAlign: 'center',
+            '&:before': {
               content: '""',
-              backgroundImage: "url(/home/hcb.webp)",
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              width: "100%",
-              height: "100%",
-              marginX: "auto",
-              display: "block",
-            },
+              backgroundImage: 'url(/home/hcb.webp)',
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              width: '100%',
+              height: '100%',
+              marginX: 'auto',
+              display: 'block'
+            }
           }}
         >
           {/* <Box
@@ -139,5 +139,5 @@ export default function Bank({ data }) {
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/events.js b/pages/events.js
index a9fa40268..215013565 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Icon from "../components/icon";
-import Image from "next/image";
-import OuternetPic from "../public/outernet/hack.jpg";
-import { compact } from "lodash";
-import theme from "@hackclub/theme";
+  Divider
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Icon from '../components/icon'
+import Image from 'next/image'
+import OuternetPic from '../public/outernet/hack.jpg'
+import { compact } from 'lodash'
+import theme from '@hackclub/theme'
 
 const events = [
   {
-    name: "Outernet",
+    name: 'Outernet',
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
-    location: "Cabot, Vermont",
-    season: "Summer",
-    year: "2023",
-    repo: "outernet",
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
+    location: 'Cabot, Vermont',
+    season: 'Summer',
+    year: '2023',
+    repo: 'outernet',
     image:
-      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
-    link: "https://github.com/hackclub/outernet",
+      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
+    link: 'https://github.com/hackclub/outernet'
   },
   {
-    name: "Epoch",
+    name: 'Epoch',
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: "Delhi NCR, India",
-    season: "Winter",
-    year: "2022/23",
-    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
-    repo: "epoch",
+    location: 'Delhi NCR, India',
+    season: 'Winter',
+    year: '2022/23',
+    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
+    repo: 'epoch'
   },
   {
-    name: "Assemble",
-    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
+    name: 'Assemble',
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
     description:
-      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2022",
-    video: "https://youtube.com/embed/PnK4gzO6S3Q",
-    repo: "assemble",
+      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2022',
+    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
+    repo: 'assemble'
   },
   {
-    name: "The Hacker Zephyr",
-    logo: "https://hackclub.com/stickers/zephyr.svg",
+    name: 'The Hacker Zephyr',
+    logo: 'https://hackclub.com/stickers/zephyr.svg',
     description:
-      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
-    location: "Burlington (VT) to Los Angeles (CA)",
-    season: "Summer",
-    year: "2021",
-    video: "https://youtube.com/embed/2BID8_pGuqA",
-    repo: "the-hacker-zephyr",
+      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
+    location: 'Burlington (VT) to Los Angeles (CA)',
+    season: 'Summer',
+    year: '2021',
+    video: 'https://youtube.com/embed/2BID8_pGuqA',
+    repo: 'the-hacker-zephyr'
   },
   {
-    name: "Summer of Making",
-    logo: "https://hackclub.com/stickers/summer_of_making.svg",
+    name: 'Summer of Making',
+    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
     description:
-      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
-    location: "Online (thanks COVID-19!)",
-    season: "Summer",
-    year: "2020",
+      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
+    location: 'Online (thanks COVID-19!)',
+    season: 'Summer',
+    year: '2020',
     image:
-      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
-    link: "https://scrapbook.hackclub.com/r/summer-of-making",
-    ghTag: "summer-of-making",
+      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
+    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
+    ghTag: 'summer-of-making'
   },
   {
-    name: "Flagship",
-    logo: "https://hackclub.com/stickers/ship.png",
+    name: 'Flagship',
+    logo: 'https://hackclub.com/stickers/ship.png',
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2019",
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2019',
     image:
-      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
-    link: "https://hack.af/flagship-album",
-  },
-];
+      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
+    link: 'https://hack.af/flagship-album'
+  }
+]
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link,
+  link
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: "center", mb: 2 }}>
-      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
+    <Flex sx={{ alignItems: 'center', mb: 2 }}>
+      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: "8px", mt: 2 }}
+        sx={{ borderRadius: '8px', mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: "8px",
+            borderRadius: '8px',
             mt: 2,
-            height: "250px",
-            objectFit: "cover",
-            width: "100%",
-            objectPosition: "top",
+            height: '250px',
+            objectFit: 'cover',
+            width: '100%',
+            objectPosition: 'top'
           }}
         />
       </a>
     )}
-    <Box sx={{ color: "darkless" }}>
+    <Box sx={{ color: 'darkless' }}>
       <b>
         {season}, {year} - {location}
-      </b>{" "}
+      </b>{' '}
     </Box>
     <Box>
-      {" "}
+      {' '}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace("https://", "")}</>
+          <>{link.replace('https://', '')}</>
         </Link>
       )}
     </Box>
   </Card>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
-              textShadow: "elevated",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white',
+              textShadow: 'elevated'
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.325"],
-              maxWidth: "900px",
-              margin: "auto",
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.325'],
+              maxWidth: '900px',
+              margin: 'auto',
               fontWeight: 400,
-              textShadow: "small",
+              textShadow: 'small'
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
+            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: "center",
-            background: theme.util.gx("cyan", "blue"),
-            color: "white",
-            width: "100%",
-            maxWidth: "64rem",
-            mx: "auto",
+            textAlign: 'center',
+            background: theme.util.gx('cyan', 'blue'),
+            color: 'white',
+            width: '100%',
+            maxWidth: '64rem',
+            mx: 'auto',
             mt: 3,
-            fontSize: 2,
+            fontSize: 2
           }}
         >
-          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
+          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{" "}
+            Check them out at{' '}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{" "}
+            . Hack Club is also behind a series of{' '}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               Day of Service
-            </Link>{" "}
-            events and{" "}
+            </Link>{' '}
+            events and{' '}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/index.js b/pages/index.js
index ce3c6f24c..145861a30 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,38 +7,38 @@ import {
   Flex,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import React, { useEffect, useRef, useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Stage from "../components/stage";
-import Carousel from "../components/index/carousel";
-import Outernet from "../components/index/cards/outernet";
-import Sprig from "../components/index/cards/sprig";
-import Sinerider from "../components/index/cards/sinerider";
-import SprigConsole from "../components/index/cards/sprig-console";
-import Clubs from "../components/index/cards/clubs";
-import Workshops from "../components/index/cards/workshops";
-import HCB from "../components/index/cards/hcb";
-import Hackathons from "../components/index/cards/hackathons";
-import OuternetImgFile from "../public/home/outernet-110.jpg";
-import Announcement from "../components/announcement";
-import Konami from "react-konami-code";
-import JSConfetti from "js-confetti";
-import Secret from "../components/secret";
-import MailingList from "../components/index/cards/mailing-list";
-import Slack from "../components/index/cards/slack";
-import Icon from "../components/icon";
-import GitHub from "../components/index/github";
-import Photo from "../components/photo";
-import Comma from "../components/comma";
-import Haxidraw from "../components/index/cards/haxidraw";
+  Text
+} from 'theme-ui'
+import React, { useEffect, useRef, useState } from 'react'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Stage from '../components/stage'
+import Carousel from '../components/index/carousel'
+import Outernet from '../components/index/cards/outernet'
+import Sprig from '../components/index/cards/sprig'
+import Sinerider from '../components/index/cards/sinerider'
+import SprigConsole from '../components/index/cards/sprig-console'
+import Clubs from '../components/index/cards/clubs'
+import Workshops from '../components/index/cards/workshops'
+import HCB from '../components/index/cards/hcb'
+import Hackathons from '../components/index/cards/hackathons'
+import OuternetImgFile from '../public/home/outernet-110.jpg'
+import Announcement from '../components/announcement'
+import Konami from 'react-konami-code'
+import JSConfetti from 'js-confetti'
+import Secret from '../components/secret'
+import MailingList from '../components/index/cards/mailing-list'
+import Slack from '../components/index/cards/slack'
+import Icon from '../components/icon'
+import GitHub from '../components/index/github'
+import Photo from '../components/photo'
+import Comma from '../components/comma'
+import Haxidraw from '../components/index/cards/haxidraw'
 
 /** @jsxImportSource theme-ui */
 
@@ -56,78 +56,78 @@ function Page({
   gameTitle,
   events,
   carouselCards,
-  context,
+  context
 }) {
-  let [gameImage, setGameImage] = useState("");
-  let [gameImage1, setGameImage1] = useState("");
-  let [reveal, setReveal] = useState(false);
-  const [hover, setHover] = useState(true);
-  let [github, setGithub] = useState(0);
-  let [slackKey, setSlackKey] = useState(0);
-  let [key, setKey] = useState(0);
+  let [gameImage, setGameImage] = useState('')
+  let [gameImage1, setGameImage1] = useState('')
+  let [reveal, setReveal] = useState(false)
+  const [hover, setHover] = useState(true)
+  let [github, setGithub] = useState(0)
+  let [slackKey, setSlackKey] = useState(0)
+  let [key, setKey] = useState(0)
 
-  const { asPath } = useRouter();
+  const { asPath } = useRouter()
 
-  let jsConfetti = useRef();
+  let jsConfetti = useRef()
 
   useEffect(() => {
-    jsConfetti.current = new JSConfetti();
+    jsConfetti.current = new JSConfetti()
 
-    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`;
-    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `;
-  }, []);
+    window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
+    window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
+  }, [])
 
   const easterEgg = () => {
-    alert("Hey, you typed the Konami Code!");
+    alert('Hey, you typed the Konami Code!')
 
     jsConfetti.current.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  };
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }
 
   useEffect(() => {
     if (reveal && !hover) {
       setTimeout(() => {
-        setReveal(false);
-      }, 2000);
+        setReveal(false)
+      }, 2000)
     }
-  }, [reveal, hover]);
+  }, [reveal, hover])
 
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let images = [
-    { alt: "Map of Hack Clubs around the world", src: "/home/map.png" },
+    { alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
     {
-      alt: "Hack Clubbers at SpaceX HQ in LA",
-      src: "/home/zephyr-spacex.jpeg",
+      alt: 'Hack Clubbers at SpaceX HQ in LA',
+      src: '/home/zephyr-spacex.jpeg'
     },
     {
-      alt: "MA Hacks, Hack Clubber organized hackathon",
-      src: "/hackathons/mahacks.jpeg",
+      alt: 'MA Hacks, Hack Clubber organized hackathon',
+      src: '/hackathons/mahacks.jpeg'
     },
-    { alt: "AMA with Sal Khan", src: "/home/ama.png" },
-    { alt: "Hack Clubbers at Flagship, 2019", src: "/home/flagship_4.jpg" },
-  ];
+    { alt: 'AMA with Sal Khan', src: '/home/ama.png' },
+    { alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' }
+  ]
 
   // janky right now and does not show last image
 
   useEffect(() => {
     console.log(
-      `White sheets of paper\nWaiting to be printed on\nA blank console waits`,
-    );
+      `White sheets of paper\nWaiting to be printed on\nA blank console waits`
+    )
     if (count === images.length - 1) {
-      setCount(0);
+      setCount(0)
     }
-  }, [count, images.length]);
+  }, [count, images.length])
 
   return (
     <>
@@ -149,17 +149,17 @@ function Page({
       <Box
         as="main"
         sx={{
-          overflowX: "hidden",
-          position: "relative",
+          overflowX: 'hidden',
+          position: 'relative'
         }}
       >
         <Secret
           reveal={reveal}
           onMouseEnter={() => {
-            setHover(true);
+            setHover(true)
           }}
           onMouseOut={() => {
-            setHover(false);
+            setHover(false)
           }}
         />
         <Konami action={easterEgg}>
@@ -169,12 +169,12 @@ function Page({
         <Box
           as="header"
           sx={{
-            bg: "dark",
+            bg: 'dark',
             pt: [5, 6],
             pb: [2, 3],
-            textAlign: "left",
-            position: "relative",
-            overflowX: "hidden",
+            textAlign: 'left',
+            position: 'relative',
+            overflowX: 'hidden'
           }}
         >
           <BGImg
@@ -192,21 +192,21 @@ function Page({
           />
           <Box
             sx={{
-              width: "90vw",
-              maxWidth: [null, "layout"],
-              position: "relative",
-              mx: "auto",
+              width: '90vw',
+              maxWidth: [null, 'layout'],
+              position: 'relative',
+              mx: 'auto',
               py: [4, 4, 4],
-              textShadow: "text",
+              textShadow: 'text'
             }}
           >
             <Text
               variant="eyebrow"
               sx={{
-                color: "sunken",
+                color: 'sunken',
                 pb: 2,
-                position: "relative",
-                display: "block",
+                position: 'relative',
+                display: 'block'
               }}
               as="h4"
             >
@@ -217,42 +217,42 @@ function Page({
                 as="h1"
                 variant="title"
                 sx={{
-                  color: "white",
+                  color: 'white',
                   mb: [3, 4],
                   zIndex: 1,
-                  textAlign: "left",
-                  fontSize: ["42px", "52px", "64px"],
+                  textAlign: 'left',
+                  fontSize: ['42px', '52px', '64px'],
                   lineHeight: 1.2,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
-                We are <Comma>{slackData.total_members_count}</Comma>{" "}
+                We are <Comma>{slackData.total_members_count}</Comma>{' '}
                 <Text
                   sx={{
-                    color: "transparent",
+                    color: 'transparent',
                     ml: 2,
                     mr: 3,
-                    whiteSpace: "nowrap",
+                    whiteSpace: 'nowrap'
                   }}
                 >
                   <Text
                     onClick={() => {
-                      setHover(false);
-                      !reveal ? setReveal(true) : setReveal(false);
+                      setHover(false)
+                      !reveal ? setReveal(true) : setReveal(false)
                     }}
                     sx={{
                       // lineHeight: 0.875,
                       px: 2,
-                      backgroundColor: "red",
-                      position: "absolute",
+                      backgroundColor: 'red',
+                      position: 'absolute',
                       borderRadius: 10,
-                      transform: "rotate(-3deg) translateY(-5px)",
-                      color: "white",
-                      whiteSpace: "nowrap",
-                      textDecoration: "none",
-                      "&:hover": {
-                        cursor: "pointer",
-                      },
+                      transform: 'rotate(-3deg) translateY(-5px)',
+                      color: 'white',
+                      whiteSpace: 'nowrap',
+                      textDecoration: 'none',
+                      '&:hover': {
+                        cursor: 'pointer'
+                      }
                     }}
                     aria-hidden="true"
                   >
@@ -260,7 +260,7 @@ function Page({
                   </Text>
                   teen hackers
                 </Text>
-                <br sx={{ display: ["inline", "none", "none"] }} /> from around
+                <br sx={{ display: ['inline', 'none', 'none'] }} /> from around
                 the world who code together
               </Text>
               <Button
@@ -268,7 +268,7 @@ function Page({
                 as="a"
                 href="/slack"
                 mt={[3, 0, 0]}
-                sx={{ transformOrigin: "center left" }}
+                sx={{ transformOrigin: 'center left' }}
               >
                 Join our community
               </Button>
@@ -276,10 +276,10 @@ function Page({
           </Box>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: ["flex-start", "flex-start", "flex-end"],
+              display: 'flex',
+              justifyContent: ['flex-start', 'flex-start', 'flex-end'],
               marginRight: 2,
-              mt: [4, 3, 1],
+              mt: [4, 3, 1]
             }}
           >
             <Badge
@@ -289,14 +289,14 @@ function Page({
               rel="noopener"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "black",
-                color: "white",
+                zIndex: '1',
+                bg: 'black',
+                color: 'white',
                 opacity: 1,
-                textDecoration: "none",
-                fontWeight: "normal",
-                ":hover": { opacity: 1 },
-                transition: "0.3s ease",
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                ':hover': { opacity: 1 },
+                transition: '0.3s ease'
                 // mixBlendMode: 'multiply'
               }}
               title="📸 Photo by Matt Gleich, Hack Clubber in NH!"
@@ -305,32 +305,32 @@ function Page({
             </Badge>
           </Box>
         </Box>
-        <Box as="section" sx={{ py: [4, 5, "82px"], color: "black" }}>
+        <Box as="section" sx={{ py: [4, 5, '82px'], color: 'black' }}>
           <Box
             sx={{
-              position: "relative",
-              width: "90vw",
-              maxWidth: "layout",
-              margin: "auto",
+              position: 'relative',
+              width: '90vw',
+              maxWidth: 'layout',
+              margin: 'auto'
             }}
           >
             <Text
               variant="title"
               as="h1"
-              sx={{ fontSize: ["36px", "48px", "56px"] }}
+              sx={{ fontSize: ['36px', '48px', '56px'] }}
             >
-              Discover the{" "}
+              Discover the{' '}
               <Text
                 as="span"
                 sx={{
-                  borderRadius: "default",
+                  borderRadius: 'default',
                   px: 1,
                   mx: 0,
-                  whiteSpace: ["wrap", "nowrap", "nowrap"],
-                  color: "white",
-                  background: (theme) => theme.util.gx("red", "orange"),
-                  "-webkit-background-clip": "text",
-                  "-webkit-text-fill-color": "transparent",
+                  whiteSpace: ['wrap', 'nowrap', 'nowrap'],
+                  color: 'white',
+                  background: theme => theme.util.gx('red', 'orange'),
+                  '-webkit-background-clip': 'text',
+                  '-webkit-text-fill-color': 'transparent'
                 }}
               >
                 joy of code
@@ -341,50 +341,50 @@ function Page({
               variant="subtitle"
               as="p"
               sx={{
-                fontSize: ["18px", "20px", "22px"],
+                fontSize: ['18px', '20px', '22px'],
                 pb: [3, 3, 4],
-                maxWidth: "62ch",
+                maxWidth: '62ch'
               }}
             >
               Every day, thousands of Hack&nbsp;Clubbers gather online and
               in-person to make things with code. Whether you’re a beginner
               programmer or have years of experience, there’s a place for you at
-              Hack&nbsp;Club. Read about our{" "}
+              Hack&nbsp;Club. Read about our{' '}
               <Link href="/philosophy" target="_blank" rel="noopener">
                 hacker ethic
               </Link>
               .
             </Text>
-            <Grid columns={[1, 1, 1, "2.5fr 3fr"]} gap={[0, 3, 4]} pt={[3, 4]}>
+            <Grid columns={[1, 1, 1, '2.5fr 3fr']} gap={[0, 3, 4]} pt={[3, 4]}>
               <Box
                 sx={{
-                  position: "relative",
-                  height: ["300px", "300px", "300px", "100%"],
-                  py: [3, 3, 3, 0],
+                  position: 'relative',
+                  height: ['300px', '300px', '300px', '100%'],
+                  py: [3, 3, 3, 0]
                 }}
                 onClick={() => {
-                  setCount(count + 1);
+                  setCount(count + 1)
                 }}
               >
                 <Box
-                  sx={{ position: "absolute", width: "100%", height: "100%" }}
+                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
                 >
                   <Box
                     sx={{
-                      position: "relative",
-                      height: ["300px", "300px", "100%"],
+                      position: 'relative',
+                      height: ['300px', '300px', '100%'],
                       figure: {
-                        position: "absolute",
+                        position: 'absolute',
                         transform:
-                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
-                        height: "85%",
-                        width: ["80%", "80%", "70%", "100%"],
-                        marginLeft: ["10%", "10%", "15%", "0"],
+                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
+                        height: '85%',
+                        width: ['80%', '80%', '70%', '100%'],
+                        marginLeft: ['10%', '10%', '15%', '0']
                       },
                       zIndex: 3,
-                      "&:hover": {
-                        cursor: "pointer",
-                      },
+                      '&:hover': {
+                        cursor: 'pointer'
+                      }
                     }}
                   >
                     <Photo
@@ -409,24 +409,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: "absolute", width: "100%", height: "100%" }}
+                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
                 >
                   <Box
                     sx={{
-                      position: "relative",
-                      height: ["300px", "300px", "100%"],
+                      position: 'relative',
+                      height: ['300px', '300px', '100%'],
                       figure: {
-                        position: "absolute",
+                        position: 'absolute',
                         transform:
-                          count % 2 === 0 ? "rotate(-3deg)" : "rotate(3deg)",
-                        height: "85%",
-                        width: ["80%", "80%", "70%", "100%"],
-                        marginLeft: ["10%", "10%", "15%", "0"],
+                          count % 2 === 0 ? 'rotate(-3deg)' : 'rotate(3deg)',
+                        height: '85%',
+                        width: ['80%', '80%', '70%', '100%'],
+                        marginLeft: ['10%', '10%', '15%', '0']
                       },
                       zIndex: 3,
-                      "&:hover": {
-                        cursor: "pointer",
-                      },
+                      '&:hover': {
+                        cursor: 'pointer'
+                      }
                     }}
                   >
                     <Photo
@@ -447,24 +447,24 @@ function Page({
                   </Box>
                 </Box>
                 <Box
-                  sx={{ position: "absolute", width: "100%", height: "100%" }}
+                  sx={{ position: 'absolute', width: '100%', height: '100%' }}
                 >
                   <Box
                     sx={{
-                      position: "relative",
-                      height: ["300px", "300px", "100%"],
+                      position: 'relative',
+                      height: ['300px', '300px', '100%'],
                       figure: {
-                        position: "absolute",
+                        position: 'absolute',
                         transform:
-                          count % 2 === 0 ? "rotate(3deg)" : "rotate(-3deg)",
-                        height: "85%",
-                        width: ["80%", "80%", "70%", "100%"],
-                        marginLeft: ["10%", "10%", "15%", "0"],
+                          count % 2 === 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
+                        height: '85%',
+                        width: ['80%', '80%', '70%', '100%'],
+                        marginLeft: ['10%', '10%', '15%', '0']
                       },
                       zIndex: 3,
-                      "&:hover": {
-                        cursor: "pointer",
-                      },
+                      '&:hover': {
+                        cursor: 'pointer'
+                      }
                     }}
                   >
                     <Photo
@@ -485,28 +485,28 @@ function Page({
                     width: 36,
                     height: 36,
                     borderRadius: 24,
-                    display: "inline-block",
+                    display: 'inline-block',
                     fontSize: 2,
-                    lineHeight: "30px",
-                    textAlign: "center",
-                    fontWeight: "bold",
-                    border: "3px solid currentColor",
+                    lineHeight: '30px',
+                    textAlign: 'center',
+                    fontWeight: 'bold',
+                    border: '3px solid currentColor'
                   },
-                  p: { my: 0, fontSize: ["18px", "20px", "22px"] },
-                  strong: { display: "block", fontSize: ["22px", 2, 3] },
+                  p: { my: 0, fontSize: ['18px', '20px', '22px'] },
+                  strong: { display: 'block', fontSize: ['22px', 2, 3] }
                 }}
                 as="ul"
               >
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: "0.52s",
+                    transitionDuration: '0.52s',
                     py: 2,
                     px: 2,
-                    color: "inherit",
-                    position: "relative",
-                    textDecoration: "none",
-                    borderRadius: "extra",
+                    color: 'inherit',
+                    position: 'relative',
+                    textDecoration: 'none',
+                    borderRadius: 'extra'
                   }}
                   as="li"
                 >
@@ -518,9 +518,9 @@ function Page({
                       Connect with other teenage coders
                     </strong>
                     Have a coding question? Looking for project feedback? You’ll
-                    find hundreds of fabulous people to talk to in our global{" "}
+                    find hundreds of fabulous people to talk to in our global{' '}
                     <Link href="/slack" target="_blank" rel="noopener">
-                      Slack{" "}
+                      Slack{' '}
                     </Link>
                     (like Discord), active at all hours.
                   </Text>
@@ -528,13 +528,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: "0.52s",
+                    transitionDuration: '0.52s',
                     py: 2,
                     px: 2,
-                    color: "inherit",
-                    position: "relative",
-                    textDecoration: "none",
-                    borderRadius: "extra",
+                    color: 'inherit',
+                    position: 'relative',
+                    textDecoration: 'none',
+                    borderRadius: 'extra'
                   }}
                   as="li"
                 >
@@ -545,7 +545,7 @@ function Page({
                     as="p"
                     variant="subtitle"
                     sx={{
-                      mt: 0,
+                      mt: 0
                     }}
                   >
                     <strong sx={{ mb: 1 }}>
@@ -562,13 +562,13 @@ function Page({
                 <Grid
                   columns="auto 1fr"
                   sx={{
-                    transitionDuration: "0.52s",
+                    transitionDuration: '0.52s',
                     py: 2,
                     px: 2,
-                    color: "inherit",
-                    position: "relative",
-                    textDecoration: "none",
-                    borderRadius: "extra",
+                    color: 'inherit',
+                    position: 'relative',
+                    textDecoration: 'none',
+                    borderRadius: 'extra'
                   }}
                   as="li"
                 >
@@ -578,11 +578,11 @@ function Page({
                   <Text as="p" variant="subtitle">
                     <strong sx={{ mb: 1 }}>Gather IRL with other makers</strong>
                     Meet other Hack&nbsp;Clubbers in your community to build
-                    together at one of the 400+{" "}
+                    together at one of the 400+{' '}
                     <Link href="/clubs" target="_blank" rel="noopener">
                       Hack&nbsp;Clubs
-                    </Link>{" "}
-                    and{" "}
+                    </Link>{' '}
+                    and{' '}
                     <Link href="/hackathons" target="_blank" rel="noopener">
                       high school hackathons
                     </Link>
@@ -597,44 +597,44 @@ function Page({
         <Box
           as="section"
           sx={{
-            background: "snow",
+            background: 'snow',
             backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-            backgroundSize: "40px 40px",
-            backgroundRepeat: "repeat",
-            backgroundPosition: "10% 10%",
+            backgroundSize: '40px 40px',
+            backgroundRepeat: 'repeat',
+            backgroundPosition: '10% 10%'
           }}
         >
           <Box
             sx={{
-              position: "relative",
-              width: "90vw",
-              maxWidth: "layout",
-              margin: "auto",
+              position: 'relative',
+              width: '90vw',
+              maxWidth: 'layout',
+              margin: 'auto'
             }}
             py={[4, 4, 5]}
           >
             <Box>
-              <Text variant="title" sx={{ fontSize: ["36px", 4, 5] }}>
-                Connect with{" "}
+              <Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
+                Connect with{' '}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: "default",
+                    borderRadius: 'default',
                     px: 2,
                     mx: 0,
-                    whiteSpace: "nowrap",
-                    color: "white",
-                    bg: "red",
+                    whiteSpace: 'nowrap',
+                    color: 'white',
+                    bg: 'red'
                   }}
                 >
                   builders
-                </Text>{" "}
+                </Text>{' '}
                 from around the world
               </Text>
               <Text
                 variant="subtitle"
                 as="p"
-                sx={{ fontSize: ["18px", "20px", "22px"], pb: [3, 0, 0] }}
+                sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
               >
                 We gather both online and in-person to share our love of code
                 and make things together!
@@ -645,26 +645,26 @@ function Page({
           </Box>
         </Box>
         <Box>
-          <Box py={[4, 5, "82px"]}>
+          <Box py={[4, 5, '82px']}>
             <Box
               sx={{
-                width: "90vw",
-                maxWidth: "layout",
-                margin: "auto",
-                position: "relative",
+                width: '90vw',
+                maxWidth: 'layout',
+                margin: 'auto',
+                position: 'relative'
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["column", "column", "column", "row"],
-                  justifyContent: gitHubData ? "center" : "flex-start",
+                  flexDirection: ['column', 'column', 'column', 'row'],
+                  justifyContent: gitHubData ? 'center' : 'flex-start',
                   alignItems: [
-                    "flex-start",
-                    "flex-start",
-                    "flex-start",
-                    "center",
+                    'flex-start',
+                    'flex-start',
+                    'flex-start',
+                    'center'
                   ],
-                  gap: "10px",
+                  gap: '10px'
                 }}
               >
                 <Box sx={{ mb: [3, 0, 0] }}>
@@ -672,31 +672,31 @@ function Page({
                     variant="title"
                     as="h2"
                     sx={{
-                      fontSize: ["36px", "48px", "56px"],
-                      maxWidth: "20ch",
+                      fontSize: ['36px', '48px', '56px'],
+                      maxWidth: '20ch'
                     }}
                   >
-                    We build{" "}
+                    We build{' '}
                     <Text
                       as="span"
                       sx={{
-                        borderRadius: "default",
+                        borderRadius: 'default',
                         mx: 0,
-                        whiteSpace: "nowrap",
-                        color: "orange",
+                        whiteSpace: 'nowrap',
+                        color: 'orange'
                       }}
                     >
                       open source
-                    </Text>{" "}
+                    </Text>{' '}
                     games and tools together
                   </Text>
                   <Text
                     variant="subtitle"
                     as="p"
                     sx={{
-                      fontSize: ["18px", "20px", "22px"],
+                      fontSize: ['18px', '20px', '22px'],
                       pb: [3, 0, 0],
-                      maxWidth: "60ch",
+                      maxWidth: '60ch'
                     }}
                   >
                     In collaboration with engineers on the Hack&nbsp;Club team,
@@ -708,30 +708,30 @@ function Page({
                 {gitHubData && (
                   <Flex
                     sx={{
-                      flexDirection: ["row", null, null, "column"],
+                      flexDirection: ['row', null, null, 'column'],
                       gap: [1, 2, 2],
-                      alignItems: ["center", "center", "center", "flex-start"],
-                      flexWrap: "wrap",
-                      width: ["100%", null, null, "fit-content"],
+                      alignItems: ['center', 'center', 'center', 'flex-start'],
+                      flexWrap: 'wrap',
+                      width: ['100%', null, null, 'fit-content'],
 
-                      "& > a:nth-child(n+4)": {
-                        display: ["none", null, null, "flex"],
-                      },
+                      '& > a:nth-child(n+4)': {
+                        display: ['none', null, null, 'flex']
+                      }
                     }}
                   >
                     <Text
                       sx={{
-                        fontSize: ["11px", "11px", "14px"],
-                        textAlign: "left",
-                        lineHeight: "90%",
-                        fontStyle: "italic",
-                        width: "fit-content",
+                        fontSize: ['11px', '11px', '14px'],
+                        textAlign: 'left',
+                        lineHeight: '90%',
+                        fontStyle: 'italic',
+                        width: 'fit-content'
                       }}
                     >
                       Live from GitHub
                     </Text>
                     {gitHubData
-                      .filter((data) => !data.user.endsWith("[bot]"))
+                      .filter(data => !data.user.endsWith('[bot]'))
                       .slice(0, 4)
                       .map((data, key) => {
                         return (
@@ -744,7 +744,7 @@ function Page({
                             message={data.message}
                             key={key}
                           />
-                        );
+                        )
                       })}
                   </Flex>
                 )}
@@ -770,12 +770,12 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: "relative",
-              background: "snow",
+              position: 'relative',
+              background: 'snow',
               backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
-              backgroundSize: "40px 40px",
-              backgroundRepeat: "repeat",
-              backgroundPosition: "10% 10%",
+              backgroundSize: '40px 40px',
+              backgroundRepeat: 'repeat',
+              backgroundPosition: '10% 10%'
               // '&:hover': {
               //   backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
               // }
@@ -783,22 +783,22 @@ function Page({
           >
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
                 top: 0,
-                left: 0,
+                left: 0
               }}
             >
               {}
             </Box>
             <Box
-              py={[4, 5, "82px"]}
+              py={[4, 5, '82px']}
               sx={{
-                width: "90vw",
-                maxWidth: "layout",
-                margin: "auto",
-                position: "relative",
+                width: '90vw',
+                maxWidth: 'layout',
+                margin: 'auto',
+                position: 'relative'
               }}
             >
               <Box>
@@ -806,20 +806,20 @@ function Page({
                   variant="title"
                   as="h2"
                   sx={{
-                    fontSize: ["36px", "48px", "72px"],
-                    width: "18ch",
-                    textAlign: "center",
-                    margin: "auto",
+                    fontSize: ['36px', '48px', '72px'],
+                    width: '18ch',
+                    textAlign: 'center',
+                    margin: 'auto'
                   }}
                 >
-                  Find your{" "}
+                  Find your{' '}
                   <Text
                     as="span"
                     sx={{
-                      borderRadius: "default",
+                      borderRadius: 'default',
                       mx: 0,
-                      whiteSpace: "nowrap",
-                      color: "orange",
+                      whiteSpace: 'nowrap',
+                      color: 'orange'
                     }}
                   >
                     IRL community.
@@ -829,10 +829,10 @@ function Page({
                   variant="subtitle"
                   as="p"
                   sx={{
-                    fontSize: ["18px", "24px", "32px"],
-                    margin: "auto",
+                    fontSize: ['18px', '24px', '32px'],
+                    margin: 'auto',
                     pt: 2,
-                    textAlign: "center",
+                    textAlign: 'center'
                   }}
                 >
                   Thousands of Hack Clubbers organize and participate in
@@ -851,19 +851,19 @@ function Page({
             </Box>
           </Box>
         </Box>
-        <Box py={[4, 5, "82px"]}>
+        <Box py={[4, 5, '82px']}>
           <Box
             sx={{
-              width: "90vw",
-              maxWidth: "layout",
-              margin: "auto",
+              width: '90vw',
+              maxWidth: 'layout',
+              margin: 'auto'
             }}
           >
             <Box>
               <Text
                 as="p"
                 variant="eyebrow"
-                sx={{ fontSize: ["22px", 2, 3], textAlign: "center" }}
+                sx={{ fontSize: ['22px', 2, 3], textAlign: 'center' }}
               >
                 We've got a lot going on - Let’s recap
               </Text>
@@ -871,22 +871,22 @@ function Page({
                 variant="title"
                 as="h2"
                 sx={{
-                  fontSize: ["36px", "48px", "72px"],
-                  width: "16ch",
-                  textAlign: "center",
-                  margin: "auto",
+                  fontSize: ['36px', '48px', '72px'],
+                  width: '16ch',
+                  textAlign: 'center',
+                  margin: 'auto'
                 }}
               >
-                Find your second home at{" "}
+                Find your second home at{' '}
                 <Text
                   as="span"
                   sx={{
-                    borderRadius: "default",
+                    borderRadius: 'default',
                     ml: 0,
-                    whiteSpace: ["wrap", "nowrap"],
-                    background: (theme) => theme.util.gx("red", "orange"),
-                    "-webkit-background-clip": "text",
-                    "-webkit-text-fill-color": "transparent",
+                    whiteSpace: ['wrap', 'nowrap'],
+                    background: theme => theme.util.gx('red', 'orange'),
+                    '-webkit-background-clip': 'text',
+                    '-webkit-text-fill-color': 'transparent'
                   }}
                 >
                   Hack&nbsp;Club
@@ -899,17 +899,17 @@ function Page({
               gap={3}
               columns={[1, 2, 3]}
               sx={{
-                textAlign: "left",
-                "> a, > div": {
-                  borderRadius: "extra",
-                  boxShadow: "elevated",
-                  p: [3, null, 4],
+                textAlign: 'left',
+                '> a, > div': {
+                  borderRadius: 'extra',
+                  boxShadow: 'elevated',
+                  p: [3, null, 4]
                 },
                 span: {
                   boxShadow:
-                    "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                    '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
                 },
-                svg: { fill: "currentColor" },
+                svg: { fill: 'currentColor' }
               }}
             >
               <Card
@@ -920,20 +920,20 @@ function Page({
                 variant="interactive"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  color: "white",
-                  svg: { color: "rgb(51, 142, 218)" },
-                  position: "relative",
-                  ".icon": {
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  color: 'white',
+                  svg: { color: 'rgb(51, 142, 218)' },
+                  position: 'relative',
+                  '.icon': {
                     transition:
-                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-                  },
-                  ":hover,:focus": {
-                    ".icon": {
-                      transform: "translateX(28px) translateY(-28px)",
-                      opacity: 0,
-                    },
+                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
                   },
+                  ':hover,:focus': {
+                    '.icon': {
+                      transform: 'translateX(28px) translateY(-28px)',
+                      opacity: 0
+                    }
+                  }
                 }}
               >
                 <Icon
@@ -941,13 +941,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: "absolute",
+                    position: 'absolute',
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ["18px", "20px", "22px"],
+                    fontSize: ['18px', '20px', '22px'],
                     zIndex: 3,
-                    color: "white !important",
+                    color: 'white !important'
                   }}
                 />
                 <Stage
@@ -957,32 +957,32 @@ function Page({
                   desc="Connect with other technical teenagers on Slack and hack on things together."
                   sx={{
                     p: {
-                      fontSize: ["18px", "20px", "22px"],
+                      fontSize: ['18px', '20px', '22px']
                     },
                     h3: {
-                      fontSize: ["22px", 2, 3],
-                    },
+                      fontSize: ['22px', 2, 3]
+                    }
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-                  color: "white",
-                  svg: { color: "#fb558e" },
-                  textDecoration: "none",
-                  position: "relative",
-                  ".icon": {
+                    'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+                  color: 'white',
+                  svg: { color: '#fb558e' },
+                  textDecoration: 'none',
+                  position: 'relative',
+                  '.icon': {
                     transition:
-                      "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-                  },
-                  ":hover,:focus": {
-                    ".icon": {
-                      transform: "translateX(28px) translateY(-28px)",
-                      opacity: 0,
-                    },
+                      'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
                   },
+                  ':hover,:focus': {
+                    '.icon': {
+                      transform: 'translateX(28px) translateY(-28px)',
+                      opacity: 0
+                    }
+                  }
                 }}
                 as="a"
                 href="https://github.com/hackclub"
@@ -995,13 +995,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: "absolute",
+                    position: 'absolute',
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: [1, "16px", "20px"],
+                    fontSize: [1, '16px', '20px'],
                     zIndex: 3,
-                    color: "white !important",
+                    color: 'white !important'
                   }}
                 />
                 <Stage
@@ -1011,32 +1011,32 @@ function Page({
                   desc="We’re currently building a game engine, daily streak system, graphing game, and more!"
                   sx={{
                     p: {
-                      fontSize: [1, "16px", "20px"],
+                      fontSize: [1, '16px', '20px']
                     },
                     h3: {
-                      fontSize: ["22px", 2, 3],
-                    },
+                      fontSize: ['22px', 2, 3]
+                    }
                   }}
                 />
               </Card>
               <Card
                 sx={{
                   background:
-                    "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-                  color: "white",
-                  svg: { color: "rgb(236, 55, 80)" },
-                  textDecoration: "none",
-                  position: "relative",
-                  ".icon": {
+                    'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+                  color: 'white',
+                  svg: { color: 'rgb(236, 55, 80)' },
+                  textDecoration: 'none',
+                  position: 'relative',
+                  '.icon': {
                     transition:
-                      "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-                  },
-                  ":hover,:focus": {
-                    ".icon": {
-                      transform: "translateX(28px) translateY(-28px)",
-                      opacity: 0,
-                    },
+                      'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
                   },
+                  ':hover,:focus': {
+                    '.icon': {
+                      transform: 'translateX(28px) translateY(-28px)',
+                      opacity: 0
+                    }
+                  }
                 }}
                 as="a"
                 href="/clubs"
@@ -1049,13 +1049,13 @@ function Page({
                   size={32}
                   className="icon"
                   sx={{
-                    position: "absolute",
+                    position: 'absolute',
                     top: 2,
                     right: 2,
                     opacity: 0.3,
-                    fontSize: ["18px", "20px", "22px"],
+                    fontSize: ['18px', '20px', '22px'],
                     zIndex: 3,
-                    color: "white !important",
+                    color: 'white !important'
                   }}
                 />
                 <Stage
@@ -1065,11 +1065,11 @@ function Page({
                   desc="Build an in-person community of high school hackers, and we’re here to help."
                   sx={{
                     p: {
-                      fontSize: ["18px", "20px", "22px"],
+                      fontSize: ['18px', '20px', '22px']
                     },
                     h3: {
-                      fontSize: ["22px", 2, 3],
-                    },
+                      fontSize: ['22px', 2, 3]
+                    }
                   }}
                 />
               </Card>
@@ -1077,23 +1077,23 @@ function Page({
           </Box>
         </Box>
       </Box>
-      {new URL(asPath, "http://example.com").searchParams.get("gen") ===
-        "z" && (
+      {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
+        'z' && (
         <>
           <Box
             sx={{
-              position: "fixed",
+              position: 'fixed',
               top: 0,
-              width: "100%",
-              zIndex: 1000,
+              width: '100%',
+              zIndex: 1000
             }}
           >
             <Box
               sx={{
-                position: "relative",
-                margin: "auto",
-                width: "fit-content",
-                lineHeight: 0,
+                position: 'relative',
+                margin: 'auto',
+                width: 'fit-content',
+                lineHeight: 0
               }}
             >
               <iframe
@@ -1109,11 +1109,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: "fixed",
+              position: 'fixed',
               bottom: 0,
               right: 0,
               zIndex: 1000,
-              lineHeight: 0,
+              lineHeight: 0
             }}
           >
             <iframe
@@ -1128,11 +1128,11 @@ function Page({
           </Box>
           <Box
             sx={{
-              position: "fixed",
+              position: 'fixed',
               bottom: 0,
               left: 0,
               zIndex: 1000,
-              lineHeight: 0,
+              lineHeight: 0
             }}
           >
             <iframe
@@ -1151,16 +1151,16 @@ function Page({
       <Footer
         dark
         sx={{
-          backgroundColor: "dark",
-          position: "relative",
-          overflow: "hidden",
-          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-          "h2,span,p,a": { color: "white !important" },
-          "> div img": { objectPosition: ["left", "center"] },
+          backgroundColor: 'dark',
+          position: 'relative',
+          overflow: 'hidden',
+          textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+          'h2,span,p,a': { color: 'white !important' },
+          '> div img': { objectPosition: ['left', 'center'] },
           svg: {
-            fill: "white",
-            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-          },
+            fill: 'white',
+            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+          }
         }}
       >
         <style>
@@ -1170,73 +1170,73 @@ function Page({
         </style>
       </Footer>
     </>
-  );
+  )
 }
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 export async function getStaticProps() {
-  const carouselCards = require("../lib/carousel.json");
+  const carouselCards = require('../lib/carousel.json')
 
   // HCB: get total raised
-  let bankData = [];
-  let initialBankData = await fetch("https://hcb.hackclub.com/stats").then(
-    (r) => r.json(),
-  );
-  let raised = initialBankData.raised / 100;
+  let bankData = []
+  let initialBankData = await fetch('https://hcb.hackclub.com/stats').then(r =>
+    r.json()
+  )
+  let raised = initialBankData.raised / 100
 
   bankData.push(
-    `💰 ${raised.toLocaleString("en-US", {
-      style: "currency",
-      currency: "USD",
-    })} raised`,
-  );
+    `💰 ${raised.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    })} raised`
+  )
 
   // Slack: get total raised
-  const { Slack: Slacky } = require("./api/slack");
-  let slackData = await Slacky();
+  const { Slack: Slacky } = require('./api/slack')
+  let slackData = await Slacky()
 
   // GitHub: get latest github activity (currently this is erroring and
   // preventing the site from deploying
 
-  const { fetchGitHub } = require("./api/github");
-  let gitHubData = await fetchGitHub();
+  const { fetchGitHub } = require('./api/github')
+  let gitHubData = await fetchGitHub()
 
   //   let gitHubData = null
 
   // GitHub: get latest GitHub stars
-  const { fetchStars } = require("./api/stars");
-  let stars = await fetchStars();
+  const { fetchStars } = require('./api/stars')
+  let stars = await fetchStars()
 
   // Sprig: get newest games
-  const { getGames } = require("./api/games");
-  let game = await getGames();
+  const { getGames } = require('./api/games')
+  let game = await getGames()
 
-  let gameTitle = [];
+  let gameTitle = []
 
-  gameTitle = game.map((r) => r.title);
+  gameTitle = game.map(r => r.title)
 
   // Sprig: get console count
-  const { getConsoles } = require("./api/sprig-console");
-  const consoleCount = await getConsoles();
+  const { getConsoles } = require('./api/sprig-console')
+  const consoleCount = await getConsoles()
 
   // Hackathons: get latest hackathons
-  let hackathonsData;
+  let hackathonsData
   try {
     const response = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+      'https://hackathons.hackclub.com/api/events/upcoming'
+    )
     if (response.ok) {
-      hackathonsData = await response.json();
+      hackathonsData = await response.json()
     } else {
-      hackathonsData = []; // or some default value if the fetch fails
+      hackathonsData = [] // or some default value if the fetch fails
     }
   } catch (error) {
-    hackathonsData = []; // or some default value if an error occurs
+    hackathonsData = [] // or some default value if an error occurs
   }
 
   let events = await fetch(
-    "https://events.hackclub.com/api/events/upcoming/",
-  ).then((res) => res.json());
+    'https://events.hackclub.com/api/events/upcoming/'
+  ).then(res => res.json())
 
   return {
     props: {
@@ -1249,10 +1249,10 @@ export async function getStaticProps() {
       slackData,
       stars,
       events,
-      carouselCards,
+      carouselCards
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
 
-export default Page;
+export default Page
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/onboard.js b/pages/onboard.js
index 0a1085408..9ef14650d 100644
--- a/pages/onboard.js
+++ b/pages/onboard.js
@@ -1,35 +1,35 @@
-import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from "theme-ui";
-import Balancer from "react-wrap-balancer";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import Sparkles from "../components/sparkles";
-import Tilt from "../components/tilt";
-import usePrefersReducedMotion from "../lib/use-prefers-reduced-motion";
-import { useRef, useEffect, useState } from "react";
+import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from 'theme-ui'
+import Balancer from 'react-wrap-balancer'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import Sparkles from '../components/sparkles'
+import Tilt from '../components/tilt'
+import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
+import { useRef, useEffect, useState } from 'react'
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
  */
 const traceSx = {
   width: 6,
-  bg: "#e2b747",
-  alignSelf: "stretch",
+  bg: '#e2b747',
+  alignSelf: 'stretch',
   mr: 100,
-  position: "relative",
-};
+  position: 'relative'
+}
 
-const dimBg = "#151515";
+const dimBg = '#151515'
 
 // Beloved classic utility function :3
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 // "LET'S RECAP" pixel art (exported from Piskel)
 // Original: https://doggo.ninja/fiK0nk.piskel
-const recapWidth = 71;
-const recapHeight = 10;
+const recapWidth = 71
+const recapHeight = 10
 const recapPixels = [
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
   0x00000000, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff,
@@ -149,140 +149,140 @@ const recapPixels = [
   0xffffffff, 0xffffffff, 0xffffffff, 0xffffffff, 0x00000000, 0xffffffff,
   0xffffffff, 0x00000000, 0x00000000, 0xffffffff, 0xffffffff, 0x00000000,
   0xffffffff, 0xffffffff, 0x00000000, 0x00000000, 0x00000000, 0x00000000,
-  0xffffffff, 0xffffffff,
-];
+  0xffffffff, 0xffffffff
+]
 
-const slackLink = "/slack/?event=onboard";
+const slackLink = '/slack/?event=onboard'
 
-const stickerButtonText = "Click 4 Stickers";
-const stickerButtonFont = "Oleo Script";
+const stickerButtonText = 'Click 4 Stickers'
+const stickerButtonFont = 'Oleo Script'
 const stickerButtonFontStylesheet = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-  stickerButtonFont,
-)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`;
+  stickerButtonFont
+)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`
 
 const wandImgTraced =
-  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png";
+  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png'
 const wandImgRendered =
-  "https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png";
+  'https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png'
 
 const ShipPage = () => {
-  const prefersReducedMotion = usePrefersReducedMotion();
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   // Wand flicker animation
-  const [wandImg, setWandImg] = useState(wandImgTraced);
-  const wandAnimated = useRef(false);
+  const [wandImg, setWandImg] = useState(wandImgTraced)
+  const wandAnimated = useRef(false)
   useEffect(() => {
-    let canceled = false;
+    let canceled = false
 
     const flicker = async () => {
-      if (canceled) return;
-      setWandImg(wandImgTraced);
-      await sleep(Math.random() * 80 + 10);
-      if (canceled) return;
-      setWandImg(wandImgRendered);
-      setTimeout(flicker, Math.random() * 4000 + 500);
-    };
+      if (canceled) return
+      setWandImg(wandImgTraced)
+      await sleep(Math.random() * 80 + 10)
+      if (canceled) return
+      setWandImg(wandImgRendered)
+      setTimeout(flicker, Math.random() * 4000 + 500)
+    }
 
     const animate = async () => {
-      if (wandAnimated.current) return;
-      wandAnimated.current = true;
-
-      await sleep(1500);
-      if (canceled) return;
-
-      setWandImg(wandImgRendered);
-      await sleep(60);
-      if (canceled) return;
-      setWandImg(wandImgTraced);
-      await sleep(340);
-      if (canceled) return;
-
-      setWandImg(wandImgRendered);
-      await sleep(14);
-      if (canceled) return;
-      setWandImg(wandImgTraced);
-      await sleep(55);
-      if (canceled) return;
-
-      setWandImg(wandImgRendered);
-      await sleep(10);
-      if (canceled) return;
-      setWandImg(wandImgTraced);
-      await sleep(150);
-      if (canceled) return;
-
-      setWandImg(wandImgRendered);
-      setTimeout(flicker, 1200);
-    };
+      if (wandAnimated.current) return
+      wandAnimated.current = true
+
+      await sleep(1500)
+      if (canceled) return
+
+      setWandImg(wandImgRendered)
+      await sleep(60)
+      if (canceled) return
+      setWandImg(wandImgTraced)
+      await sleep(340)
+      if (canceled) return
+
+      setWandImg(wandImgRendered)
+      await sleep(14)
+      if (canceled) return
+      setWandImg(wandImgTraced)
+      await sleep(55)
+      if (canceled) return
+
+      setWandImg(wandImgRendered)
+      await sleep(10)
+      if (canceled) return
+      setWandImg(wandImgTraced)
+      await sleep(150)
+      if (canceled) return
+
+      setWandImg(wandImgRendered)
+      setTimeout(flicker, 1200)
+    }
 
     if (prefersReducedMotion) {
-      setWandImg(wandImgRendered);
+      setWandImg(wandImgRendered)
     } else {
-      animate();
+      animate()
     }
 
-    return () => (canceled = true);
-  }, [prefersReducedMotion]);
+    return () => (canceled = true)
+  }, [prefersReducedMotion])
 
   // Spotlight effect
-  const spotlightRef = useRef();
+  const spotlightRef = useRef()
   useEffect(() => {
-    const handler = (event) => {
+    const handler = event => {
       spotlightRef.current.style.background = `radial-gradient(
 				circle at ${event.pageX}px ${event.pageY}px,
 				rgba(0, 0, 0, 0) 10px,
 				rgba(0, 0, 0, 0.8) 80px
-			)`;
-    };
-    window.addEventListener("mousemove", handler);
-    return () => window.removeEventListener("mousemove", handler);
-  }, []);
+			)`
+    }
+    window.addEventListener('mousemove', handler)
+    return () => window.removeEventListener('mousemove', handler)
+  }, [])
 
   // Calculating the bus height to match the bottom left of the first connector.
-  const [busHeight, setBusHeight] = useState(null);
-  const containerRef = useRef(); // For ResizeObserver
-  const connectorRef = useRef(); // To get bottom left position
-  const busRef = useRef(); // To calculate height differential
+  const [busHeight, setBusHeight] = useState(null)
+  const containerRef = useRef() // For ResizeObserver
+  const connectorRef = useRef() // To get bottom left position
+  const busRef = useRef() // To calculate height differential
 
   useEffect(() => {
     const observer = new ResizeObserver(() => {
-      const connectorRect = connectorRef.current.getBoundingClientRect();
-      const busRect = busRef.current.getBoundingClientRect();
-      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5);
-    });
+      const connectorRect = connectorRef.current.getBoundingClientRect()
+      const busRect = busRef.current.getBoundingClientRect()
+      setBusHeight(busRect.bottom - connectorRect.bottom + 4.5)
+    })
 
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, []);
+    observer.observe(containerRef.current)
+    return () => observer.disconnect()
+  }, [])
 
   // Fancy lights animation
-  const lightsScrollTrigger = useRef();
-  const lightsAnimated = useRef(false);
+  const lightsScrollTrigger = useRef()
+  const lightsAnimated = useRef(false)
   useEffect(() => {
-    let canceled = false;
+    let canceled = false
 
     const setAtIndex = (i, color) => {
-      if (canceled) return;
+      if (canceled) return
 
       // Going outside of React for performance
-      const el = document.getElementById(`pixel-${i}`);
-      if (!el) return;
+      const el = document.getElementById(`pixel-${i}`)
+      if (!el) return
 
       if (recapPixels[i]) {
-        el.style.background = color;
-        el.style.boxShadow = `0 0 10px ${color}`;
+        el.style.background = color
+        el.style.boxShadow = `0 0 10px ${color}`
       } else {
-        el.style.background = dimBg;
-        el.style.boxShadow = "none";
+        el.style.background = dimBg
+        el.style.boxShadow = 'none'
       }
-    };
-    const setAll = (color) => {
-      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color);
-    };
+    }
+    const setAll = color => {
+      for (let i = 0; i < recapPixels.length; i++) setAtIndex(i, color)
+    }
 
     const animate = async () => {
-      if (lightsAnimated.current) return;
-      lightsAnimated.current = true;
+      if (lightsAnimated.current) return
+      lightsAnimated.current = true
 
       // Illuminate lights in diagonal lines starting with only top left.
       for (
@@ -295,66 +295,66 @@ const ShipPage = () => {
           offset >= Math.max(0, curColumn - recapHeight);
           offset--
         ) {
-          const i = curColumn * recapWidth + offset - offset * recapWidth;
-          setAtIndex(i, "#ffffff");
-          if (!recapPixels[i]) await sleep(4);
-          if (canceled) return;
+          const i = curColumn * recapWidth + offset - offset * recapWidth
+          setAtIndex(i, '#ffffff')
+          if (!recapPixels[i]) await sleep(4)
+          if (canceled) return
         }
         // await sleep(2); if (canceled) return
       }
 
       // Flash the lights twice
-      await sleep(600);
-      if (canceled) return;
+      await sleep(600)
+      if (canceled) return
 
-      setAll(dimBg);
-      await sleep(80);
-      if (canceled) return;
+      setAll(dimBg)
+      await sleep(80)
+      if (canceled) return
 
-      setAll("#aaaaaa");
-      await sleep(20);
-      if (canceled) return;
+      setAll('#aaaaaa')
+      await sleep(20)
+      if (canceled) return
 
-      setAll(dimBg);
-      await sleep(30);
-      if (canceled) return;
+      setAll(dimBg)
+      await sleep(30)
+      if (canceled) return
 
-      setAll("#aaaaaa");
-      await sleep(100);
-      if (canceled) return;
+      setAll('#aaaaaa')
+      await sleep(100)
+      if (canceled) return
 
-      setAll(dimBg);
-      await sleep(200);
-      if (canceled) return;
+      setAll(dimBg)
+      await sleep(200)
+      if (canceled) return
 
       // Animate rainbow 2-column increments
       for (let x = 0; x < recapWidth; x++) {
-        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`;
+        const color = `hsl(${(x * 360) / recapWidth}, 100%, 65%)`
         for (let y = 0; y < recapHeight; y++) {
-          const i = y * recapWidth + x;
-          setAtIndex(i, color);
+          const i = y * recapWidth + x
+          setAtIndex(i, color)
         }
-        if (x % 2 === 1) await sleep(35);
+        if (x % 2 === 1) await sleep(35)
       }
-    };
+    }
 
     if (prefersReducedMotion) {
-      if (!lightsAnimated.current) setAll("#ffffff");
-      return () => (canceled = true);
+      if (!lightsAnimated.current) setAll('#ffffff')
+      return () => (canceled = true)
     } else {
       const observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting) animate();
+          if (entry.isIntersecting) animate()
         },
-        { threshold: 0.5 },
-      );
-      observer.observe(lightsScrollTrigger.current);
+        { threshold: 0.5 }
+      )
+      observer.observe(lightsScrollTrigger.current)
       return () => {
-        canceled = true;
-        observer.disconnect();
-      };
+        canceled = true
+        observer.disconnect()
+      }
     }
-  }, [prefersReducedMotion]);
+  }, [prefersReducedMotion])
 
   return (
     <>
@@ -393,54 +393,54 @@ const ShipPage = () => {
       <Box
         as="header"
         sx={{
-          bg: "#000000",
+          bg: '#000000',
           backgroundImage: `
 						linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
 						url('https://cloud-dst3a9oz5-hack-club-bot.vercel.app/0image.png')
 					`,
-          color: "#ffffff",
-          position: "relative",
+          color: '#ffffff',
+          position: 'relative'
         }}
       >
         <Box
           ref={spotlightRef}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             zIndex: 2,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            bg: "#000000",
-            pointerEvents: "none",
+            bg: '#000000',
+            pointerEvents: 'none'
           }}
         />
 
         <Flex
           sx={{
             p: 4,
-            flexDirection: "column",
-            alignItems: "center",
+            flexDirection: 'column',
+            alignItems: 'center',
             zIndex: 5,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Flex
             sx={{
               pt: 80,
-              width: "100%",
-              maxWidth: "layout",
-              alignItems: "center",
+              width: '100%',
+              maxWidth: 'layout',
+              alignItems: 'center'
             }}
           >
-            <Flex sx={{ flex: 1, flexDirection: "column", gap: 25 }}>
+            <Flex sx={{ flex: 1, flexDirection: 'column', gap: 25 }}>
               <Heading
                 as="h1"
                 sx={{
                   fontSize: 80,
-                  maxWidth: "copyPlus",
-                  textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
-                  color: "#87ffa1",
+                  maxWidth: 'copyPlus',
+                  textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
+                  color: '#87ffa1'
                 }}
               >
                 <Balancer ratio={0.3}>OnBoard</Balancer>
@@ -448,10 +448,10 @@ const ShipPage = () => {
 
               <Heading
                 as="div"
-                sx={{ fontSize: 4, fontWeight: 400, maxWidth: "copyPlus" }}
+                sx={{ fontSize: 4, fontWeight: 400, maxWidth: 'copyPlus' }}
               >
                 <Balancer ratio={0.3}>
-                  Circuit boards are{" "}
+                  Circuit boards are{' '}
                   <Sparkles>
                     <Text sx={{ fontWeight: 400 }}>magical</Text>
                   </Sparkles>
@@ -466,7 +466,7 @@ const ShipPage = () => {
                   href="https://hack.af/pcb-jam"
                   target="_blank"
                   sx={{
-                    background: (t) => t.util.gx("#60cc38", "#113b11"),
+                    background: t => t.util.gx('#60cc38', '#113b11')
                   }}
                 >
                   Learn PCB Design Now!
@@ -478,8 +478,8 @@ const ShipPage = () => {
                   href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                   target="_blank"
                   sx={{
-                    borderColor: "#113b11",
-                    color: "#60cc38",
+                    borderColor: '#113b11',
+                    color: '#60cc38'
                   }}
                 >
                   Get a Grant
@@ -504,8 +504,8 @@ const ShipPage = () => {
               pb: 35,
               fontSize: 36,
               fontWeight: 500,
-              maxWidth: "copy",
-              textAlign: "center",
+              maxWidth: 'copy',
+              textAlign: 'center'
             }}
           >
             <Balancer ratio={0.8}>
@@ -519,12 +519,12 @@ const ShipPage = () => {
             sx={{
               fontSize: 2,
               h3: { fontSize: 2 },
-              width: "100%",
-              maxWidth: "layout",
-              pb: 40,
+              width: '100%',
+              maxWidth: 'layout',
+              pb: 40
             }}
           >
-            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
               <Text as="h3">Community & Friends</Text>
               <Text as="p">
                 Share your progress and ask for help with Hack Club teens who
@@ -532,7 +532,7 @@ const ShipPage = () => {
               </Text>
             </Flex>
 
-            <Flex as="article" sx={{ flexDirection: "column", gap: 2 }}>
+            <Flex as="article" sx={{ flexDirection: 'column', gap: 2 }}>
               <Text as="h3">Free Manufacturing</Text>
               <Text as="p">
                 We’ll pay $100 to cover manufacturing costs, enough for 2-3
@@ -550,16 +550,16 @@ const ShipPage = () => {
           pt: 6,
           pb: 4,
           bg: dimBg,
-          color: "#ffffff",
-          justifyContent: "center",
+          color: '#ffffff',
+          justifyContent: 'center'
         }}
       >
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             gap: 4,
-            width: "100%",
-            maxWidth: "copyPlus",
+            width: '100%',
+            maxWidth: 'copyPlus'
           }}
         >
           <Heading
@@ -567,9 +567,9 @@ const ShipPage = () => {
             sx={{
               fontSize: 42,
               fontWeight: 500,
-              borderTop: "4px solid",
-              borderTopColor: "red",
-              pt: 4,
+              borderTop: '4px solid',
+              borderTopColor: 'red',
+              pt: 4
             }}
           >
             <Balancer ratio={0.3}>
@@ -577,15 +577,15 @@ const ShipPage = () => {
             </Balancer>
           </Heading>
           <Text sx={{ fontSize: 3 }}>
-            Learn how to design your own circuit boards from scratch with our{" "}
-            <strong>official tutorials</strong> and jams, like Maggie’s{" "}
+            Learn how to design your own circuit boards from scratch with our{' '}
+            <strong>official tutorials</strong> and jams, like Maggie’s{' '}
             <Link href="https://hack.af/pcb-jam" target="_blank">
               intro to PCB design jam
             </Link>
-            . Ask in the{" "}
+            . Ask in the{' '}
             <Link href={slackLink} target="_blank">
               Hack Club Slack
-            </Link>{" "}
+            </Link>{' '}
             if you have any questions!
           </Text>
         </Flex>
@@ -594,27 +594,27 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: "hidden",
+          overflowX: 'hidden',
           px: 4,
           py: 5,
           pb: 6,
           bg: dimBg,
-          color: "#ffffff",
-          justifyContent: "center",
+          color: '#ffffff',
+          justifyContent: 'center'
         }}
       >
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "center",
+            flexDirection: 'column',
+            alignItems: 'center',
             gap: 4,
-            width: "100%",
-            maxWidth: "copyPlus",
+            width: '100%',
+            maxWidth: 'copyPlus'
           }}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 36, fontWeight: 500, textAlign: "center" }}
+            sx={{ fontSize: 36, fontWeight: 500, textAlign: 'center' }}
           >
             <Balancer>What have people made already?</Balancer>
           </Heading>
@@ -623,39 +623,39 @@ const ShipPage = () => {
             width={350}
             gap={3}
             sx={{
-              width: "100%",
+              width: '100%',
               fontSize: 2,
               a: {
-                display: "block",
-                position: "relative",
-                bg: "#000000",
-                borderRadius: "default",
+                display: 'block',
+                position: 'relative',
+                bg: '#000000',
+                borderRadius: 'default',
                 px: 3,
                 py: 4,
-                color: "inherit",
-                textDecoration: "inherit",
-                ".arrow": {
-                  position: "relative",
-                  left: "0px",
-                  top: "1px", // Looks more aligned with text.
-                  display: "inline-block",
-                  transition: "left 80ms ease-in",
-                },
-                "&:hover .arrow": {
-                  left: "4px",
+                color: 'inherit',
+                textDecoration: 'inherit',
+                '.arrow': {
+                  position: 'relative',
+                  left: '0px',
+                  top: '1px', // Looks more aligned with text.
+                  display: 'inline-block',
+                  transition: 'left 80ms ease-in'
                 },
+                '&:hover .arrow': {
+                  left: '4px'
+                }
               },
               article: {
-                flexDirection: "column",
+                flexDirection: 'column',
                 gap: 3,
-                justifyContent: "center",
-                height: "100%",
-                zIndex: 1,
+                justifyContent: 'center',
+                height: '100%',
+                zIndex: 1
               },
               img: {
-                pointerEvents: "none",
-                zIndex: 2,
-              },
+                pointerEvents: 'none',
+                zIndex: 2
+              }
             }}
           >
             <a
@@ -666,7 +666,7 @@ const ShipPage = () => {
                 <Text as="p" sx={{ pr: 115 }}>
                   A <strong>fidget spinner</strong> without any moving parts.
                 </Text>
-                <Text as="p" sx={{ pr: 100, color: "gray" }}>
+                <Text as="p" sx={{ pr: 100, color: 'gray' }}>
                   See Micha's work&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -675,9 +675,9 @@ const ShipPage = () => {
                   alt="A red circular circuit board with a graphic of white fidget spinner on it."
                   sx={{
                     maxWidth: 120,
-                    position: "absolute",
+                    position: 'absolute',
                     top: 40,
-                    right: 10,
+                    right: 10
                   }}
                 />
               </Flex>
@@ -689,10 +689,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: 100 }}>
-                  A <strong>movement sensor</strong> add-on to an open source{" "}
+                  A <strong>movement sensor</strong> add-on to an open source{' '}
                   <strong>game console</strong>.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: "gray" }}>
+                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
                   Read the source&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
@@ -700,9 +700,9 @@ const ShipPage = () => {
                   alt="A black circuit board for a game console with copper wiring."
                   sx={{
                     maxWidth: 280,
-                    position: "absolute",
+                    position: 'absolute',
                     bottom: -40,
-                    right: -75,
+                    right: -75
                   }}
                 />
               </Flex>
@@ -714,10 +714,10 @@ const ShipPage = () => {
             >
               <Flex as="article">
                 <Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
-                  Hugo's <strong>USB-C hub</strong> for the best{" "}
+                  Hugo's <strong>USB-C hub</strong> for the best{' '}
                   <strong>hackathon swag</strong> ever.
                 </Text>
-                <Text as="p" sx={{ color: "gray", pr: 150 }}>
+                <Text as="p" sx={{ color: 'gray', pr: 150 }}>
                   Build one for your event&nbsp;
                   <span className="arrow">&rarr;</span>
                 </Text>
@@ -729,8 +729,8 @@ const ShipPage = () => {
                     right: -15,
                     bottom: -10,
                     maxWidth: 260,
-                    position: "absolute",
-                    zIndex: 6,
+                    position: 'absolute',
+                    zIndex: 6
                   }}
                 />
               </Flex>
@@ -745,18 +745,18 @@ const ShipPage = () => {
                   Karmanyaah's <strong>digital level</strong> in the shape of a
                   longhorn.
                 </Text>
-                <Text as="p" sx={{ pr: 140, color: "gray" }}>
+                <Text as="p" sx={{ pr: 140, color: 'gray' }}>
                   See the designs&nbsp;<span className="arrow">&rarr;</span>
                 </Text>
                 <Image
                   src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
                   alt="A longhorn-shaped PCB with glowing horns."
                   sx={{
-                    position: "absolute",
+                    position: 'absolute',
                     top: 40,
                     right: -30,
                     maxWidth: 230,
-                    transform: "rotate(20deg)",
+                    transform: 'rotate(20deg)'
                   }}
                 />
               </Flex>
@@ -780,24 +780,24 @@ const ShipPage = () => {
         sx={{
           px: 4,
           pt: 5,
-          bg: "#ffffff",
-          color: "#000000",
-          justifyContent: "center",
+          bg: '#ffffff',
+          color: '#000000',
+          justifyContent: 'center'
         }}
       >
         <Flex
           as="section"
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             gap: 4,
-            width: "100%",
-            maxWidth: "layout",
+            width: '100%',
+            maxWidth: 'layout'
           }}
           ref={containerRef}
         >
           <Heading
             as="h2"
-            sx={{ fontSize: 5, fontWeight: 500, textAlign: "center" }}
+            sx={{ fontSize: 5, fontWeight: 500, textAlign: 'center' }}
           >
             How to Qualify
           </Heading>
@@ -806,29 +806,29 @@ const ShipPage = () => {
             <Box
               sx={{
                 ...traceSx,
-                alignSelf: "flex-end",
-                height: busHeight,
+                alignSelf: 'flex-end',
+                height: busHeight
               }}
               ref={busRef}
             />
 
             <Flex
               sx={{
-                flexDirection: ["column", "column", "row"],
+                flexDirection: ['column', 'column', 'row'],
                 flex: 1,
                 gap: 5,
-                pb: 5,
+                pb: 5
               }}
             >
               <Flex
                 as="ul"
                 sx={{
-                  flexDirection: "column",
+                  flexDirection: 'column',
                   fontSize: 24,
-                  listStyleType: "none",
+                  listStyleType: 'none',
                   gap: 4,
                   flex: 1,
-                  p: 0,
+                  p: 0
                 }}
               >
                 {[
@@ -841,7 +841,7 @@ const ShipPage = () => {
                     screenshot.
                   </>,
                   <>
-                    <strong>Open source your design</strong> on GitHub and{" "}
+                    <strong>Open source your design</strong> on GitHub and{' '}
                     <Link
                       href="https://github.com/hackclub/OnBoard/blob/main/README.md"
                       target="_blank"
@@ -849,15 +849,15 @@ const ShipPage = () => {
                       apply for the grant
                     </Link>
                     ! You must be a teenager in high school to apply.
-                  </>,
+                  </>
                 ].map((text, i) => (
                   <Text
                     as="li"
                     key={i}
                     sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      position: "relative",
+                      display: 'flex',
+                      alignItems: 'center',
+                      position: 'relative'
                     }}
                   >
                     <Box
@@ -865,11 +865,11 @@ const ShipPage = () => {
                         width: 30,
                         height: 30,
                         borderWidth: traceSx.width,
-                        borderStyle: "solid",
+                        borderStyle: 'solid',
                         borderColor: traceSx.bg,
-                        borderRadius: "50%",
-                        left: (t) => -60,
-                        position: "absolute",
+                        borderRadius: '50%',
+                        left: t => -60,
+                        position: 'absolute'
                       }}
                     >
                       <Box
@@ -881,11 +881,11 @@ const ShipPage = () => {
                           width: traceSx.width,
                           height: 69,
                           bg: traceSx.bg,
-                          position: "absolute",
-                          transform: "rotate(45deg)",
-                          transformOrigin: "top right",
-                          top: "20.5px",
-                          left: "-5px",
+                          position: 'absolute',
+                          transform: 'rotate(45deg)',
+                          transformOrigin: 'top right',
+                          top: '20.5px',
+                          left: '-5px'
                         }}
                       />
                     </Box>
@@ -903,8 +903,8 @@ const ShipPage = () => {
                   sx={{
                     flex: 1,
                     maxWidth: 350,
-                    objectFit: "contain",
-                    mt: ["-40px", "-40px", 0],
+                    objectFit: 'contain',
+                    mt: ['-40px', '-40px', 0]
                   }}
                 />
               </Tilt>
@@ -916,26 +916,26 @@ const ShipPage = () => {
       <Flex
         sx={{
           px: 4,
-          bg: "#000000",
-          color: "#ffffff",
-          justifyContent: "center",
+          bg: '#000000',
+          color: '#ffffff',
+          justifyContent: 'center'
         }}
       >
-        <Flex as="section" sx={{ width: "100%", maxWidth: "layout" }}>
+        <Flex as="section" sx={{ width: '100%', maxWidth: 'layout' }}>
           <Box sx={traceSx}>
             <Box
               sx={{
                 height: traceSx.width,
                 width: 40,
                 bg: traceSx.bg,
-                position: "absolute",
+                position: 'absolute',
                 bottom: 0,
-                left: -20 + traceSx.width / 2,
+                left: -20 + traceSx.width / 2
               }}
             />
           </Box>
 
-          <Flex sx={{ flex: 1, flexDirection: "column", gap: 4, py: 5 }}>
+          <Flex sx={{ flex: 1, flexDirection: 'column', gap: 4, py: 5 }}>
             <Heading as="h2" sx={{ fontSize: 36, fontWeight: 500 }}>
               <Balancer>Join the Hack Club Slack</Balancer>
             </Heading>
@@ -960,35 +960,35 @@ const ShipPage = () => {
       <Flex
         as="section"
         sx={{
-          overflowX: "hidden",
+          overflowX: 'hidden',
           px: 4,
           py: 6,
-          bg: "#000000",
-          color: "#ffffff",
-          justifyContent: "center",
+          bg: '#000000',
+          color: '#ffffff',
+          justifyContent: 'center'
         }}
       >
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "center",
+            flexDirection: 'column',
+            alignItems: 'center',
             gap: 5,
-            width: "100%",
-            maxWidth: "layout",
+            width: '100%',
+            maxWidth: 'layout'
           }}
         >
           {/* For accessibility and screen readers: */}
           <Heading
             as="h2"
             sx={{
-              position: "absolute",
-              width: "1px",
-              height: "1px",
-              margin: "-1px",
-              overflow: "hidden",
-              clip: "rect(0, 0, 0, 0)",
-              whiteSpace: "nowrap",
-              borderWidth: 0,
+              position: 'absolute',
+              width: '1px',
+              height: '1px',
+              margin: '-1px',
+              overflow: 'hidden',
+              clip: 'rect(0, 0, 0, 0)',
+              whiteSpace: 'nowrap',
+              borderWidth: 0
             }}
           >
             Let's Recap
@@ -996,15 +996,15 @@ const ShipPage = () => {
 
           <Grid
             ref={lightsScrollTrigger}
-            gap={["2px", "3px", "4px"]}
+            gap={['2px', '3px', '4px']}
             columns={recapWidth}
-            sx={{ width: "100%", maxWidth: 800 }}
+            sx={{ width: '100%', maxWidth: 800 }}
           >
             {recapPixels.map((_, i) => (
               <Box
                 id={`pixel-${i}`}
                 key={i}
-                sx={{ bg: dimBg, paddingTop: "100%" }}
+                sx={{ bg: dimBg, paddingTop: '100%' }}
               />
             ))}
           </Grid>
@@ -1013,23 +1013,23 @@ const ShipPage = () => {
             width={300}
             gap={4}
             sx={{
-              width: "100%",
+              width: '100%',
               article: {
                 bg: dimBg,
-                borderRadius: "default",
+                borderRadius: 'default',
                 p: 4,
-                flexDirection: "column",
-                boxShadow: "inset 0px 0px 14px rgba(255, 255, 255, 0.15);",
+                flexDirection: 'column',
+                boxShadow: 'inset 0px 0px 14px rgba(255, 255, 255, 0.15);'
               },
               h3: {
                 fontSize: 3,
-                mb: 3,
+                mb: 3
               },
               p: {
                 fontSize: 18,
                 pb: 3,
-                mb: "6px",
-              },
+                mb: '6px'
+              }
             }}
           >
             <Flex as="article">
@@ -1051,7 +1051,7 @@ const ShipPage = () => {
             <Flex
               as="article"
               sx={{
-                transform: "scale(1.1)",
+                transform: 'scale(1.1)'
               }}
             >
               <Text as="h3">Learn to PCB</Text>
@@ -1078,16 +1078,16 @@ const ShipPage = () => {
         </Flex>
       </Flex>
 
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         <Image
           src="https://cloud-f4lij7sq1-hack-club-bot.vercel.app/0flowerpcb.png"
           alt="A big image of several pink flower-shaped PCBs."
           loading="lazy"
           sx={{
-            display: "block",
-            width: "100%",
+            display: 'block',
+            width: '100%',
             height: 500,
-            objectFit: "cover",
+            objectFit: 'cover'
           }}
         />
 
@@ -1096,44 +1096,44 @@ const ShipPage = () => {
           href="https://airtable.com/shrOOU2ZZFYtffUVz"
           target="_blank"
           sx={{
-            bg: "#ff0000",
-            color: "rgba(255, 255, 255, 0.7)",
-            textDecoration: "none",
+            bg: '#ff0000',
+            color: 'rgba(255, 255, 255, 0.7)',
+            textDecoration: 'none',
             size: 160,
-            flexDirection: "column",
-            textAlign: "center",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            flexDirection: 'column',
+            textAlign: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: -80,
-            right: "14vw",
-            fontSize: "24px",
+            right: '14vw',
+            fontSize: '24px',
             lineHeight: 1.2,
-            fontWeight: "bold",
+            fontWeight: 'bold',
             fontFamily: `'${stickerButtonFont}', cursive`,
-            transform: "rotate(-25deg)",
-            borderRadius: "50%",
+            transform: 'rotate(-25deg)',
+            borderRadius: '50%',
             // Terrible buttons styles, doesn't even look good, but didn't want to waste more time:
             backgroundImage:
-              "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)",
+              'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)',
             boxShadow:
-              "0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset",
-            filter: "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))",
-            textShadow: "0px 0px 2px rgba(255, 255, 255, 0.45)",
-            WebkitTapHighlightColor: "transparent",
+              '0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset',
+            filter: 'drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))',
+            textShadow: '0px 0px 2px rgba(255, 255, 255, 0.45)',
+            WebkitTapHighlightColor: 'transparent',
             transition:
-              "box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear",
-            ":active": {
+              'box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear',
+            ':active': {
               backgroundImage:
-                "radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)",
+                'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)',
               boxShadow:
-                "0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset",
-              filter: "drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))",
-              fontSize: "22px",
-            },
+                '0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset',
+              filter: 'drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))',
+              fontSize: '22px'
+            }
           }}
         >
-          {stickerButtonText.split(" ").map((line, i) => (
+          {stickerButtonText.split(' ').map((line, i) => (
             <div key={i}>{line}</div>
           ))}
         </Flex>
@@ -1141,7 +1141,7 @@ const ShipPage = () => {
 
       <Footer dark />
     </>
-  );
-};
+  )
+}
 
-export default ShipPage;
+export default ShipPage
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/pizza.js b/pages/pizza.js
index d7ca9a9fe..058d6eadc 100644
--- a/pages/pizza.js
+++ b/pages/pizza.js
@@ -1,252 +1,169 @@
-import {
-  Box,
-  Link,
-  Grid,
-  Image,
-  Container,
-  Button,
-  Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Nav from "../components/nav";
-import Tilt from "../components/tilt";
-import Ticker from "react-ticker";
-import { useState } from "react";
+import { Box, Link, Grid, Image, Container, Button, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Nav from '../components/nav'
+import Tilt from '../components/tilt'
+import Ticker from 'react-ticker'
+import { useState } from 'react'
+
 
 const PizzaPage = () => {
-  const getColor = (idx) => {
-    const colors = ["#EEA820", "#FF8C37", "#EC3750"];
-    return colors[idx % colors.length];
-  };
-  const pizzasByClubs = [
-    {
-      sprite:
-        "https://cloud-l0q2898m7-hack-club-bot.vercel.app/0sprite__1_.png",
-      author: "Thomas",
-      age: 18,
-      from: "South Carolina",
-      response:
-        "I love pineapple pizza & hosting club meets! It's awesome how every week I get to get together with friends and build awesome open source projects. SO GLAD I STARTED MY CLUB!!!",
-    },
-    {
-      sprite: "https://cloud-mpql3aoi9-hack-club-bot.vercel.app/0sprite.png",
-      author: "Odysseus",
-      age: 14,
-      from: "Epanomi",
-      response:
-        "I am addicted to margherita pizza and I am super excited to host club meetings! We meet every Saturday on Discord and we build projects together! On our next meeting, we will be creating a web-based operating system! I'm so happy to be a part of my club and Hack Club!",
-    },
-    {
-      sprite: "https://cloud-7sioop5e1-hack-club-bot.vercel.app/0sprite.png",
-      author: "Sarvesh",
-      age: 16,
-      from: "Ottawa",
-      response:
-        "I love meat lovers pizza and sharing my passion for technology. I love to get together with friends with the same mindset as me and work on amazing open source projects! MAKING A HACK CLUB WAS A GREAT DECISION!!!",
-    },
-    {
-      sprite: "https://cloud-8rvh6jo64-hack-club-bot.vercel.app/0sprite.png",
-      author: "Dieter",
-      age: 18,
-      from: "South Carolina",
-      response:
-        "I'm a big fan of Cheese and Spinach pizza—the texture is amazing! I started my club to fill a gap in computer science projects at my school. Leading this club allows me to challenge members; for instance, we use Sprig to create our own 2-bit games. It's Open Source, which significantly enhances our projects!",
-    },
-    {
-      sprite: "https://cloud-2ca30e1bb-hack-club-bot.vercel.app/0sprite.png",
-      author: "JC",
-      age: 17,
-      from: "Massachusetts",
-      response:
-        "Leading a club is a lot of fun! You get to build cool stuff with other club members, but being a leader means you also get to teach people how to code. Plus who isn't excited about a Christmas pizza party (with pineapple of course)?",
-    },
-    {
-      sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
-      author: "Miguel",
-      age: 17,
-      from: "Illinois",
-      response:
-        "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!",
-    },
-    {
-      sprite:
-        "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
-      author: "Jaime",
-      age: 18,
-      from: "South Carolina",
-      response:
-        "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!",
-    },
-    {
-      sprite:
-        "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
-      author: "Sarah",
-      age: 12,
-      from: "Massachusetts",
-      response:
-        "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!",
-    },
-    {
-      sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
-      author: "Shubham",
-      age: 15,
-      from: "Bay Area",
-      response:
-        "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild.",
-    },
-  ];
-
-  return (
-    <>
-      <Meta
-        as={Head}
-        title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
-        description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
-        image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
-      />
-      <ForceTheme theme="light" />
-      <Nav color="dark" sx={{ backgroundColor: "white" }} />
-      <Box
-        sx={{
-          paddingBottom: 256,
-        }}
-      >
-        <Box
-          sx={{
-            position: "absolute",
-            width: "100%",
-            height: "720px",
-            left: 0,
-            top: 0,
-            zIndex: 2,
-            background:
-              "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
-            mixBlendMode: "color-burn",
-            pointerEvents: "none",
-            display: ["none", "flex"],
-          }}
-        ></Box>
+    const getColor = (idx) => {
+      const colors = ["#EEA820", "#FF8C37", "#EC3750"];
+      return colors[idx % colors.length];
+    };
+    const pizzasByClubs = [
+        {
+            sprite: "https://cloud-l0q2898m7-hack-club-bot.vercel.app/0sprite__1_.png",
+            author: "Thomas",
+            age: 18,
+            from: "South Carolina",
+            response: "I love pineapple pizza & hosting club meets! It's awesome how every week I get to get together with friends and build awesome open source projects. SO GLAD I STARTED MY CLUB!!!"
+        },
+        {
+            sprite: "https://cloud-mpql3aoi9-hack-club-bot.vercel.app/0sprite.png",
+            author: "Odysseus",
+            age: 14,
+            from: "Epanomi",
+            response: "I am addicted to margherita pizza and I am super excited to host club meetings! We meet every Saturday on Discord and we build projects together! On our next meeting, we will be creating a web-based operating system! I'm so happy to be a part of my club and Hack Club!"
+        },
+        {
+            sprite: "https://cloud-7sioop5e1-hack-club-bot.vercel.app/0sprite.png",
+            author: "Sarvesh",
+            age: 16,
+            from: "Ottawa",
+            response: "I love meat lovers pizza and sharing my passion for technology. I love to get together with friends with the same mindset as me and work on amazing open source projects! MAKING A HACK CLUB WAS A GREAT DECISION!!!"
+        },
+        {
+            sprite: "https://cloud-8rvh6jo64-hack-club-bot.vercel.app/0sprite.png",
+            author: "Dieter",
+            age: 18,
+            from: "South Carolina",
+            response: "I'm a big fan of Cheese and Spinach pizza—the texture is amazing! I started my club to fill a gap in computer science projects at my school. Leading this club allows me to challenge members; for instance, we use Sprig to create our own 2-bit games. It's Open Source, which significantly enhances our projects!"
+        },
+        {
+            sprite: "https://cloud-2ca30e1bb-hack-club-bot.vercel.app/0sprite.png",
+            author: "JC",
+            age: 17,
+            from: "Massachusetts",
+            response: "Leading a club is a lot of fun! You get to build cool stuff with other club members, but being a leader means you also get to teach people how to code. Plus who isn't excited about a Christmas pizza party (with pineapple of course)?"
+        },
+        {
+          sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
+          author: "Miguel",
+          age: 17,
+          from: "Illinois",
+          response: "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!"
+        }, 
+        {
+          sprite: "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
+          author: "Jaime",
+          age: 18,
+          from: "South Carolina",
+          response: "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!"
+        },
+        {
+          sprite: "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
+          author: "Sarah",
+          age: 12,
+          from: "Massachusetts",
+          response: "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!"
+        }, {
+          sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
+          author: "Shubham",
+          age: 15,
+          from: "Bay Area",
+          response: "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild."
+        }
 
-        <Box
-          sx={{
-            position: "absolute",
-            width: "100%",
-            height: "720px",
-            left: 0,
-            top: 0,
-            zIndex: 1,
-            background: [
-              "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)",
-              "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)",
-            ],
-            mixBlendMode: "hard-light",
-            pointerEvents: "none",
-          }}
-        ></Box>
-        <Container
-          sx={{
-            textAlign: "center",
-            position: "relative",
-            width: "100%",
-            height: "100%",
-            left: 0,
-            top: 0,
-            zIndex: 2,
-            color: "dark",
-            paddingTop: [96, 96, 128],
-            paddingLeft: "16px",
-            paddingRight: "16px",
-          }}
-        >
-          <Image
-            alt={"GitHub + Hack Club"}
-            sx={{ width: ["128px", "128px", "256px"], marginBottom: "16px" }}
-            src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"
-          />
-          <Heading
-            as="h1"
-            variant="title"
-            sx={{
-              fontSize: ["38px", 6, null, 7],
-              paddingBottom: "16px",
-              span: {
-                background: [
-                  "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-                ],
-                WebkitBackgroundClip: "text",
-                WebkitTextStroke: "currentColor",
-                WebkitTextFillColor: "transparent",
-              },
-            }}
-          >
-            Start A Hack Club,
-            <br /> Get{" "}
-            <span>
-              <Text>$100 in Free Pizza</Text>
-              <Image
-                alt={""}
-                sx={{
-                  position: "absolute",
-                  display: ["none", "none", "none", "flex"],
-                  left: "25%",
-                  bottom: "42px",
-                }}
-                src="https://cloud-b3bvwbz46-hack-club-bot.vercel.app/0line.svg"
-              />
-            </span>
-          </Heading>
-          <Text variant="lead">
-            GitHub is providing $100 pizza grants to 500 Hack Clubs.{" "}
-            <strong>You're not too late!</strong>
-          </Text>
-        </Container>
-
-        <Box
+    ]
+
+    return (
+    
+  <>
+    <Meta
+      as={Head}
+      title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
+      description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
+      image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
+    />
+    <ForceTheme theme="light" />
+    <Nav color="dark" sx={{backgroundColor: "white"}}/>
+    <Box sx={{
+        paddingBottom: 256
+        
+    }}>
+    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 2,
+background: "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
+mixBlendMode: "color-burn",
+pointerEvents: 'none',
+display: ["none", "flex"]
+
+        }}>
+
+    </Box>
+
+    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 1,
+background: ["linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)", "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)"],
+mixBlendMode: "hard-light",
+pointerEvents: 'none'
+        }}>
+
+    </Box>
+    <Container sx={{ textAlign: 'center', position: 'relative', width: "100%", height: "100%", left: 0, top: 0, zIndex: 2, color: 'dark', paddingTop: [96, 96, 128], paddingLeft: "16px", paddingRight: "16px"
+}}>
+    <Image alt={"GitHub + Hack Club"} sx={{width: ["128px", "128px", "256px"], marginBottom: "16px"
+  
+  }} src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"/>
+        <Heading
+          as="h1"
+          variant="title"
           sx={{
-            alignItems: "center",
-            gap: ["12px", "16px", "24px"],
-            marginTop: "32px",
-            display: "flex",
-            zIndex: 2,
-            justifyContent: "center",
+            fontSize: ["38px", 6, null, 7],
+            paddingBottom: "16px",
+            span: {
+            background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
+            WebkitBackgroundClip: "text",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          <Button
-            variant="ctaLg"
-            as="a"
-            href="/clubs"
-            onClick={() => console.log("this clicks")}
-            sx={{ fontSize: [16, 24] }}
-          >
-            Start A Club
-          </Button>
-          <Button
-            variant="outlineLg"
-            as="a"
-            href="#GetPizza"
-            sx={{ fontSize: [16, 24] }}
-          >
-            Get Your Pizza
-          </Button>
+          Start A Hack Club,<br/> Get <span>
+            <Text>$100 in Free Pizza</Text>
+            <Image alt={""} sx={{position: "absolute", display: ["none", "none", "none", "flex"], left: "25%", bottom: "42px"}} src="https://cloud-b3bvwbz46-hack-club-bot.vercel.app/0line.svg"/></span>
+        </Heading>
+        <Text variant="lead">GitHub is providing $100 pizza grants to 500 Hack Clubs. <strong>You're not too late!</strong></Text>
+        
+      </Container>
+
+      <Box sx={{alignItems: "center", gap: ["12px", "16px", "24px"], marginTop: "32px", display: "flex", zIndex: 2, justifyContent: "center"}}>
+              <Button
+                variant="ctaLg"
+                as="a"
+                href="/clubs"
+                onClick={() => console.log("this clicks")}
+                sx={{fontSize: [16, 24]}}
+              >
+                Start A Club
+              </Button>
+              <Button
+                variant="outlineLg"
+                as="a"
+                href="#GetPizza"
+                sx={{fontSize: [16, 24]}}
+
+              >
+                Get Your Pizza
+              </Button>
         </Box>
       </Box>
 
-      <Container
-        sx={{
-          display: "flex",
-          width: "calc(100% - 32px)",
-          position: "relative",
-          marginTop: "-196px",
-          padding: "32px",
-          border: "1px solid #FF8C37",
-          borderRadius: "16px",
-        }}
-      >
-        {/* <Tilt>
+    <Container sx={{display: "flex", width: "calc(100% - 32px)", position: "relative", marginTop: "-196px", padding: "32px", border: "1px solid #FF8C37", borderRadius: "16px"}}>
+
+    {/* <Tilt>
     <Image sx={{position: "absolute", marginTop: "-82px", marginLeft: "-82px"}} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
     </Tilt>
     <Tilt>
@@ -255,548 +172,357 @@ const PizzaPage = () => {
     <Tilt>
     <Image sx={{position: "absolute", bottom: 0, marginBottom: "-182px", marginLeft: "-82px"}} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
     </Tilt> */}
-        <Box sx={{ position: "absolute", top: -48, left: -48 }}>
-          <Tilt options={{ perspective: 75 }}>
-            <Image
-              alt="mushroom"
-              sx={{
-                imageRendering: "pixelated",
-                display: ["none", "none", "flex"],
-              }}
-              src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"
-            />
-          </Tilt>
-        </Box>
-        <Box sx={{ position: "absolute", top: -48, right: -48 }}>
-          <Tilt options={{ perspective: 75 }}>
-            <Image
-              alt="pineapple"
-              sx={{
-                imageRendering: "pixelated",
-                display: ["none", "none", "flex"],
-              }}
-              src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"
-            />
-          </Tilt>
-        </Box>
-        <Box sx={{ position: "absolute", bottom: -48, left: -48 }}>
-          <Tilt options={{ perspective: 75 }}>
-            <Image
-              alt="tomato"
-              sx={{
-                imageRendering: "pixelated",
-                display: ["none", "none", "flex"],
-              }}
-              src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"
-            />
-          </Tilt>
-        </Box>
-        <Box sx={{ position: "absolute", bottom: -48, right: -48 }}>
-          <Tilt options={{ perspective: 75 }}>
-            <Image
-              alt="pizza"
-              sx={{
-                imageRendering: "pixelated",
+    <Box sx={{position: "absolute", top: -48, left: -48}}>
+    <Tilt
+    options={{perspective: 75}}
+    >
+    <Image
+    alt="mushroom"
+    sx={{
+      imageRendering: "pixelated",
+      display: ["none", "none", "flex"]
+    }} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
+    </Tilt>
+    </Box>   
+    <Box sx={{position: "absolute", top: -48, right: -48,
+  
+  }}>
+    <Tilt
+        options={{perspective: 75}}
 
-                display: ["none", "none", "flex"],
-              }}
-              src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"
-            />
-          </Tilt>
-        </Box>
-        <Grid
-          sx={{ alignItems: "center", position: "relative" }}
-          gap={[2, 3]}
-          columns={[null, null, null, "3fr 2fr"]}
+    >
+    <Image 
+    alt="pineapple"
+    sx={{imageRendering: "pixelated",
+        display: ["none", "none", "flex"]
+      }} src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"/>
+    </Tilt>
+    </Box> 
+    <Box sx={{position: "absolute", bottom: -48, left: -48}}>
+    <Tilt
+        options={{perspective: 75}}
         >
+    <Image  
+    
+    alt="tomato"
+    sx={{imageRendering: "pixelated",
+        display: ["none", "none", "flex"]
+
+  }} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
+    </Tilt>
+    </Box>   
+    <Box sx={{position: "absolute", bottom: -48, right: -48}}>
+    <Tilt
+        options={{perspective: 75}}
+
+    >
+    <Image 
+    alt="pizza"
+    sx={{imageRendering: "pixelated",
+  
+  display: ["none", "none", "flex"]
+}} src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"/>
+    </Tilt>
+    </Box>   
+    <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, null, '3fr 2fr']}>
+
           <Box>
-            <Heading
-              as="h2"
-              variant="heading"
-              sx={{
+
+        <Heading
+            as="h2"
+            variant="heading"
+            sx={{
                 fontSize: [40, 40, 42],
                 lineHeight: "100%",
                 paddingBottom: "16px",
                 span: {
-                  background:
-                    "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-                  WebkitBackgroundClip: "text",
-                  WebkitTextStroke: "currentColor",
-                  WebkitTextFillColor: "transparent",
-                },
-              }}
-            >
-              Create A Space for Makers
-            </Heading>
-            <Text sx={{ fontSize: 22 }}>
-              Hack Club is a place for technical teens to get together and build
-              projects together. Create a club at your high school and help
-              others discover the joy of coding through building projects.
-            </Text>
-          </Box>
-          <Box>
-            <Image
-              alt="teens collaborating on tech products"
-              sx={{ borderRadius: "16px" }}
-              src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"
-            />
-          </Box>
-        </Grid>
-        <br />
-      </Container>
-      <Container sx={{ paddingLeft: 16, paddingRight: 16 }}>
-        <Grid
-          sx={{ marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0 }}
-          gap={4}
-          columns={[null, null, "1fr 1fr 1fr"]}
-        >
-          <Box
-            sx={{
-              backgroundColor: "#E1A300",
-              padding: 32,
-              margin: 0,
-              borderRadius: "24px",
-              color: "#fff",
+                background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+                WebkitBackgroundClip: "text",
+                WebkitTextStroke: 'currentColor',
+                WebkitTextFillColor: 'transparent'
+                }
             }}
-          >
-            <Heading
-              as="h2"
-              variant="heading"
-              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
             >
-              Join A Community of Teen Hackers
-            </Heading>
+            Create A Space for Makers          
+        </Heading>
+        <Text sx={{fontSize: 22}}>
+        Hack Club is a place for technical teens to get together and build projects together.  Create a club at your high school and help others discover the joy of coding through building projects.
+        </Text>
+        </Box>
+        <Box>
+            <Image alt="teens collaborating on tech products" sx={{borderRadius: "16px"}} src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"/>
+        </Box>
+    </Grid>
+    <br/>
+    </Container>
+    <Container sx={{paddingLeft: 16, paddingRight: 16}}>
+    <Grid sx={{marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0}} gap={4} columns={[null, null, '1fr 1fr 1fr']}>
+    <Box sx={{backgroundColor: "#E1A300", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+        <Heading
+        as="h2"
+        variant="heading"
+        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+        >
+            Join A Community of Teen Hackers      
+        </Heading>
 
-            <Text sx={{ fontSize: 18, display: "block" }}>
-              In our Slack community of over 25,000 hackers, you'll be invited
-              to a space for Hack Club leaders to ask questions & chat, share
-              projects, & attend events.
-            </Text>
-            <Button
-              href="/slack"
-              as="a"
-              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#EEA820" }}
-            >
-              Join The Slack
-            </Button>
-          </Box>
+        <Text sx={{fontSize: 18, display: "block"}}>
+        In our Slack community of over 25,000 hackers, you'll be invited to a space for Hack Club leaders to ask questions & chat, share projects, & attend events.
+        </Text>
+        <Button
+        href="/slack"
+        as="a"
+        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EEA820"}}
+        >Join The Slack</Button>
+    </Box>
+    
+    <Box sx={{backgroundColor: "#F48801", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+        <Heading
+        as="h2"
+        variant="heading"
+        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+        >
+Tools & Perks To Lead Your Club
+        </Heading>
 
-          <Box
-            sx={{
-              backgroundColor: "#F48801",
-              padding: 32,
-              margin: 0,
-              borderRadius: "24px",
-              color: "#fff",
-            }}
-          >
-            <Heading
-              as="h2"
-              variant="heading"
-              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
-            >
-              Tools & Perks To Lead Your Club
-            </Heading>
+        <Text sx={{fontSize: 18, display: "block"}}>
+        As a club leader, you'll get to use community projects like Sprig & Jams in your Hack Club! Your Club will also get free access to Zoom Pro & Figma Pro.
+        </Text>
+        <Button
+                as="a"
 
-            <Text sx={{ fontSize: 18, display: "block" }}>
-              As a club leader, you'll get to use community projects like Sprig
-              & Jams in your Hack Club! Your Club will also get free access to
-              Zoom Pro & Figma Pro.
-            </Text>
-            <Button
-              as="a"
-              href="https://toolbox.hackclub.com/"
-              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#FF8C37" }}
-            >
-              Discover Toolbox
-            </Button>
-          </Box>
+href="https://toolbox.hackclub.com/"
+        sx={{marginTop: 16, backgroundColor: "#fff", color: "#FF8C37"}}
+        >Discover Toolbox</Button>
+    </Box>
 
-          <Box
-            sx={{
-              backgroundColor: "#F6013B",
-              padding: 32,
-              margin: 0,
-              borderRadius: "24px",
-              color: "#fff",
-            }}
-          >
-            <Heading
-              as="h2"
-              variant="heading"
-              sx={{ padding: 0, marginBottom: "8px", fontSize: 36 }}
-            >
-              Lead Weekly Club Meetings
-            </Heading>
+    <Box sx={{backgroundColor: "#F6013B", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+        <Heading
+        
+        as="h2"
+        variant="heading"
+        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+        >
+            Lead Weekly 
+            Club Meetings   
+        </Heading>
 
-            <Text sx={{ fontSize: 18, display: "block" }}>
-              Every week you can craft club meetings to help makers at your
-              school discover the joy of coding. Get inspired by some Jams we
-              built to help you lead your club.{" "}
-            </Text>
+        <Text sx={{fontSize: 18, display: "block"}}>
+        Every week you can craft club meetings to help makers at your school discover the joy of coding. Get inspired by some Jams we built to help you lead your club.        </Text>
+        
+        <Button
+href="https://jams.hackclub.com/"
+as="a"
 
-            <Button
-              href="https://jams.hackclub.com/"
-              as="a"
-              sx={{ marginTop: 16, backgroundColor: "#fff", color: "#EC3750" }}
-            >
-              Explore Jams
-            </Button>
-          </Box>
-        </Grid>
-      </Container>
-      <Box>
-        <Container sx={{ marginTop: 32, padding: "16px" }}>
-          <Heading
-            as="h2"
-            variant="heading"
-            sx={{
-              padding: 0,
-              background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-              fontSize: [28, 34, 36],
-              background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-              filter:
-                "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))",
-            }}
-          >
+        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EC3750"}}
+        >Explore Jams</Button>
+    </Box>
+
+
+    </Grid>
+    
+    </Container>
+    <Box>
+        <Container sx={{marginTop: 32, padding: "16px"}}>
+        <Heading
+        as="h2"
+        variant="heading"
+        sx={{padding: 0,
+          background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+           fontSize: [28, 34, 36],
+            background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+            WebkitBackgroundClip: "text",
+              WebkitTextFillColor: 'transparent',
+              filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
+        
+        }}
+        >
             Pizzas & Clubs by Leaders
-          </Heading>{" "}
-        </Container>
-
-        <Ticker speed={3} sx={{ overflowX: "hidden" }}>
-          {() => (
-            <Box as="div" sx={{ display: "flex", py: [4, 5, 5] }}>
-              {pizzasByClubs.map((pizzaByClub, idx) => (
-                <Box
-                  key={idx}
-                  sx={{
-                    position: "relative",
-                    borderRadius: "16px",
-                    padding: "8px 16px 16px 16px",
-                    width: ["300px", "500px"],
-                    marginLeft: "16px",
-                    marginRight: "16px",
-                    border: "1px solid var(--Muted, #8492A6)",
-                  }}
-                >
-                  <Tilt
-                    sx={{ backgroundColor: "#fff" }}
-                    options={{ scale: 1.25, perspective: 2000, speed: 500 }}
-                  >
-                    <img
-                      alt="pizza drawn by club"
-                      src={pizzaByClub.sprite}
-                      style={{
-                        position: "absolute",
-                        width: "48px",
-                        top: "-16px",
-                        left: "-16px",
-                        height: "48px",
-                        padding: "8px",
-                        imageRendering: "pixelated",
-                        borderRadius: "8px",
-                        border: `1.75px solid ${getColor(idx)}`,
-                        backgroundColor: "#fff",
-                        zIndex: 2,
-                      }}
-                    />
-                  </Tilt>
-                  <Text
-                    sx={{
-                      paddingLeft: "24px",
-                      fontSize: [18, 18, 22],
-                      fontWeight: 600,
-
-                      background:
-                        "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-                      WebkitBackgroundClip: "text",
-                      WebkitTextFillColor: "transparent",
-                      filter:
-                        "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))",
-                    }}
-                  >
-                    {pizzaByClub.author} ({pizzaByClub.age}) from{" "}
-                    {pizzaByClub.from}
-                  </Text>
-                  <br />
-                  <Text sx={{ paddingTop: "16px", fontSize: [16, 18] }}>
-                    {pizzaByClub.response}
-                  </Text>
-                </Box>
-              ))}
-            </Box>
-          )}
-        </Ticker>
-      </Box>
+            </Heading>        </Container>
 
-      <Container sx={{ padding: "16px" }}>
-        <Box
-          sx={{
-            borderRadius: "16px",
-            background:
-              "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
-            boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
-            padding: ["24px", "32px"],
-            marginBottom: "64px",
-          }}
+
+
+            <Ticker speed={3} sx={{ overflowX: 'hidden' }}>
+            {() => (
+              <Box
+                as="div"
+                sx={{ display: 'flex', py: [4, 5, 5] }}
+
+              >
+                {pizzasByClubs.map((pizzaByClub, idx) => (
+                  <Box key={idx} sx={{position: "relative", borderRadius: "16px", padding: "8px 16px 16px 16px", width: ["300px", "500px"], marginLeft: "16px", marginRight: "16px", 
+                  border: "1px solid var(--Muted, #8492A6)"
+                  }}>
+                    <Tilt 
+  
+                    sx={{backgroundColor: "#fff"}} options={{scale: 1.25, perspective: 2000, speed: 500}}>
+                    <img alt="pizza drawn by club" src={pizzaByClub.sprite} style={{position: "absolute", width: "48px", top: "-16px", left: "-16px", height: "48px", padding: "8px",
+                  imageRendering: "pixelated",
+                  borderRadius: "8px",
+                  border: `1.75px solid ${getColor(idx)}`,
+                  backgroundColor: "#fff",
+                  zIndex: 2
+                }}/>
+                </Tilt>
+                    <Text sx={{paddingLeft: "24px", fontSize: [18, 18, 22], fontWeight: 600,
+
+                                background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+                                WebkitBackgroundClip: "text",
+                                  WebkitTextFillColor: 'transparent',
+                                  filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
+                            
+                  
+                  }}>{pizzaByClub.author} ({pizzaByClub.age}) from {pizzaByClub.from}</Text>
+                    <br/>
+                    <Text sx={{paddingTop: "16px", fontSize: [16, 18]}}>{pizzaByClub.response}</Text>
+                  </Box>
+                ))}
+              </Box>
+            )}
+          </Ticker>
+ 
+    </Box>
+        
+    <Container sx={{padding: "16px"}}>
+      <Box
+      sx={{
+        borderRadius: "16px",
+background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
+boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
+padding: ["24px", "32px"],
+        marginBottom: "64px"
+      }}
+      >
+        <p 
+                id="GetPizza"
+
+        style={{marginTop: "-128px", opacity: 0, position: "absolute"}}>
+          Above
+        </p>
+                <Heading
+        as="h2"
+        variant="heading"
+        sx={{
+          fontSize: 36,
+          color: "#fff",
+          fontWeight: 600 ,
+          marginBottom: ["16px", "16px", "0px"]
+        }}
         >
-          <p
-            id="GetPizza"
-            style={{ marginTop: "-128px", opacity: 0, position: "absolute" }}
-          >
-            Above
-          </p>
-          <Heading
-            as="h2"
-            variant="heading"
-            sx={{
-              fontSize: 36,
-              color: "#fff",
-              fontWeight: 600,
-              marginBottom: ["16px", "16px", "0px"],
-            }}
-          >
             Get Your Pizza
-          </Heading>
-
-          <Grid
-            sx={{ alignItems: "center", position: "relative" }}
-            gap={[2, 3]}
-            columns={[null, null, "2.5fr 3fr 2.5fr"]}
-          >
-            <Box
-              sx={{
-                backgroundColor: "#fff",
-                padding: "16px",
-                borderRadius: "16px",
-              }}
-            >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
-                <img
-                  alt="1. "
-                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
-                  src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"
-                />
-                <Text
-                  sx={{
-                    color: "#000",
-                    fontSize: 26,
-                    display: "block",
-                    fontWeight: 600,
-                  }}
-                >
-                  Start Your Club
-                </Text>
+            </Heading>
+
+            <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, '2.5fr 3fr 2.5fr']}>
+            
+            
+            <Box sx={{
+              backgroundColor: "#fff",
+              padding: "16px",
+              borderRadius: "16px"
+            }}>
+              <Box sx={{display: "flex", alignItems: "center"}}>
+              <img alt="1. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"/>
+              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Start Your Club</Text>
               </Box>
-              <Text
-                sx={{
-                  color: "#000",
-                  marginTop: "8px",
-                  display: "block",
-                  fontSize: 18,
-                  fontWeight: 500,
-                  lineHeight: "150%",
-                }}
-              >
-                Every Hack Club starts with a teenager like you who wants to
-                bring an amazing community to their high school.
+              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+              Every Hack Club starts with a teenager like you who wants to bring an amazing community to their high school.
               </Text>
-              <Image
-                alt="teen club of coders"
-                sx={{
-                  width: ["75%", "75%", "40%"],
-                  borderRadius: "16px",
-                  marginTop: "8px",
-                  marginBottom: "8px",
-                }}
-                src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"
-              />
+              <Image alt="teen club of coders" sx={{width: ["75%", "75%", "40%"], borderRadius: "16px", marginTop: "8px", marginBottom: "8px"}} src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"/>
               <Box>
-                <Button
-                  variant="outline"
-                  as="a"
-                  href="/clubs"
-                  mt={[3, 0, 0]}
-                  sx={{
-                    fontSize: "18px",
-                  }}
-                >
-                  Start A Club
-                </Button>
-              </Box>
-            </Box>
-
-            <Box
+              <Button
+              variant="outline"
+              as="a"
+              href="/clubs"
+              mt={[3, 0, 0]}
               sx={{
-                backgroundColor: "#fff",
-                padding: "16px",
-                borderRadius: "16px",
+                fontSize: "18px"
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
-                <img
-                  alt="2. "
-                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
-                  src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"
-                />
-                <Text
-                  sx={{
-                    color: "#000",
-                    fontSize: 26,
-                    display: "block",
-                    fontWeight: 600,
-                  }}
-                >
-                  Draw A Pizza
-                </Text>
-              </Box>
-              <Text
-                sx={{
-                  color: "#000",
-                  marginTop: "8px",
-                  display: "block",
-                  fontSize: 18,
-                  fontWeight: 500,
-                  lineHeight: "150%",
-                }}
-              >
-                Join{" "}
-                <Link href="https://hackclub.slack.com/archives/C05RZ6K7RS5">
-                  #pizza-party
-                </Link>{" "}
-                on the Hack Club Slack & draw a Pixel Pizza
-              </Text>
-              <img
-                alt="pixel editor gif"
-                style={{
-                  width: "75%",
-                  borderRadius: "16px",
-                  marginTop: "12px",
-                  marginBottom: "8px",
-                }}
-                src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"
-              />
-              <Box>
-                <Button
-                  variant="cta"
-                  as="a"
-                  href="/slack"
-                  mt={[3, 0, 0]}
-                  sx={{
-                    fontSize: "18px",
-                  }}
-                >
-                  Join The Slack
-                </Button>
-              </Box>
+              Start A Club
+            </Button>
             </Box>
 
-            <Box
+            </Box>
+            
+            <Box sx={{
+              backgroundColor: "#fff",
+              padding: "16px",
+              borderRadius: "16px"
+            }}>
+              <Box sx={{display: "flex", alignItems: "center"}}>
+              <img alt="2. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"/>
+              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Draw A Pizza</Text>
+              </Box>
+              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+              Join <Link  href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link> on the Hack Club  Slack & draw a Pixel Pizza
+                            </Text>
+              <img alt="pixel editor gif" style={{width: "75%", borderRadius: "16px", marginTop: "12px", marginBottom: "8px"}} src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"/>
+              <Box>
+              <Button
+              variant="cta"
+              as="a"
+              href="/slack"
+              mt={[3, 0, 0]}
               sx={{
-                backgroundColor: "#fff",
-                padding: "16px",
-                borderRadius: "16px",
+                fontSize: "18px"
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
-                <img
-                  alt="3."
-                  style={{ height: "32px", width: "32px", marginRight: "12px" }}
-                  src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"
-                />
-                <Text
-                  sx={{
-                    color: "#000",
-                    fontSize: 26,
-                    display: "block",
-                    fontWeight: 600,
-                  }}
-                >
-                  Order Pizza
-                </Text>
+              Join The Slack
+            </Button>
+            </Box>
+
+            </Box>
+            
+            <Box sx={{
+              backgroundColor: "#fff",
+              padding: "16px",
+              borderRadius: "16px"
+            }}>
+              <Box sx={{display: "flex", alignItems: "center"}}>
+              <img alt="3." style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"/>
+              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Order Pizza</Text>
               </Box>
-              <Text
-                sx={{
-                  color: "#000",
-                  marginTop: "8px",
-                  display: "block",
-                  fontSize: 18,
-                  fontWeight: 500,
-                  lineHeight: "150%",
-                }}
-              >
-                Receive a Pizza Grant through HCB & use your HCB Virtual Card to
-                order pizzas
+              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+              Receive a Pizza Grant through HCB & use your HCB Virtual Card to order pizzas
               </Text>
               <Tilt
-                sx={{
-                  boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)",
-                }}
-              >
-                <img
-                  alt="HCB Card"
-                  style={{
-                    width: "75%",
-                    borderRadius: "8px",
-                    marginTop: "12px",
-                    marginBottom: "8px",
-                    boxShadow:
-                      "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)",
-                  }}
-                  src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"
-                />
+              sx={{
+                boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
+              }}
+    >
+              <img alt="HCB Card" style={{width: "75%", borderRadius: "8px", marginTop: "12px", marginBottom: "8px",
+                            boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
+
+            }} src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"/>
               </Tilt>
-              <Box></Box>
+                <Box>
             </Box>
-          </Grid>
-        </Box>
-        <Box
-          sx={{
-            fontSize: 20,
-            textAlign: "center",
-            display: "flex",
-            justifyContent: "center",
-            marginBottom: "64px",
-          }}
-        >
-          <Text
+
+            </Box>
+
+            </Grid>
+
+      </Box>
+      <Box sx={{fontSize: 20, textAlign: "center", display: "flex", justifyContent: "center", marginBottom: "64px"}}>
+        <Text sx={{border: "1px solid #EC3750", color: "#EC3750", padding: "16px 32px", borderRadius: "32px"}}>p.s. if you already lead a club, you can still get pizza! draw  a pizza in<Link style={{marginLeft: "8px"}} href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link></Text>
+      </Box>
+    </Container>    
+    <Footer dark 
+            
             sx={{
-              border: "1px solid #EC3750",
-              color: "#EC3750",
-              padding: "16px 32px",
-              borderRadius: "32px",
+              backgroundColor: 'dark',
+              position: 'relative',
+              overflow: 'hidden',
+              textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+              'h2,span,p,a': { color: 'white !important' },
+              '> div img': { objectPosition: ['left', 'center'] },
+              svg: {
+                fill: 'white',
+                filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+              }
             }}
-          >
-            p.s. if you already lead a club, you can still get pizza! draw a
-            pizza in
-            <Link
-              style={{ marginLeft: "8px" }}
-              href="https://hackclub.slack.com/archives/C05RZ6K7RS5"
-            >
-              #pizza-party
-            </Link>
-          </Text>
-        </Box>
-      </Container>
-      <Footer
-        dark
-        sx={{
-          backgroundColor: "dark",
-          position: "relative",
-          overflow: "hidden",
-          textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-          "h2,span,p,a": { color: "white !important" },
-          "> div img": { objectPosition: ["left", "center"] },
-          svg: {
-            fill: "white",
-            filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-          },
-        }}
-      />
-    </>
-  );
-};
+    />
+  </>
+)}
 
-export default PizzaPage;
+export default PizzaPage
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/team.js b/pages/team.js
index 1fd379af6..2209c007d 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Bio from "../components/bio";
-import ForceTheme from "../components/force-theme";
+import { Box, Container, Text, Grid, Flex } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Bio from '../components/bio'
+import ForceTheme from '../components/force-theme'
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
-            backgroundSize: "cover",
-            backgroundPosition: "75%",
+              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: '75%'
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: "650px" }}
+              sx={{ maxWidth: '650px' }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: "rgb(51 142 218 / 40%)",
+                bg: 'rgb(51 142 218 / 40%)',
                 p: 3,
-                borderRadius: "20px",
+                borderRadius: '20px',
                 mb: 3,
                 gap: 3,
-                flexWrap: ["wrap", null, null, "nowrap"],
+                flexWrap: ['wrap', null, null, 'nowrap']
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: "center",
+                  textAlign: 'center',
                   fontSize: 4,
-                  writingMode: [null, null, null, "vertical-rl"],
+                  writingMode: [null, null, null, 'vertical-rl'],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, "rotate(180deg)"],
-                  width: ["100%", null, null, "fit-content"],
+                  transform: [null, null, null, 'rotate(180deg)'],
+                  width: ['100%', null, null, 'fit-content'],
                   marginBottom: [
-                    "0px!important",
-                    "0px!important",
-                    "0px!important",
-                    3,
-                  ],
+                    '0px!important',
+                    '0px!important',
+                    '0px!important',
+                    3
+                  ]
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: "rgb(51 214 166 / 40%)",
+                    bg: 'rgb(51 214 166 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
+                    borderRadius: '20px'
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: "rgb(255 142 55 / 40%)",
+                    bg: 'rgb(255 142 55 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
-                    mt: 3,
+                    borderRadius: '20px',
+                    mt: 3
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: "fit-content" }}
+                    sx={{ height: 'fit-content' }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: "rgb(236 55 80 / 40%)",
+                    bg: 'rgb(236 55 80 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
+                    borderRadius: '20px'
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: "fit-content" }}
+                    sx={{ height: 'fit-content' }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: "rgb(166 51 214 / 40%)",
+                    bg: 'rgb(166 51 214 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
-                    mt: 3,
+                    borderRadius: '20px',
+                    mt: 3
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: "1.2",
+                  lineHeight: '1.2',
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: "600px",
-                  width: "100%",
-                  margin: "auto",
+                  maxWidth: '600px',
+                  width: '100%',
+                  margin: 'auto'
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  );
+  )
 }
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From df352784731a1189ae1226af0265be882e3da3e8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 011/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js |  28 +-
 components/mail-card.js                |   2 +-
 pages/pizza.js                         | 878 ++++++++++++-------------
 3 files changed, 440 insertions(+), 468 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
diff --git a/pages/pizza.js b/pages/pizza.js
index 058d6eadc..428d69c70 100644
--- a/pages/pizza.js
+++ b/pages/pizza.js
@@ -7,12 +7,10 @@ import Nav from '../components/nav'
 import Tilt from '../components/tilt'
 import Ticker from 'react-ticker'
 import { useState } from 'react'
-
-
 const PizzaPage = () => {
     const getColor = (idx) => {
-      const colors = ["#EEA820", "#FF8C37", "#EC3750"];
-      return colors[idx % colors.length];
+        const colors = ["#EEA820", "#FF8C37", "#EC3750"];
+        return colors[idx % colors.length];
     };
     const pizzasByClubs = [
         {
@@ -51,119 +49,109 @@ const PizzaPage = () => {
             response: "Leading a club is a lot of fun! You get to build cool stuff with other club members, but being a leader means you also get to teach people how to code. Plus who isn't excited about a Christmas pizza party (with pineapple of course)?"
         },
         {
-          sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
-          author: "Miguel",
-          age: 17,
-          from: "Illinois",
-          response: "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!"
-        }, 
+            sprite: "https://cloud-d16y68pgi-hack-club-bot.vercel.app/0sprite.png",
+            author: "Miguel",
+            age: 17,
+            from: "Illinois",
+            response: "I love Costco pizza, and we had some at my Hack Club's hackathon! I decided to lead the Hersey Hack Club to bring the magic of code to my classmates and build a coding community at my high school. Open source projects like Code Jams have given the Hersey Hack Club a great stream of new, constantly improving workshops to host for members!"
+        },
         {
-          sprite: "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
-          author: "Jaime",
-          age: 18,
-          from: "South Carolina",
-          response: "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!"
+            sprite: "https://cloud-i23dx2r15-hack-club-bot.vercel.app/0sprite__8_.png",
+            author: "Jaime",
+            age: 18,
+            from: "South Carolina",
+            response: "I love cheese pizzaaa (Ik I am kinda basic but it is good 😭). I lead the club because it is a great opportunity to meet people in my school who are so talented and skilled in areas where I may not be. And it is a great experience to interact and make friends with them!!!"
         },
         {
-          sprite: "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
-          author: "Sarah",
-          age: 12,
-          from: "Massachusetts",
-          response: "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!"
+            sprite: "https://cloud-ed5wo5bt9-hack-club-bot.vercel.app/0sprite__1_.png",
+            author: "Sarah",
+            age: 12,
+            from: "Massachusetts",
+            response: "I love pepperoni pizza and my Hack Club! I love leading a Hack Club and sharing cool open source projects. yay!!"
         }, {
-          sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
-          author: "Shubham",
-          age: 15,
-          from: "Bay Area",
-          response: "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild."
+            sprite: "https://cloud-5kl9y9pup-hack-club-bot.vercel.app/0sprite.png",
+            author: "Shubham",
+            age: 15,
+            from: "Bay Area",
+            response: "I love eating veggie pizza and hosting club meets at Mission San Jose High School's Hack Club! Hosting club meets is more than superficial for me—seeing everyone in the room, all exhibiting the same amount of excitement for code is something unique, and I'm glad to be hosting clubs meets for this passion to run wild."
         }
-
     ]
-
     return (
-    
-  <>
-    <Meta
-      as={Head}
-      title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
-      description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
-      image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
-    />
-    <ForceTheme theme="light" />
-    <Nav color="dark" sx={{backgroundColor: "white"}}/>
-    <Box sx={{
-        paddingBottom: 256
-        
-    }}>
-    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 2,
-background: "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
-mixBlendMode: "color-burn",
-pointerEvents: 'none',
-display: ["none", "flex"]
-
-        }}>
 
-    </Box>
-
-    <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 1,
-background: ["linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)", "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)"],
-mixBlendMode: "hard-light",
-pointerEvents: 'none'
-        }}>
+        <>
+            <Meta
+                as={Head}
+                title="Start A Hack Club, Get $100 in Free Pizza from GitHub"
+                description="GitHub is providing $100 pizza grants to 500 Hack Clubs around the world. Wondering How To Start A Coding Club? Hack Club is the answer."
+                image="https://cloud-p6r4eeji5-hack-club-bot.vercel.app/00club-min__1___1___1_.png"
+            />
+            <ForceTheme theme="light" />
+            <Nav color="dark" sx={{backgroundColor: "white"}}/>
+            <Box sx={{
+                paddingBottom: 256
 
-    </Box>
-    <Container sx={{ textAlign: 'center', position: 'relative', width: "100%", height: "100%", left: 0, top: 0, zIndex: 2, color: 'dark', paddingTop: [96, 96, 128], paddingLeft: "16px", paddingRight: "16px"
-}}>
-    <Image alt={"GitHub + Hack Club"} sx={{width: ["128px", "128px", "256px"], marginBottom: "16px"
-  
-  }} src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"/>
-        <Heading
-          as="h1"
-          variant="title"
-          sx={{
-            fontSize: ["38px", 6, null, 7],
-            paddingBottom: "16px",
-            span: {
-            background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
-            WebkitBackgroundClip: "text",
-              WebkitTextStroke: 'currentColor',
-              WebkitTextFillColor: 'transparent'
-            }
-          }}
-        >
-          Start A Hack Club,<br/> Get <span>
+            }}>
+                <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 2,
+                    background: "url(https://cloud-ecflmj5yi-hack-club-bot.vercel.app/00texture__1_.png)",
+                    mixBlendMode: "color-burn",
+                    pointerEvents: 'none',
+                    display: ["none", "flex"]
+                }}>
+                </Box>
+                <Box sx={{position: 'absolute', width: "100%", height: "720px", left: 0, top: 0, zIndex: 1,
+                    background: ["linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%)", "linear-gradient(180deg, rgba(236, 55, 80, 0.40) 0%, rgba(236, 120, 55, 0.20) 23.16%, rgba(248, 127, 59, 0.08) 45.88%, rgba(255, 140, 55, 0.04) 66.81%, rgba(255, 181, 38, 0.00) 85.52%), radial-gradient(65.56% 65.56% at 50% 19.96%, rgba(255, 0, 0, 0.40) 0%, rgba(255, 90, 67, 0.40) 23.96%, rgba(255, 46, 0, 0.00) 100%)"],
+                    mixBlendMode: "hard-light",
+                    pointerEvents: 'none'
+                }}>
+                </Box>
+                <Container sx={{ textAlign: 'center', position: 'relative', width: "100%", height: "100%", left: 0, top: 0, zIndex: 2, color: 'dark', paddingTop: [96, 96, 128], paddingLeft: "16px", paddingRight: "16px"
+                }}>
+                    <Image alt={"GitHub + Hack Club"} sx={{width: ["128px", "128px", "256px"], marginBottom: "16px"
+
+                    }} src="https://cloud-e3wj9s4pe-hack-club-bot.vercel.app/00combo__1_.png"/>
+                    <Heading
+                        as="h1"
+                        variant="title"
+                        sx={{
+                            fontSize: ["38px", 6, null, 7],
+                            paddingBottom: "16px",
+                            span: {
+                                background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
+                                WebkitBackgroundClip: "text",
+                                WebkitTextStroke: 'currentColor',
+                                WebkitTextFillColor: 'transparent'
+                            }
+                        }}
+                    >
+                        Start A Hack Club,<br/> Get <span>
             <Text>$100 in Free Pizza</Text>
             <Image alt={""} sx={{position: "absolute", display: ["none", "none", "none", "flex"], left: "25%", bottom: "42px"}} src="https://cloud-b3bvwbz46-hack-club-bot.vercel.app/0line.svg"/></span>
-        </Heading>
-        <Text variant="lead">GitHub is providing $100 pizza grants to 500 Hack Clubs. <strong>You're not too late!</strong></Text>
-        
-      </Container>
-
-      <Box sx={{alignItems: "center", gap: ["12px", "16px", "24px"], marginTop: "32px", display: "flex", zIndex: 2, justifyContent: "center"}}>
-              <Button
-                variant="ctaLg"
-                as="a"
-                href="/clubs"
-                onClick={() => console.log("this clicks")}
-                sx={{fontSize: [16, 24]}}
-              >
-                Start A Club
-              </Button>
-              <Button
-                variant="outlineLg"
-                as="a"
-                href="#GetPizza"
-                sx={{fontSize: [16, 24]}}
-
-              >
-                Get Your Pizza
-              </Button>
-        </Box>
-      </Box>
-
-    <Container sx={{display: "flex", width: "calc(100% - 32px)", position: "relative", marginTop: "-196px", padding: "32px", border: "1px solid #FF8C37", borderRadius: "16px"}}>
-
-    {/* <Tilt>
+                    </Heading>
+                    <Text variant="lead">GitHub is providing $100 pizza grants to 500 Hack Clubs. <strong>You're not too late!</strong></Text>
+
+                </Container>
+                <Box sx={{alignItems: "center", gap: ["12px", "16px", "24px"], marginTop: "32px", display: "flex", zIndex: 2, justifyContent: "center"}}>
+                    <Button
+                        variant="ctaLg"
+                        as="a"
+                        href="/clubs"
+                        onClick={() => console.log("this clicks")}
+                        sx={{fontSize: [16, 24]}}
+                    >
+                        Start A Club
+                    </Button>
+                    <Button
+                        variant="outlineLg"
+                        as="a"
+                        href="#GetPizza"
+                        sx={{fontSize: [16, 24]}}
+                    >
+                        Get Your Pizza
+                    </Button>
+                </Box>
+            </Box>
+            <Container sx={{display: "flex", width: "calc(100% - 32px)", position: "relative", marginTop: "-196px", padding: "32px", border: "1px solid #FF8C37", borderRadius: "16px"}}>
+                {/* <Tilt>
     <Image sx={{position: "absolute", marginTop: "-82px", marginLeft: "-82px"}} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
     </Tilt>
     <Tilt>
@@ -172,357 +160,335 @@ pointerEvents: 'none'
     <Tilt>
     <Image sx={{position: "absolute", bottom: 0, marginBottom: "-182px", marginLeft: "-82px"}} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
     </Tilt> */}
-    <Box sx={{position: "absolute", top: -48, left: -48}}>
-    <Tilt
-    options={{perspective: 75}}
-    >
-    <Image
-    alt="mushroom"
-    sx={{
-      imageRendering: "pixelated",
-      display: ["none", "none", "flex"]
-    }} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
-    </Tilt>
-    </Box>   
-    <Box sx={{position: "absolute", top: -48, right: -48,
-  
-  }}>
-    <Tilt
-        options={{perspective: 75}}
-
-    >
-    <Image 
-    alt="pineapple"
-    sx={{imageRendering: "pixelated",
-        display: ["none", "none", "flex"]
-      }} src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"/>
-    </Tilt>
-    </Box> 
-    <Box sx={{position: "absolute", bottom: -48, left: -48}}>
-    <Tilt
-        options={{perspective: 75}}
-        >
-    <Image  
-    
-    alt="tomato"
-    sx={{imageRendering: "pixelated",
-        display: ["none", "none", "flex"]
-
-  }} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
-    </Tilt>
-    </Box>   
-    <Box sx={{position: "absolute", bottom: -48, right: -48}}>
-    <Tilt
-        options={{perspective: 75}}
-
-    >
-    <Image 
-    alt="pizza"
-    sx={{imageRendering: "pixelated",
-  
-  display: ["none", "none", "flex"]
-}} src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"/>
-    </Tilt>
-    </Box>   
-    <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, null, '3fr 2fr']}>
-
-          <Box>
-
-        <Heading
-            as="h2"
-            variant="heading"
-            sx={{
-                fontSize: [40, 40, 42],
-                lineHeight: "100%",
-                paddingBottom: "16px",
-                span: {
-                background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-                WebkitBackgroundClip: "text",
-                WebkitTextStroke: 'currentColor',
-                WebkitTextFillColor: 'transparent'
-                }
-            }}
-            >
-            Create A Space for Makers          
-        </Heading>
-        <Text sx={{fontSize: 22}}>
-        Hack Club is a place for technical teens to get together and build projects together.  Create a club at your high school and help others discover the joy of coding through building projects.
-        </Text>
-        </Box>
-        <Box>
-            <Image alt="teens collaborating on tech products" sx={{borderRadius: "16px"}} src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"/>
-        </Box>
-    </Grid>
-    <br/>
-    </Container>
-    <Container sx={{paddingLeft: 16, paddingRight: 16}}>
-    <Grid sx={{marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0}} gap={4} columns={[null, null, '1fr 1fr 1fr']}>
-    <Box sx={{backgroundColor: "#E1A300", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
-        >
-            Join A Community of Teen Hackers      
-        </Heading>
-
-        <Text sx={{fontSize: 18, display: "block"}}>
-        In our Slack community of over 25,000 hackers, you'll be invited to a space for Hack Club leaders to ask questions & chat, share projects, & attend events.
-        </Text>
-        <Button
-        href="/slack"
-        as="a"
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EEA820"}}
-        >Join The Slack</Button>
-    </Box>
-    
-    <Box sx={{backgroundColor: "#F48801", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
-        >
-Tools & Perks To Lead Your Club
-        </Heading>
-
-        <Text sx={{fontSize: 18, display: "block"}}>
-        As a club leader, you'll get to use community projects like Sprig & Jams in your Hack Club! Your Club will also get free access to Zoom Pro & Figma Pro.
-        </Text>
-        <Button
-                as="a"
-
-href="https://toolbox.hackclub.com/"
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#FF8C37"}}
-        >Discover Toolbox</Button>
-    </Box>
+                <Box sx={{position: "absolute", top: -48, left: -48}}>
+                    <Tilt
+                        options={{perspective: 75}}
+                    >
+                        <Image
+                            alt="mushroom"
+                            sx={{
+                                imageRendering: "pixelated",
+                                display: ["none", "none", "flex"]
+                            }} src="https://cloud-okty851hq-hack-club-bot.vercel.app/0mushroom.png"/>
+                    </Tilt>
+                </Box>
+                <Box sx={{position: "absolute", top: -48, right: -48,
+
+                }}>
+                    <Tilt
+                        options={{perspective: 75}}
+                    >
+                        <Image
+                            alt="pineapple"
+                            sx={{imageRendering: "pixelated",
+                                display: ["none", "none", "flex"]
+                            }} src="https://cloud-fiv5rwxlo-hack-club-bot.vercel.app/0pineapple.png"/>
+                    </Tilt>
+                </Box>
+                <Box sx={{position: "absolute", bottom: -48, left: -48}}>
+                    <Tilt
+                        options={{perspective: 75}}
+                    >
+                        <Image
+
+                            alt="tomato"
+                            sx={{imageRendering: "pixelated",
+                                display: ["none", "none", "flex"]
+                            }} src="https://cloud-bsv5adze8-hack-club-bot.vercel.app/0tomato.png"/>
+                    </Tilt>
+                </Box>
+                <Box sx={{position: "absolute", bottom: -48, right: -48}}>
+                    <Tilt
+                        options={{perspective: 75}}
+                    >
+                        <Image
+                            alt="pizza"
+                            sx={{imageRendering: "pixelated",
+
+                                display: ["none", "none", "flex"]
+                            }} src="https://cloud-4my12nuf0-hack-club-bot.vercel.app/0pizza.png"/>
+                    </Tilt>
+                </Box>
+                <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, null, '3fr 2fr']}>
+                    <Box>
+                        <Heading
+                            as="h2"
+                            variant="heading"
+                            sx={{
+                                fontSize: [40, 40, 42],
+                                lineHeight: "100%",
+                                paddingBottom: "16px",
+                                span: {
+                                    background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+                                    WebkitBackgroundClip: "text",
+                                    WebkitTextStroke: 'currentColor',
+                                    WebkitTextFillColor: 'transparent'
+                                }
+                            }}
+                        >
+                            Create A Space for Makers
+                        </Heading>
+                        <Text sx={{fontSize: 22}}>
+                            Hack Club is a place for technical teens to get together and build projects together.  Create a club at your high school and help others discover the joy of coding through building projects.
+                        </Text>
+                    </Box>
+                    <Box>
+                        <Image alt="teens collaborating on tech products" sx={{borderRadius: "16px"}} src="https://cloud-r38lu87ej-hack-club-bot.vercel.app/00meta__1_.png"/>
+                    </Box>
+                </Grid>
+                <br/>
+            </Container>
+            <Container sx={{paddingLeft: 16, paddingRight: 16}}>
+                <Grid sx={{marginTop: 32, width: "100%", paddingLeft: 0, paddingRight: 0}} gap={4} columns={[null, null, '1fr 1fr 1fr']}>
+                    <Box sx={{backgroundColor: "#E1A300", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+                        <Heading
+                            as="h2"
+                            variant="heading"
+                            sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+                        >
+                            Join A Community of Teen Hackers
+                        </Heading>
+                        <Text sx={{fontSize: 18, display: "block"}}>
+                            In our Slack community of over 25,000 hackers, you'll be invited to a space for Hack Club leaders to ask questions & chat, share projects, & attend events.
+                        </Text>
+                        <Button
+                            href="/slack"
+                            as="a"
+                            sx={{marginTop: 16, backgroundColor: "#fff", color: "#EEA820"}}
+                        >Join The Slack</Button>
+                    </Box>
+
+                    <Box sx={{backgroundColor: "#F48801", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+                        <Heading
+                            as="h2"
+                            variant="heading"
+                            sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+                        >
+                            Tools & Perks To Lead Your Club
+                        </Heading>
+                        <Text sx={{fontSize: 18, display: "block"}}>
+                            As a club leader, you'll get to use community projects like Sprig & Jams in your Hack Club! Your Club will also get free access to Zoom Pro & Figma Pro.
+                        </Text>
+                        <Button
+                            as="a"
+                            href="https://toolbox.hackclub.com/"
+                            sx={{marginTop: 16, backgroundColor: "#fff", color: "#FF8C37"}}
+                        >Discover Toolbox</Button>
+                    </Box>
+                    <Box sx={{backgroundColor: "#F6013B", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
+                        <Heading
+
+                            as="h2"
+                            variant="heading"
+                            sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
+                        >
+                            Lead Weekly
+                            Club Meetings
+                        </Heading>
+                        <Text sx={{fontSize: 18, display: "block"}}>
+                            Every week you can craft club meetings to help makers at your school discover the joy of coding. Get inspired by some Jams we built to help you lead your club.        </Text>
+
+                        <Button
+                            href="https://jams.hackclub.com/"
+                            as="a"
+                            sx={{marginTop: 16, backgroundColor: "#fff", color: "#EC3750"}}
+                        >Explore Jams</Button>
+                    </Box>
+                </Grid>
+
+            </Container>
+            <Box>
+                <Container sx={{marginTop: 32, padding: "16px"}}>
+                    <Heading
+                        as="h2"
+                        variant="heading"
+                        sx={{padding: 0,
+                            background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+                            fontSize: [28, 34, 36],
+                            background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
+                            WebkitBackgroundClip: "text",
+                            WebkitTextFillColor: 'transparent',
+                            filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
+
+                        }}
+                    >
+                        Pizzas & Clubs by Leaders
+                    </Heading>        </Container>
+                <Ticker speed={3} sx={{ overflowX: 'hidden' }}>
+                    {() => (
+                        <Box
+                            as="div"
+                            sx={{ display: 'flex', py: [4, 5, 5] }}
+                        >
+                            {pizzasByClubs.map((pizzaByClub, idx) => (
+                                <Box key={idx} sx={{position: "relative", borderRadius: "16px", padding: "8px 16px 16px 16px", width: ["300px", "500px"], marginLeft: "16px", marginRight: "16px",
+                                    border: "1px solid var(--Muted, #8492A6)"
+                                }}>
+                                    <Tilt
+
+                                        sx={{backgroundColor: "#fff"}} options={{scale: 1.25, perspective: 2000, speed: 500}}>
+                                        <img alt="pizza drawn by club" src={pizzaByClub.sprite} style={{position: "absolute", width: "48px", top: "-16px", left: "-16px", height: "48px", padding: "8px",
+                                            imageRendering: "pixelated",
+                                            borderRadius: "8px",
+                                            border: `1.75px solid ${getColor(idx)}`,
+                                            backgroundColor: "#fff",
+                                            zIndex: 2
+                                        }}/>
+                                    </Tilt>
+                                    <Text sx={{paddingLeft: "24px", fontSize: [18, 18, 22], fontWeight: 600,
+                                        background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
+                                        WebkitBackgroundClip: "text",
+                                        WebkitTextFillColor: 'transparent',
+                                        filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
+
+
+                                    }}>{pizzaByClub.author} ({pizzaByClub.age}) from {pizzaByClub.from}</Text>
+                                    <br/>
+                                    <Text sx={{paddingTop: "16px", fontSize: [16, 18]}}>{pizzaByClub.response}</Text>
+                                </Box>
+                            ))}
+                        </Box>
+                    )}
+                </Ticker>
 
-    <Box sx={{backgroundColor: "#F6013B", padding: 32,  margin: 0, borderRadius: "24px", color: "#fff"}}>
-        <Heading
-        
-        as="h2"
-        variant="heading"
-        sx={{padding: 0, marginBottom: "8px", fontSize: 36}}
-        >
-            Lead Weekly 
-            Club Meetings   
-        </Heading>
-
-        <Text sx={{fontSize: 18, display: "block"}}>
-        Every week you can craft club meetings to help makers at your school discover the joy of coding. Get inspired by some Jams we built to help you lead your club.        </Text>
-        
-        <Button
-href="https://jams.hackclub.com/"
-as="a"
-
-        sx={{marginTop: 16, backgroundColor: "#fff", color: "#EC3750"}}
-        >Explore Jams</Button>
-    </Box>
-
-
-    </Grid>
-    
-    </Container>
-    <Box>
-        <Container sx={{marginTop: 32, padding: "16px"}}>
-        <Heading
-        as="h2"
-        variant="heading"
-        sx={{padding: 0,
-          background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-           fontSize: [28, 34, 36],
-            background: "linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)",
-            WebkitBackgroundClip: "text",
-              WebkitTextFillColor: 'transparent',
-              filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
-        
-        }}
-        >
-            Pizzas & Clubs by Leaders
-            </Heading>        </Container>
-
-
-
-            <Ticker speed={3} sx={{ overflowX: 'hidden' }}>
-            {() => (
-              <Box
-                as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
-
-              >
-                {pizzasByClubs.map((pizzaByClub, idx) => (
-                  <Box key={idx} sx={{position: "relative", borderRadius: "16px", padding: "8px 16px 16px 16px", width: ["300px", "500px"], marginLeft: "16px", marginRight: "16px", 
-                  border: "1px solid var(--Muted, #8492A6)"
-                  }}>
-                    <Tilt 
-  
-                    sx={{backgroundColor: "#fff"}} options={{scale: 1.25, perspective: 2000, speed: 500}}>
-                    <img alt="pizza drawn by club" src={pizzaByClub.sprite} style={{position: "absolute", width: "48px", top: "-16px", left: "-16px", height: "48px", padding: "8px",
-                  imageRendering: "pixelated",
-                  borderRadius: "8px",
-                  border: `1.75px solid ${getColor(idx)}`,
-                  backgroundColor: "#fff",
-                  zIndex: 2
-                }}/>
-                </Tilt>
-                    <Text sx={{paddingLeft: "24px", fontSize: [18, 18, 22], fontWeight: 600,
-
-                                background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%)",
-                                WebkitBackgroundClip: "text",
-                                  WebkitTextFillColor: 'transparent',
-                                  filter: "drop-shadow(0px 3.171428680419922px 16px rgba(0, 0, 0, 0.15))"
-                            
-                  
-                  }}>{pizzaByClub.author} ({pizzaByClub.age}) from {pizzaByClub.from}</Text>
-                    <br/>
-                    <Text sx={{paddingTop: "16px", fontSize: [16, 18]}}>{pizzaByClub.response}</Text>
-                  </Box>
-                ))}
-              </Box>
-            )}
-          </Ticker>
- 
-    </Box>
-        
-    <Container sx={{padding: "16px"}}>
-      <Box
-      sx={{
-        borderRadius: "16px",
-background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
-boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
-padding: ["24px", "32px"],
-        marginBottom: "64px"
-      }}
-      >
-        <p 
-                id="GetPizza"
-
-        style={{marginTop: "-128px", opacity: 0, position: "absolute"}}>
-          Above
-        </p>
-                <Heading
-        as="h2"
-        variant="heading"
-        sx={{
-          fontSize: 36,
-          color: "#fff",
-          fontWeight: 600 ,
-          marginBottom: ["16px", "16px", "0px"]
-        }}
-        >
-            Get Your Pizza
-            </Heading>
-
-            <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, '2.5fr 3fr 2.5fr']}>
-            
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="1. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Start Your Club</Text>
-              </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Every Hack Club starts with a teenager like you who wants to bring an amazing community to their high school.
-              </Text>
-              <Image alt="teen club of coders" sx={{width: ["75%", "75%", "40%"], borderRadius: "16px", marginTop: "8px", marginBottom: "8px"}} src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"/>
-              <Box>
-              <Button
-              variant="outline"
-              as="a"
-              href="/clubs"
-              mt={[3, 0, 0]}
-              sx={{
-                fontSize: "18px"
-              }}
-            >
-              Start A Club
-            </Button>
             </Box>
 
-            </Box>
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="2. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Draw A Pizza</Text>
-              </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Join <Link  href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link> on the Hack Club  Slack & draw a Pixel Pizza
+            <Container sx={{padding: "16px"}}>
+                <Box
+                    sx={{
+                        borderRadius: "16px",
+                        background: "linear-gradient(95deg, #EC3750 0%, #FF8C37 100%), #D9D9D9",
+                        boxShadow: "0px 3.17143px 16px 0px rgba(0, 0, 0, 0.15)",
+                        padding: ["24px", "32px"],
+                        marginBottom: "64px"
+                    }}
+                >
+                    <p
+                        id="GetPizza"
+                        style={{marginTop: "-128px", opacity: 0, position: "absolute"}}>
+                        Above
+                    </p>
+                    <Heading
+                        as="h2"
+                        variant="heading"
+                        sx={{
+                            fontSize: 36,
+                            color: "#fff",
+                            fontWeight: 600 ,
+                            marginBottom: ["16px", "16px", "0px"]
+                        }}
+                    >
+                        Get Your Pizza
+                    </Heading>
+                    <Grid sx={{alignItems: "center", position: "relative"}} gap={[2, 3]} columns={[null, null, '2.5fr 3fr 2.5fr']}>
+
+
+                        <Box sx={{
+                            backgroundColor: "#fff",
+                            padding: "16px",
+                            borderRadius: "16px"
+                        }}>
+                            <Box sx={{display: "flex", alignItems: "center"}}>
+                                <img alt="1. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-2prihxd69-hack-club-bot.vercel.app/0group_12.png"/>
+                                <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Start Your Club</Text>
+                            </Box>
+                            <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+                                Every Hack Club starts with a teenager like you who wants to bring an amazing community to their high school.
                             </Text>
-              <img alt="pixel editor gif" style={{width: "75%", borderRadius: "16px", marginTop: "12px", marginBottom: "8px"}} src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"/>
-              <Box>
-              <Button
-              variant="cta"
-              as="a"
-              href="/slack"
-              mt={[3, 0, 0]}
-              sx={{
-                fontSize: "18px"
-              }}
-            >
-              Join The Slack
-            </Button>
-            </Box>
-
-            </Box>
-            
-            <Box sx={{
-              backgroundColor: "#fff",
-              padding: "16px",
-              borderRadius: "16px"
-            }}>
-              <Box sx={{display: "flex", alignItems: "center"}}>
-              <img alt="3." style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"/>
-              <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Order Pizza</Text>
-              </Box>
-              <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
-              Receive a Pizza Grant through HCB & use your HCB Virtual Card to order pizzas
-              </Text>
-              <Tilt
-              sx={{
-                boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
-              }}
-    >
-              <img alt="HCB Card" style={{width: "75%", borderRadius: "8px", marginTop: "12px", marginBottom: "8px",
-                            boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
-
-            }} src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"/>
-              </Tilt>
-                <Box>
-            </Box>
-
-            </Box>
-
-            </Grid>
-
-      </Box>
-      <Box sx={{fontSize: 20, textAlign: "center", display: "flex", justifyContent: "center", marginBottom: "64px"}}>
-        <Text sx={{border: "1px solid #EC3750", color: "#EC3750", padding: "16px 32px", borderRadius: "32px"}}>p.s. if you already lead a club, you can still get pizza! draw  a pizza in<Link style={{marginLeft: "8px"}} href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link></Text>
-      </Box>
-    </Container>    
-    <Footer dark 
-            
-            sx={{
-              backgroundColor: 'dark',
-              position: 'relative',
-              overflow: 'hidden',
-              textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-              'h2,span,p,a': { color: 'white !important' },
-              '> div img': { objectPosition: ['left', 'center'] },
-              svg: {
-                fill: 'white',
-                filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-              }
-            }}
-    />
-  </>
-)}
-
-export default PizzaPage
+                            <Image alt="teen club of coders" sx={{width: ["75%", "75%", "40%"], borderRadius: "16px", marginTop: "8px", marginBottom: "8px"}} src="https://cloud-k4ohqgmro-hack-club-bot.vercel.app/00style__1_.png"/>
+                            <Box>
+                                <Button
+                                    variant="outline"
+                                    as="a"
+                                    href="/clubs"
+                                    mt={[3, 0, 0]}
+                                    sx={{
+                                        fontSize: "18px"
+                                    }}
+                                >
+                                    Start A Club
+                                </Button>
+                            </Box>
+                        </Box>
+
+                        <Box sx={{
+                            backgroundColor: "#fff",
+                            padding: "16px",
+                            borderRadius: "16px"
+                        }}>
+                            <Box sx={{display: "flex", alignItems: "center"}}>
+                                <img alt="2. " style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-e10qi7h3q-hack-club-bot.vercel.app/0frame_18.png"/>
+                                <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Draw A Pizza</Text>
+                            </Box>
+                            <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+                                Join <Link  href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link> on the Hack Club  Slack & draw a Pixel Pizza
+                            </Text>
+                            <img alt="pixel editor gif" style={{width: "75%", borderRadius: "16px", marginTop: "12px", marginBottom: "8px"}} src="https://cloud-bpufnmh9d-hack-club-bot.vercel.app/0samplevideo-min.gif"/>
+                            <Box>
+                                <Button
+                                    variant="cta"
+                                    as="a"
+                                    href="/slack"
+                                    mt={[3, 0, 0]}
+                                    sx={{
+                                        fontSize: "18px"
+                                    }}
+                                >
+                                    Join The Slack
+                                </Button>
+                            </Box>
+                        </Box>
+
+                        <Box sx={{
+                            backgroundColor: "#fff",
+                            padding: "16px",
+                            borderRadius: "16px"
+                        }}>
+                            <Box sx={{display: "flex", alignItems: "center"}}>
+                                <img alt="3." style={{height: "32px", width: "32px", marginRight: "12px"}} src="https://cloud-et18ikluu-hack-club-bot.vercel.app/0group_14.png"/>
+                                <Text sx={{color: "#000", fontSize: 26, display: "block", fontWeight: 600}}>Order Pizza</Text>
+                            </Box>
+                            <Text sx={{ color: "#000", marginTop: "8px", display: "block", fontSize: 18, fontWeight: 500, lineHeight: "150%" }}>
+                                Receive a Pizza Grant through HCB & use your HCB Virtual Card to order pizzas
+                            </Text>
+                            <Tilt
+                                sx={{
+                                    boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
+                                }}
+                            >
+                                <img alt="HCB Card" style={{width: "75%", borderRadius: "8px", marginTop: "12px", marginBottom: "8px",
+                                    boxShadow: "0px 3.17143px 3.17143px 0px rgba(0, 0, 0, 0.25)"
+                                }} src="https://cloud-hvhkt3xxi-hack-club-bot.vercel.app/00screenshot_2023-09-06_at_2.32_1__1_.png"/>
+                            </Tilt>
+                            <Box>
+                            </Box>
+                        </Box>
+                    </Grid>
+
+                </Box>
+                <Box sx={{fontSize: 20, textAlign: "center", display: "flex", justifyContent: "center", marginBottom: "32px"}}>
+                    <Text sx={{border: "1px solid #EC3750", color: "#EC3750", padding: "16px 32px", borderRadius: "32px"}}>p.s. if you already lead a club, you can still get pizza! draw  a pizza in<Link style={{marginLeft: "8px"}} href="https://hackclub.slack.com/archives/C05RZ6K7RS5">#pizza-party</Link></Text>
+
+
+                </Box>
+                <Text style={{textAlign: "center", width: "100%", fontSize: 18, display: "flex", justifyContent: "center", marginBottom: "32px"}}>Need help getting your Pizza Grant? Email <Link href="mailto:holly@hackclub.com" style={{marginLeft: 6}}>holly@hackclub.com</Link></Text>
+
+            </Container>
+            <Footer dark
+                    Expand Down
+                    sx={{
+                        backgroundColor: 'dark',
+                        position: 'relative',
+                        overflow: 'hidden',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+                        'h2,span,p,a': { color: 'white !important' },
+                        '> div img': { objectPosition: ['left', 'center'] },
+                        svg: {
+                            fill: 'white',
+                            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+                        }
+                    }}
+            />
+        </>
+    )}
+export default PizzaPage
\ No newline at end of file

From 43f24154041e8ec75caca251c1060ccf7935dc9b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 012/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 2599d035d613ee562a422b791152514253f14a77 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 013/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 202 +++++++++++++++----------
 components/mail-card.js                |  23 +++
 public/home/letter-pattern.svg         |  37 +++++
 3 files changed, 181 insertions(+), 81 deletions(-)
 create mode 100644 components/mail-card.js
 create mode 100644 public/home/letter-pattern.svg

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,102 +1,114 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
-const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1050px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +117,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +131,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,37 +147,60 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..e3e1c217a
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,23 @@
+import { Card, Text } from "theme-ui";
+import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
+
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
+  );
+}
\ No newline at end of file
diff --git a/public/home/letter-pattern.svg b/public/home/letter-pattern.svg
new file mode 100644
index 000000000..23bda7942
--- /dev/null
+++ b/public/home/letter-pattern.svg
@@ -0,0 +1,37 @@
+<svg width="293" height="6" viewBox="0 0 293 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6L10.9823 0H15.4038L12.4215 6H8Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.421509 6L3.40379 0H7.82527L4.843 6H0.421509Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6L26.9823 0H31.4038L28.4215 6H24Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4215 6L35.4038 0H39.8253L36.843 6H32.4215Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.843 6L43.8253 0H48.2468L45.2645 6H40.843Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5785 6L18.5608 0H22.9823L20 6H15.5785Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2645 6L52.2468 0H56.6683L53.686 6H49.2645Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.686 6L60.6683 0H65.0898L62.1075 6H57.686Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1075 6L69.0898 0H73.5113L70.529 6H66.1075Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5291 6L77.5113 0H81.9328L78.9505 6H74.5291Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9506 6L85.9328 0H90.3543L87.372 6H82.9506Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3721 6L94.3543 0H98.7758L95.7936 6H91.3721Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.7936 6L102.776 0H107.197L104.215 6H99.7936Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.215 6L111.197 0H115.619L112.637 6H108.215Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.637 6L119.619 0H124.04L121.058 6H116.637Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.058 6L128.04 0H132.462L129.48 6H125.058Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M133.48 6L136.462 0H140.883L137.901 6H133.48Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.901 6L144.883 0H149.305L146.323 6H141.901Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.323 6L153.305 0H157.726L154.744 6H150.323Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.744 6L161.726 0H166.148L163.166 6H158.744Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.166 6L170.148 0H174.569L171.587 6H167.166Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.587 6L178.569 0H182.991L180.009 6H175.587Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.009 6L186.991 0H191.412L188.43 6H184.009Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.43 6L195.412 0H199.834L196.852 6H192.43Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200.852 6L203.834 0H208.255L205.273 6H200.852Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.273 6L212.255 0H216.677L213.695 6H209.273Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.695 6L220.677 0H225.098L222.116 6H217.695Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.116 6L229.098 0H233.52L230.538 6H226.116Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.538 6L237.52 0H241.941L238.959 6H234.538Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M242.959 6L245.942 0H250.363L247.381 6H242.959Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.381 6L254.363 0H258.785L255.802 6H251.381Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.802 6L262.785 0H267.206L264.224 6H259.802Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.224 6L271.206 0H275.628L272.645 6H268.224Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.645 6L279.628 0H284.049L281.067 6H276.645Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M285.067 6L288.049 0H292.471L289.488 6H285.067Z" fill="#EC3750"/>
+</svg>

From 0d43260f8b64aa98f7e2eb7fe7eca79056c91071 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 014/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 26c2b87ceebf5ce96d68a952f318131a03e68c73 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 015/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/team.js                                 |  92 +-
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 208 files changed, 8049 insertions(+), 8033 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/team.js b/pages/team.js
index 2209c007d..1fd379af6 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Bio from '../components/bio'
-import ForceTheme from '../components/force-theme'
+import { Box, Container, Text, Grid, Flex } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Bio from "../components/bio";
+import ForceTheme from "../components/force-theme";
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: '75%'
+              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "75%",
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: '650px' }}
+              sx={{ maxWidth: "650px" }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: 'rgb(51 142 218 / 40%)',
+                bg: "rgb(51 142 218 / 40%)",
                 p: 3,
-                borderRadius: '20px',
+                borderRadius: "20px",
                 mb: 3,
                 gap: 3,
-                flexWrap: ['wrap', null, null, 'nowrap']
+                flexWrap: ["wrap", null, null, "nowrap"],
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: 'center',
+                  textAlign: "center",
                   fontSize: 4,
-                  writingMode: [null, null, null, 'vertical-rl'],
+                  writingMode: [null, null, null, "vertical-rl"],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, 'rotate(180deg)'],
-                  width: ['100%', null, null, 'fit-content'],
+                  transform: [null, null, null, "rotate(180deg)"],
+                  width: ["100%", null, null, "fit-content"],
                   marginBottom: [
-                    '0px!important',
-                    '0px!important',
-                    '0px!important',
-                    3
-                  ]
+                    "0px!important",
+                    "0px!important",
+                    "0px!important",
+                    3,
+                  ],
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(51 214 166 / 40%)',
+                    bg: "rgb(51 214 166 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: 'rgb(255 142 55 / 40%)',
+                    bg: "rgb(255 142 55 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: 'rgb(236 55 80 / 40%)',
+                    bg: "rgb(236 55 80 / 40%)",
                     p: 3,
-                    borderRadius: '20px'
+                    borderRadius: "20px",
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: 'fit-content' }}
+                    sx={{ height: "fit-content" }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: 'rgb(166 51 214 / 40%)',
+                    bg: "rgb(166 51 214 / 40%)",
                     p: 3,
-                    borderRadius: '20px',
-                    mt: 3
+                    borderRadius: "20px",
+                    mt: 3,
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
+                    sx={{ textAlign: "center", fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: '1.2',
+                  lineHeight: "1.2",
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: '600px',
-                  width: '100%',
-                  margin: 'auto'
+                  maxWidth: "600px",
+                  width: "100%",
+                  margin: "auto",
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  )
+  );
 }
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 6dde5d030300e6b33989561aa85c08d00b169bff Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 016/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From fbfd3e0bfb51bf7607e2a00022f03148c5fae602 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 017/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From bab735d24fd60e7146c85bddadece854d3be6dfe Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 018/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 1f170eae839d1fe5c539a34924f8c9621ecda1a5 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 019/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/team.js                                 |  92 +-
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 208 files changed, 7998 insertions(+), 8035 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/events.js b/pages/events.js
index a9fa40268..215013565 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Icon from "../components/icon";
-import Image from "next/image";
-import OuternetPic from "../public/outernet/hack.jpg";
-import { compact } from "lodash";
-import theme from "@hackclub/theme";
+  Divider
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Icon from '../components/icon'
+import Image from 'next/image'
+import OuternetPic from '../public/outernet/hack.jpg'
+import { compact } from 'lodash'
+import theme from '@hackclub/theme'
 
 const events = [
   {
-    name: "Outernet",
+    name: 'Outernet',
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
-    location: "Cabot, Vermont",
-    season: "Summer",
-    year: "2023",
-    repo: "outernet",
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
+    location: 'Cabot, Vermont',
+    season: 'Summer',
+    year: '2023',
+    repo: 'outernet',
     image:
-      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
-    link: "https://github.com/hackclub/outernet",
+      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
+    link: 'https://github.com/hackclub/outernet'
   },
   {
-    name: "Epoch",
+    name: 'Epoch',
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: "Delhi NCR, India",
-    season: "Winter",
-    year: "2022/23",
-    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
-    repo: "epoch",
+    location: 'Delhi NCR, India',
+    season: 'Winter',
+    year: '2022/23',
+    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
+    repo: 'epoch'
   },
   {
-    name: "Assemble",
-    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
+    name: 'Assemble',
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
     description:
-      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2022",
-    video: "https://youtube.com/embed/PnK4gzO6S3Q",
-    repo: "assemble",
+      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2022',
+    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
+    repo: 'assemble'
   },
   {
-    name: "The Hacker Zephyr",
-    logo: "https://hackclub.com/stickers/zephyr.svg",
+    name: 'The Hacker Zephyr',
+    logo: 'https://hackclub.com/stickers/zephyr.svg',
     description:
-      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
-    location: "Burlington (VT) to Los Angeles (CA)",
-    season: "Summer",
-    year: "2021",
-    video: "https://youtube.com/embed/2BID8_pGuqA",
-    repo: "the-hacker-zephyr",
+      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
+    location: 'Burlington (VT) to Los Angeles (CA)',
+    season: 'Summer',
+    year: '2021',
+    video: 'https://youtube.com/embed/2BID8_pGuqA',
+    repo: 'the-hacker-zephyr'
   },
   {
-    name: "Summer of Making",
-    logo: "https://hackclub.com/stickers/summer_of_making.svg",
+    name: 'Summer of Making',
+    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
     description:
-      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
-    location: "Online (thanks COVID-19!)",
-    season: "Summer",
-    year: "2020",
+      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
+    location: 'Online (thanks COVID-19!)',
+    season: 'Summer',
+    year: '2020',
     image:
-      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
-    link: "https://scrapbook.hackclub.com/r/summer-of-making",
-    ghTag: "summer-of-making",
+      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
+    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
+    ghTag: 'summer-of-making'
   },
   {
-    name: "Flagship",
-    logo: "https://hackclub.com/stickers/ship.png",
+    name: 'Flagship',
+    logo: 'https://hackclub.com/stickers/ship.png',
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2019",
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2019',
     image:
-      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
-    link: "https://hack.af/flagship-album",
-  },
-];
+      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
+    link: 'https://hack.af/flagship-album'
+  }
+]
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link,
+  link
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: "center", mb: 2 }}>
-      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
+    <Flex sx={{ alignItems: 'center', mb: 2 }}>
+      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: "8px", mt: 2 }}
+        sx={{ borderRadius: '8px', mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: "8px",
+            borderRadius: '8px',
             mt: 2,
-            height: "250px",
-            objectFit: "cover",
-            width: "100%",
-            objectPosition: "top",
+            height: '250px',
+            objectFit: 'cover',
+            width: '100%',
+            objectPosition: 'top'
           }}
         />
       </a>
     )}
-    <Box sx={{ color: "darkless" }}>
+    <Box sx={{ color: 'darkless' }}>
       <b>
         {season}, {year} - {location}
-      </b>{" "}
+      </b>{' '}
     </Box>
     <Box>
-      {" "}
+      {' '}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace("https://", "")}</>
+          <>{link.replace('https://', '')}</>
         </Link>
       )}
     </Box>
   </Card>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
-              textShadow: "elevated",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white',
+              textShadow: 'elevated'
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.325"],
-              maxWidth: "900px",
-              margin: "auto",
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.325'],
+              maxWidth: '900px',
+              margin: 'auto',
               fontWeight: 400,
-              textShadow: "small",
+              textShadow: 'small'
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
+            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: "center",
-            background: theme.util.gx("cyan", "blue"),
-            color: "white",
-            width: "100%",
-            maxWidth: "64rem",
-            mx: "auto",
+            textAlign: 'center',
+            background: theme.util.gx('cyan', 'blue'),
+            color: 'white',
+            width: '100%',
+            maxWidth: '64rem',
+            mx: 'auto',
             mt: 3,
-            fontSize: 2,
+            fontSize: 2
           }}
         >
-          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
+          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{" "}
+            Check them out at{' '}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{" "}
+            . Hack Club is also behind a series of{' '}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               Day of Service
-            </Link>{" "}
-            events and{" "}
+            </Link>{' '}
+            events and{' '}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/team.js b/pages/team.js
index 1fd379af6..2209c007d 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -1,10 +1,10 @@
-import { Box, Container, Text, Grid, Flex } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Bio from "../components/bio";
-import ForceTheme from "../components/force-theme";
+import { Box, Container, Text, Grid, Flex } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Bio from '../components/bio'
+import ForceTheme from '../components/force-theme'
 
 export default function Team() {
   return (
@@ -23,9 +23,9 @@ export default function Team() {
           px={[2, 4]}
           sx={{
             backgroundImage:
-              "radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)",
-            backgroundSize: "cover",
-            backgroundPosition: "75%",
+              'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: '75%'
           }}
         >
           <Container>
@@ -38,7 +38,7 @@ export default function Team() {
               as="div"
               variant="lead"
               color="smoke"
-              sx={{ maxWidth: "650px" }}
+              sx={{ maxWidth: '650px' }}
             >
               We believe in a world where every young person is empowered to be
               the change they want to see around them. At Hack Club, we’re
@@ -50,12 +50,12 @@ export default function Team() {
           <Container>
             <Flex
               sx={{
-                bg: "rgb(51 142 218 / 40%)",
+                bg: 'rgb(51 142 218 / 40%)',
                 p: 3,
-                borderRadius: "20px",
+                borderRadius: '20px',
                 mb: 3,
                 gap: 3,
-                flexWrap: ["wrap", null, null, "nowrap"],
+                flexWrap: ['wrap', null, null, 'nowrap']
               }}
             >
               <Text
@@ -63,18 +63,18 @@ export default function Team() {
                 my={[0, 0, 3]}
                 as="h3"
                 sx={{
-                  textAlign: "center",
+                  textAlign: 'center',
                   fontSize: 4,
-                  writingMode: [null, null, null, "vertical-rl"],
+                  writingMode: [null, null, null, 'vertical-rl'],
                   mr: [0, 0, 0, 2],
-                  transform: [null, null, null, "rotate(180deg)"],
-                  width: ["100%", null, null, "fit-content"],
+                  transform: [null, null, null, 'rotate(180deg)'],
+                  width: ['100%', null, null, 'fit-content'],
                   marginBottom: [
-                    "0px!important",
-                    "0px!important",
-                    "0px!important",
-                    3,
-                  ],
+                    '0px!important',
+                    '0px!important',
+                    '0px!important',
+                    3
+                  ]
                 }}
               >
                 Our Board
@@ -127,9 +127,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: "rgb(51 214 166 / 40%)",
+                    bg: 'rgb(51 214 166 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
+                    borderRadius: '20px'
                   }}
                 >
                   <Text
@@ -137,7 +137,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Hacker Resources Team
                   </Text>
@@ -210,10 +210,10 @@ export default function Team() {
                 </Box>
                 <Box
                   sx={{
-                    bg: "rgb(255 142 55 / 40%)",
+                    bg: 'rgb(255 142 55 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
-                    mt: 3,
+                    borderRadius: '20px',
+                    mt: 3
                   }}
                 >
                   <Text
@@ -221,14 +221,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Communications & Philanthropy
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: "fit-content" }}
+                    sx={{ height: 'fit-content' }}
                   >
                     <Bio
                       name="Belle See"
@@ -257,9 +257,9 @@ export default function Team() {
               <Box>
                 <Box
                   sx={{
-                    bg: "rgb(236 55 80 / 40%)",
+                    bg: 'rgb(236 55 80 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
+                    borderRadius: '20px'
                   }}
                 >
                   <Text
@@ -267,14 +267,14 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     HCB Team
                   </Text>
                   <Grid
                     columns={[1, null, 2]}
                     gap={2}
-                    sx={{ height: "fit-content" }}
+                    sx={{ height: 'fit-content' }}
                   >
                     <Bio
                       img="/team/max.jpg"
@@ -345,10 +345,10 @@ export default function Team() {
 
                 <Box
                   sx={{
-                    bg: "rgb(166 51 214 / 40%)",
+                    bg: 'rgb(166 51 214 / 40%)',
                     p: 3,
-                    borderRadius: "20px",
-                    mt: 3,
+                    borderRadius: '20px',
+                    mt: 3
                   }}
                 >
                   <Text
@@ -356,7 +356,7 @@ export default function Team() {
                     mt={2}
                     mb={3}
                     as="h3"
-                    sx={{ textAlign: "center", fontSize: 4 }}
+                    sx={{ textAlign: 'center', fontSize: 4 }}
                   >
                     Community Team
                   </Text>
@@ -415,11 +415,11 @@ export default function Team() {
               </Box>
             </Grid>
             <br />
-            <Box sx={{ textAlign: "center", mt: 2, mb: [3, 4] }}>
+            <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
               <Text
                 variant="title"
                 color="orange"
-                sx={{ lineHeight: "1em", fontSize: [4, 5, 6] }}
+                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
                 as="h2"
               >
                 Acknowledgements
@@ -428,13 +428,13 @@ export default function Team() {
                 variant="title"
                 color="text"
                 sx={{
-                  lineHeight: "1.2",
+                  lineHeight: '1.2',
                   fontSize: [1, 3, 4],
                   my: [3, 0, 0],
                   fontWeight: 400,
-                  maxWidth: "600px",
-                  width: "100%",
-                  margin: "auto",
+                  maxWidth: '600px',
+                  width: '100%',
+                  margin: 'auto'
                 }}
                 as="h2"
               >
@@ -612,5 +612,5 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
       </Box>
       <Footer light key="footer" />
     </>
-  );
+  )
 }
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From ca4dcc7e312e5c61c8654deb37fef3fcbb61b726 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 020/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From efb88cd958dabf08e0b6e878874bc3fd8e084869 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 021/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 48b04f2c60a6cc049ba5dfd12299b06eeeab088d Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 4 Oct 2023 21:38:17 +0100
Subject: [PATCH 022/111] bloody merge conflicts!

---
 components/index/cards/mailing-list.js | 17 +++++-------
 components/mail-card.js                | 36 ++++++++++++--------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..01da5d337 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -76,7 +76,7 @@ const MailingList = () => {
               alignItems: ["left", "left", "center"],
               flexDirection: "column",
               gap: "10px",
-              width: "75%",
+              width: ["100%", "75%"],
             }}
           >
             <Box>
@@ -160,29 +160,26 @@ const MailingList = () => {
                 )}
               </Button>
             </Grid>
-            {/*{submitted && (
-                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
-                    <Icon glyph="send" />
-                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
-                </Alert>
-            )}*/}
           </Flex>
           <Box
             sx={{
               display: "grid",
               gridGap: 4,
+              mt: [4, 0],
               width: "100%",
             }}
           >
             <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+              subject="👀 What’s up at Hack Club this time? 👀"
+              date="August 2022"
+              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
+              link="/newsletter/2022/07"
             />
             <MailCard
               subject="Community Newsletter"
               date="September 2022"
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+              link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..2eea2db92 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,18 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+export default function MailCard({ body, date, subject, link }) {
+  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
+    <Card
+      variant="interactive"
+      sx={{
+        maxWidth: "1500px",
+        cursor: "pointer",
+      }}
+    >
+      <Link href={link || "/newsletter"}>
+        <div>
           <Box
             sx={{
               width: "100%",
@@ -27,14 +23,14 @@ export default function MailCard(mail) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
+            {subject}
           </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>
-        </Box>
-      </Card>
-    </Link>
+        </div>
+      </Link>
+    </Card>
   );
 }

From 1cda84f338680955a8146ee2d063f35504d0e1fa Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Thu, 5 Oct 2023 08:35:35 +0100
Subject: [PATCH 023/111] updating copy + fixing links

---
 components/index/cards/mailing-list.js | 4 ++--
 components/mail-card.js                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 01da5d337..1d952fa12 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -173,7 +173,7 @@ const MailingList = () => {
               subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022/07"
+              link="/newsletter/2022-08-august/"
             />
             <MailCard
               subject="Community Newsletter"
diff --git a/components/mail-card.js b/components/mail-card.js
index 2eea2db92..7b4dec7d0 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -25,7 +25,7 @@ export default function MailCard({ body, date, subject, link }) {
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
             {subject}
           </Text>
-          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To You, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From dd0905fd270787a2e4e923698d2f1af909706029 Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 5 Oct 2023 22:09:45 -0700
Subject: [PATCH 024/111] Update team.js

---
 pages/team.js | 110 ++++++++++++--------------------------------------
 1 file changed, 25 insertions(+), 85 deletions(-)

diff --git a/pages/team.js b/pages/team.js
index 2209c007d..ae1793608 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -230,20 +230,8 @@ export default function Team() {
                     gap={2}
                     sx={{ height: 'fit-content' }}
                   >
-                    <Bio
-                      name="Belle See"
-                      teamRole="Engineer for Comms"
-                      text="Belle enjoys building for her community, whether that be through developing websites or planning programs and events. She is excited to make Hack Club a better place for students around the world and looks forward to learning from the team at Hack Club!"
-                      img="https://github.com/bellesea.png"
-                      pronouns="she/her"
-                    />
-                    <Bio
-                      name="Abby Fischler"
-                      teamRole="Junior Administrative Engineer"
-                      text={`Abby is a high school junior from Los Angeles that loves technology! Since joining the Hack Club community in May 2020, she’s enjoyed learning with friends in the Slack and on board the Hacker Zephyr. She joined Hack Club to support Christina’s work in encouraging more girls to get involved. Abby has hosted events for the community and loves sharing her coding journey on the #ship channel.`}
-                      img="https://github.com/abbyfischler.png"
-                      pronouns="she/her"
-                    />
+                    
+                    
                     <Bio
                       name="Mark Allen"
                       teamRole="AMA Producer"
@@ -339,80 +327,10 @@ export default function Team() {
                       img="https://ca.slack-edge.com/T0266FRGM-U03DFNYGPCN-d76abb1ba329-512"
                       pronouns="he/him"
                       video="https://www.youtube-nocookie.com/embed/POv-3yIPSWc?si=25WKed0HkazCZZOz"
+                      spanTwo
                     />
                   </Grid>
                 </Box>
-
-                <Box
-                  sx={{
-                    bg: 'rgb(166 51 214 / 40%)',
-                    p: 3,
-                    borderRadius: '20px',
-                    mt: 3
-                  }}
-                >
-                  <Text
-                    variant="headline"
-                    mt={2}
-                    mb={3}
-                    as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
-                  >
-                    Community Team
-                  </Text>
-                  <Grid columns={[1, null, 2]} gap={2}>
-                    <Bio
-                      name="Claire Wang"
-                      teamRole="Moderation & Events"
-                      text="Claire works on the Community Team and was a previous summer intern. She hopes to make the community both more welcoming and more technical, as well as inspire beginners to love STEM and making. She first joined Hack Club in 8th grade because of an online competition, and has been running a Hack Club ever since then. In addition to CS, she loves neuroscience, sci-fi, debate, and creating Spotify playlists."
-                      img="/team/claire.png"
-                      pronouns="she/her"
-                    />
-                    <Bio
-                      name="Toby Brown"
-                      teamRole="Moderation & Events"
-                      img="https://ca.slack-edge.com/T0266FRGM-U02C9DQ7ZL2-a57a3718241a-512"
-                      pronouns="he/him"
-                    />
-                    <Bio
-                      name="Mutammim"
-                      teamRole="Moderation & Events"
-                      img="https://ca.slack-edge.com/T0266FRGM-U021VLF7880-2bf2660768cc-512"
-                      pronouns="he/him"
-                    />
-                    <Bio
-                      name="Faisal Sayed"
-                      teamRole="Moderation & Events"
-                      img="https://github.com/faisalsayed10.png"
-                      pronouns="he/him"
-                    />
-                    <Bio
-                      name="Maggie Liu"
-                      teamRole="Moderation & Events"
-                      img="https://ca.slack-edge.com/T0266FRGM-U026XSMKEDC-a5beea76faa2-512"
-                      pronouns="she/her"
-                    />
-                    <Bio
-                      name="Sahiti Dasari"
-                      teamRole="Moderation & Events"
-                      img="https://cloud-rb1s4ys4w-hack-club-bot.vercel.app/0pfp.jpg"
-                      pronouns="she/her"
-                    />
-                    <Bio
-                      name="Gaurav Pandey"
-                      teamRole="Moderation & Events"
-                      img="https://ca.slack-edge.com/T0266FRGM-U043Q05KFAA-95e93fd7beff-512"
-                      pronouns="he/him"
-                    />
-                    <Bio
-                      name="Arav Narula"
-                      teamRole="Moderation & Events"
-                      img="https://ca.slack-edge.com/T0266FRGM-U01MPHKFZ7S-7b67dc7c40fb-512"
-                      pronouns="he/him"
-                    />
-                  </Grid>
-                </Box>
-              </Box>
             </Grid>
             <br />
             <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
@@ -479,6 +397,7 @@ export default function Team() {
                 text="Athul started dozens of the largest Hack Clubs in India. After graduating from high school, he joined Hack Club as the Regional Manager of the Asia-Pacific & Africa team where he actively managed hundreds of clubs. Then, as the APAC Director, Athul lead the APAC HQ team dedicated to supporting all of the clubs in the APAC region."
                 pronouns="he/him"
               />
+              
               <Bio
                 name="Harsh Bajpai"
                 teamRole="APAC Clubs"
@@ -508,6 +427,13 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
                 img="https://github.com/quackduck.png"
                 pronouns="he/him"
               />
+              <Bio
+                name="Abby Fischler"
+                teamRole="Junior Administrative Engineer"
+                text={`Abby is a high school junior from Los Angeles that loves technology! Since joining the Hack Club community in May 2020, she’s enjoyed learning with friends in the Slack and on board the Hacker Zephyr. She joined Hack Club to support Christina’s work in encouraging more girls to get involved. Abby has hosted events for the community and loves sharing her coding journey on the #ship channel.`}
+                img="https://github.com/abbyfischler.png"
+                pronouns="she/her"
+              />
               <Bio
                 name="Jessica Card"
                 teamRole="Education Engineer"
@@ -515,6 +441,20 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
                 img="/team/jessica.jpg"
                 pronouns="she/her"
               />
+              <Bio
+                name="Belle See"
+                teamRole="Engineer for Comms"
+                text="Belle enjoys building for her community, whether that be through developing websites or planning programs and events. She is excited to make Hack Club a better place for students around the world and looks forward to learning from the team at Hack Club!"
+                img="https://github.com/bellesea.png"
+                pronouns="she/her"
+              />
+              <Bio
+                name="Claire Wang"
+                teamRole="Community"
+                text="Claire works on the Community Team and was a previous summer intern. She hopes to make the community both more welcoming and more technical, as well as inspire beginners to love STEM and making. She first joined Hack Club in 8th grade because of an online competition, and has been running a Hack Club ever since then. In addition to CS, she loves neuroscience, sci-fi, debate, and creating Spotify playlists."
+                img="/team/claire.png"
+                pronouns="she/her"
+              />
               <Bio
                 name="Rishi Kothari"
                 teamRole="Summer Intern"

From 4625526696fe22b313f3e8a36d1529899a9eb15e Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 5 Oct 2023 22:11:13 -0700
Subject: [PATCH 025/111] Update team.js

---
 pages/team.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/team.js b/pages/team.js
index ae1793608..a74a0ab9f 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -331,6 +331,7 @@ export default function Team() {
                     />
                   </Grid>
                 </Box>
+              </Box>
             </Grid>
             <br />
             <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>

From 1f068653e9fa2f339b0a1c1eef45b62e556b7079 Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 5 Oct 2023 22:13:38 -0700
Subject: [PATCH 026/111] Update team.js

---
 pages/team.js | 40 +++++++---------------------------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/pages/team.js b/pages/team.js
index a74a0ab9f..b9d131e92 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -208,39 +208,6 @@ export default function Team() {
                     />
                   </Grid>
                 </Box>
-                <Box
-                  sx={{
-                    bg: 'rgb(255 142 55 / 40%)',
-                    p: 3,
-                    borderRadius: '20px',
-                    mt: 3
-                  }}
-                >
-                  <Text
-                    variant="headline"
-                    mt={2}
-                    mb={3}
-                    as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
-                  >
-                    Communications & Philanthropy
-                  </Text>
-                  <Grid
-                    columns={[1, null, 2]}
-                    gap={2}
-                    sx={{ height: 'fit-content' }}
-                  >
-                    
-                    
-                    <Bio
-                      name="Mark Allen"
-                      teamRole="AMA Producer"
-                      img="https://ca.slack-edge.com/T0266FRGM-U03Q20XM953-91ae3b0d0243-512"
-                      pronouns="he/him"
-                      spanTwo
-                    />
-                  </Grid>
-                </Box>
               </Box>
               <Box>
                 <Box
@@ -498,6 +465,13 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
                 text="Philippine bred and settled with family in the U.S., Tina shifted her career from marketing and film production to teaching kids in the Clark County School District. At Hack Club, she helped thousands of high school students hack their way to a fabulous future."
                 pronouns="she/her"
               />
+              <Bio
+                  name="Mark Allen"
+                  teamRole="AMA Producer"
+                  img="https://ca.slack-edge.com/T0266FRGM-U03Q20XM953-91ae3b0d0243-512"
+                  pronouns="he/him"
+                  spanTwo
+                />
               <Bio
                 img="/team/dina.jpg"
                 name="Dina Elhanan"

From acfd7bce9d812144be050839e0da0436600e5310 Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 5 Oct 2023 22:15:39 -0700
Subject: [PATCH 027/111] Update team.js

---
 pages/team.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/team.js b/pages/team.js
index b9d131e92..c1d66af00 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -470,7 +470,6 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
                   teamRole="AMA Producer"
                   img="https://ca.slack-edge.com/T0266FRGM-U03Q20XM953-91ae3b0d0243-512"
                   pronouns="he/him"
-                  spanTwo
                 />
               <Bio
                 img="/team/dina.jpg"

From 01274e8c273bc00dcf1faa28216d067bc420bf29 Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 5 Oct 2023 22:17:22 -0700
Subject: [PATCH 028/111] Update team.js

---
 pages/team.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/pages/team.js b/pages/team.js
index c1d66af00..2adf007ec 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -300,6 +300,68 @@ export default function Team() {
                 </Box>
               </Box>
             </Grid>
+            <Box
+              sx={{
+                bg: 'rgb(166 51 214 / 40%)',
+                p: 3,
+                borderRadius: '20px',
+                mt: 3
+              }}
+            >
+              <Text
+                variant="headline"
+                mt={2}
+                mb={3}
+                as="h3"
+                sx={{ textAlign: 'center', fontSize: 4 }}
+              >
+                Community Team
+              </Text>
+              <Grid columns={[2, null, 4]} gap={2}>
+                <Bio
+                  name="Toby Brown"
+                  teamRole="Moderation & Events"
+                  img="https://ca.slack-edge.com/T0266FRGM-U02C9DQ7ZL2-a57a3718241a-512"
+                  pronouns="he/him"
+                />
+                <Bio
+                  name="Mutammim"
+                  teamRole="Moderation & Events"
+                  img="https://ca.slack-edge.com/T0266FRGM-U021VLF7880-2bf2660768cc-512"
+                  pronouns="he/him"
+                />
+                <Bio
+                  name="Faisal Sayed"
+                  teamRole="Moderation & Events"
+                  img="https://github.com/faisalsayed10.png"
+                  pronouns="he/him"
+                />
+                <Bio
+                  name="Maggie Liu"
+                  teamRole="Moderation & Events"
+                  img="https://ca.slack-edge.com/T0266FRGM-U026XSMKEDC-a5beea76faa2-512"
+                  pronouns="she/her"
+                />
+                <Bio
+                  name="Sahiti Dasari"
+                  teamRole="Moderation & Events"
+                  img="https://cloud-rb1s4ys4w-hack-club-bot.vercel.app/0pfp.jpg"
+                  pronouns="she/her"
+                />
+                <Bio
+                  name="Gaurav Pandey"
+                  teamRole="Moderation & Events"
+                  img="https://ca.slack-edge.com/T0266FRGM-U043Q05KFAA-95e93fd7beff-512"
+                  pronouns="he/him"
+                />
+                <Bio
+                  name="Arav Narula"
+                  teamRole="Moderation & Events"
+                  img="https://ca.slack-edge.com/T0266FRGM-U01MPHKFZ7S-7b67dc7c40fb-512"
+                  pronouns="he/him"
+                />
+              </Grid>
+            </Box>
             <br />
             <Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
               <Text

From 0f2610fbd0f6cd8623a46dec6f7e603215348683 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 15:47:55 +0100
Subject: [PATCH 029/111] changes

---
 components/index/cards/mailing-list.js | 39 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 1d952fa12..fd8895339 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,6 +5,22 @@ import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
+import styled from "@emotion/styled";
+import theme from "@hackclub/theme";
+
+/*const Base = styled(Box)`
+  background: ${(props) =>
+    props.dark
+      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
+      : `${theme.colors.snow} url('/pattern.svg') repeat`};
+  ${(props) =>
+    props.dark &&
+    `
+      background-size: ${theme.space[4]}px ${theme.space[4]}px;
+    `} @media print {
+    display: none;
+  }
+`;*/
 
 const Loading = () => (
   <Box
@@ -185,17 +201,18 @@ const MailingList = () => {
         </Flex>
       </Card>
       {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
+        sx={{
+          position: "absolute",
+          display: "block",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 0,
+          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          backgroundImage: `url('/pattern.svg') repeat`,
+        }}
+      />*/}
       <BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"

From 7358a480e788e7133276730230685edc33e12661 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 030/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 202 +++++++++++++++----------
 components/mail-card.js                |  23 +++
 public/home/letter-pattern.svg         |  37 +++++
 3 files changed, 181 insertions(+), 81 deletions(-)
 create mode 100644 components/mail-card.js
 create mode 100644 public/home/letter-pattern.svg

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,102 +1,114 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
-const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1050px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +117,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +131,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,37 +147,60 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..e3e1c217a
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,23 @@
+import { Card, Text } from "theme-ui";
+import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
+
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
+  );
+}
\ No newline at end of file
diff --git a/public/home/letter-pattern.svg b/public/home/letter-pattern.svg
new file mode 100644
index 000000000..23bda7942
--- /dev/null
+++ b/public/home/letter-pattern.svg
@@ -0,0 +1,37 @@
+<svg width="293" height="6" viewBox="0 0 293 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6L10.9823 0H15.4038L12.4215 6H8Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.421509 6L3.40379 0H7.82527L4.843 6H0.421509Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6L26.9823 0H31.4038L28.4215 6H24Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4215 6L35.4038 0H39.8253L36.843 6H32.4215Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.843 6L43.8253 0H48.2468L45.2645 6H40.843Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5785 6L18.5608 0H22.9823L20 6H15.5785Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2645 6L52.2468 0H56.6683L53.686 6H49.2645Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.686 6L60.6683 0H65.0898L62.1075 6H57.686Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1075 6L69.0898 0H73.5113L70.529 6H66.1075Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5291 6L77.5113 0H81.9328L78.9505 6H74.5291Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9506 6L85.9328 0H90.3543L87.372 6H82.9506Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3721 6L94.3543 0H98.7758L95.7936 6H91.3721Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.7936 6L102.776 0H107.197L104.215 6H99.7936Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.215 6L111.197 0H115.619L112.637 6H108.215Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.637 6L119.619 0H124.04L121.058 6H116.637Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.058 6L128.04 0H132.462L129.48 6H125.058Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M133.48 6L136.462 0H140.883L137.901 6H133.48Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.901 6L144.883 0H149.305L146.323 6H141.901Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.323 6L153.305 0H157.726L154.744 6H150.323Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.744 6L161.726 0H166.148L163.166 6H158.744Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.166 6L170.148 0H174.569L171.587 6H167.166Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.587 6L178.569 0H182.991L180.009 6H175.587Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.009 6L186.991 0H191.412L188.43 6H184.009Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.43 6L195.412 0H199.834L196.852 6H192.43Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200.852 6L203.834 0H208.255L205.273 6H200.852Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.273 6L212.255 0H216.677L213.695 6H209.273Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.695 6L220.677 0H225.098L222.116 6H217.695Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.116 6L229.098 0H233.52L230.538 6H226.116Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.538 6L237.52 0H241.941L238.959 6H234.538Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M242.959 6L245.942 0H250.363L247.381 6H242.959Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.381 6L254.363 0H258.785L255.802 6H251.381Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.802 6L262.785 0H267.206L264.224 6H259.802Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.224 6L271.206 0H275.628L272.645 6H268.224Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.645 6L279.628 0H284.049L281.067 6H276.645Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M285.067 6L288.049 0H292.471L289.488 6H285.067Z" fill="#EC3750"/>
+</svg>

From e7264d4b67371f088401484cc1a8bd82969f9a3a Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 031/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From e2ed099e39199c83e6fe307948fc7b1031d59f4b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 032/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 207 files changed, 8003 insertions(+), 7987 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From a3e18ae93fe71c37471d2b5dd68b83a14ac890ff Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 033/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From a1ab3fc66cd538d84c53a560a5fac1d18f031a9c Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 034/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From f0a30b3b7190ecddaf41dd1ac25b26b29d8fa5b8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 035/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 38feff370aed81c142be39fc045fa86d4cce657b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 036/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 207 files changed, 7952 insertions(+), 7989 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/events.js b/pages/events.js
index a9fa40268..215013565 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Icon from "../components/icon";
-import Image from "next/image";
-import OuternetPic from "../public/outernet/hack.jpg";
-import { compact } from "lodash";
-import theme from "@hackclub/theme";
+  Divider
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Icon from '../components/icon'
+import Image from 'next/image'
+import OuternetPic from '../public/outernet/hack.jpg'
+import { compact } from 'lodash'
+import theme from '@hackclub/theme'
 
 const events = [
   {
-    name: "Outernet",
+    name: 'Outernet',
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
-    location: "Cabot, Vermont",
-    season: "Summer",
-    year: "2023",
-    repo: "outernet",
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
+    location: 'Cabot, Vermont',
+    season: 'Summer',
+    year: '2023',
+    repo: 'outernet',
     image:
-      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
-    link: "https://github.com/hackclub/outernet",
+      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
+    link: 'https://github.com/hackclub/outernet'
   },
   {
-    name: "Epoch",
+    name: 'Epoch',
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: "Delhi NCR, India",
-    season: "Winter",
-    year: "2022/23",
-    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
-    repo: "epoch",
+    location: 'Delhi NCR, India',
+    season: 'Winter',
+    year: '2022/23',
+    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
+    repo: 'epoch'
   },
   {
-    name: "Assemble",
-    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
+    name: 'Assemble',
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
     description:
-      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2022",
-    video: "https://youtube.com/embed/PnK4gzO6S3Q",
-    repo: "assemble",
+      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2022',
+    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
+    repo: 'assemble'
   },
   {
-    name: "The Hacker Zephyr",
-    logo: "https://hackclub.com/stickers/zephyr.svg",
+    name: 'The Hacker Zephyr',
+    logo: 'https://hackclub.com/stickers/zephyr.svg',
     description:
-      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
-    location: "Burlington (VT) to Los Angeles (CA)",
-    season: "Summer",
-    year: "2021",
-    video: "https://youtube.com/embed/2BID8_pGuqA",
-    repo: "the-hacker-zephyr",
+      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
+    location: 'Burlington (VT) to Los Angeles (CA)',
+    season: 'Summer',
+    year: '2021',
+    video: 'https://youtube.com/embed/2BID8_pGuqA',
+    repo: 'the-hacker-zephyr'
   },
   {
-    name: "Summer of Making",
-    logo: "https://hackclub.com/stickers/summer_of_making.svg",
+    name: 'Summer of Making',
+    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
     description:
-      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
-    location: "Online (thanks COVID-19!)",
-    season: "Summer",
-    year: "2020",
+      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
+    location: 'Online (thanks COVID-19!)',
+    season: 'Summer',
+    year: '2020',
     image:
-      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
-    link: "https://scrapbook.hackclub.com/r/summer-of-making",
-    ghTag: "summer-of-making",
+      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
+    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
+    ghTag: 'summer-of-making'
   },
   {
-    name: "Flagship",
-    logo: "https://hackclub.com/stickers/ship.png",
+    name: 'Flagship',
+    logo: 'https://hackclub.com/stickers/ship.png',
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2019",
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2019',
     image:
-      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
-    link: "https://hack.af/flagship-album",
-  },
-];
+      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
+    link: 'https://hack.af/flagship-album'
+  }
+]
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link,
+  link
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: "center", mb: 2 }}>
-      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
+    <Flex sx={{ alignItems: 'center', mb: 2 }}>
+      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: "8px", mt: 2 }}
+        sx={{ borderRadius: '8px', mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: "8px",
+            borderRadius: '8px',
             mt: 2,
-            height: "250px",
-            objectFit: "cover",
-            width: "100%",
-            objectPosition: "top",
+            height: '250px',
+            objectFit: 'cover',
+            width: '100%',
+            objectPosition: 'top'
           }}
         />
       </a>
     )}
-    <Box sx={{ color: "darkless" }}>
+    <Box sx={{ color: 'darkless' }}>
       <b>
         {season}, {year} - {location}
-      </b>{" "}
+      </b>{' '}
     </Box>
     <Box>
-      {" "}
+      {' '}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace("https://", "")}</>
+          <>{link.replace('https://', '')}</>
         </Link>
       )}
     </Box>
   </Card>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
-              textShadow: "elevated",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white',
+              textShadow: 'elevated'
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.325"],
-              maxWidth: "900px",
-              margin: "auto",
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.325'],
+              maxWidth: '900px',
+              margin: 'auto',
               fontWeight: 400,
-              textShadow: "small",
+              textShadow: 'small'
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
+            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: "center",
-            background: theme.util.gx("cyan", "blue"),
-            color: "white",
-            width: "100%",
-            maxWidth: "64rem",
-            mx: "auto",
+            textAlign: 'center',
+            background: theme.util.gx('cyan', 'blue'),
+            color: 'white',
+            width: '100%',
+            maxWidth: '64rem',
+            mx: 'auto',
             mt: 3,
-            fontSize: 2,
+            fontSize: 2
           }}
         >
-          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
+          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{" "}
+            Check them out at{' '}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{" "}
+            . Hack Club is also behind a series of{' '}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               Day of Service
-            </Link>{" "}
-            events and{" "}
+            </Link>{' '}
+            events and{' '}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From c905ce8fe55cdbab128fa5423d08f6ae3cdc3d15 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 037/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From 9f962b1c21e81a9086debaeabc555c16fb9831a2 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 038/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 7d0c8bc2048950fc495f68ac4eb71f268e281637 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 039/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 230 ++++++++++++-------------
 components/mail-card.js                |  49 ++----
 2 files changed, 120 insertions(+), 159 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,8 +1,17 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
+import {
+  Box,
+  Input,
+  Button,
+  Text,
+  Alert,
+  Card,
+  Flex,
+  Grid,
+} from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -18,7 +27,6 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
-      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -66,144 +74,118 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
-          <Flex
+        <Flex
+          sx={{
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
+          }}
+        >
+          <Box>
+            <Text
+              variant="title"
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
+            >
+              Join the newsletter
+            </Text>
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
+              We’ll send you an email no more than once a month, when we work on
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
+            </Text>
+          </Box>
+          <Grid
+            as="form"
+            ref={formRef}
+            onSubmit={handleSubmit}
+            gap={[2, 3]}
             sx={{
-              placeItems: "center",
-              justifyContent: "center",
-              alignItems: ["left", "left", "center"],
-              flexDirection: "column",
-              gap: "10px",
-              width: "75%",
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box>
-              <Text
-                variant="title"
+            <Box sx={{ width: "100%" }}>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="text"
+                name="name"
+                id="name"
+                placeholder="Your Name"
+                required
                 sx={{
-                  fontSize: [4, "36px", "42px", 6],
-                  zIndex: 2,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-              >
-                Join the newsletter
-              </Text>
-              <Text
+              />
+            </Box>
+            <div>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Your Email"
+                required
                 sx={{
-                  color: "darkless",
-                  mt: 2,
-                  fontSize: 3,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-                as="p"
-              >
-                We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
-              </Text>
-            </Box>
-            <Grid
-              as="form"
-              ref={formRef}
-              onSubmit={handleSubmit}
-              gap={[2, 3]}
-              sx={{
-                textAlign: "center",
-                alignItems: "end",
-                input: { bg: "sunken" },
-                width: "100%",
-              }}
-            >
-              <Box sx={{ width: "100%" }}>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="text"
-                  name="name"
-                  id="name"
-                  placeholder="Your Name"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </Box>
-              <div>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="email"
-                  name="email"
-                  id="email"
-                  placeholder="Your Email"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </div>
-              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-                {submitting ? (
-                  <>
-                    <Loading /> Subscribe
-                  </>
-                ) : submitted ? (
-                  <>
-                    <Icon glyph="send" /> You're on the list!
-                  </>
-                ) : (
-                  "Subscribe"
-                )}
-              </Button>
-            </Grid>
-            {/*{submitted && (
+              />
+            </div>
+            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              {submitting ? (
+                <>
+                  <Loading />
+                  &nbsp; Subscribe
+                </>
+              ) : (
+                "Subscribe"
+              )}
+            </Button>
+          </Grid>
+            {submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}*/}
-          </Flex>
-          <Box
-            sx={{
-              display: "grid",
-              gridGap: 4,
-              width: "100%",
-            }}
-          >
-            <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
-            />
-            <MailCard
-              subject="Community Newsletter"
-              date="September 2022"
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-            />
-          </Box>
+            )}
         </Flex>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
       <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
         src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
   );
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,40 +1,19 @@
-import { Box, Card, Text } from "theme-ui";
+import { Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-  return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
-          <Box
-            sx={{
-              width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
-              backgroundRepeat: "repeat-x",
-            }}
-          />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
-          </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
-        </Box>
-      </Card>
-    </Link>
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From d46af7cb127c249e637441781241c8022605ac3f Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 040/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From 52041872acd5fcaa01f9645426d245699cecf08d Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 041/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 517fa85b4ef19ff2022965026cfccf0080be356f Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 042/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 207 files changed, 8003 insertions(+), 7987 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/events.js b/pages/events.js
index 215013565..a9fa40268 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import Icon from '../components/icon'
-import Image from 'next/image'
-import OuternetPic from '../public/outernet/hack.jpg'
-import { compact } from 'lodash'
-import theme from '@hackclub/theme'
+  Divider,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import Icon from "../components/icon";
+import Image from "next/image";
+import OuternetPic from "../public/outernet/hack.jpg";
+import { compact } from "lodash";
+import theme from "@hackclub/theme";
 
 const events = [
   {
-    name: 'Outernet',
+    name: "Outernet",
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
-    location: 'Cabot, Vermont',
-    season: 'Summer',
-    year: '2023',
-    repo: 'outernet',
+    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
+    location: "Cabot, Vermont",
+    season: "Summer",
+    year: "2023",
+    repo: "outernet",
     image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
+      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
+    link: "https://github.com/hackclub/outernet",
   },
   {
-    name: 'Epoch',
+    name: "Epoch",
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: 'Delhi NCR, India',
-    season: 'Winter',
-    year: '2022/23',
-    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
-    repo: 'epoch'
+    location: "Delhi NCR, India",
+    season: "Winter",
+    year: "2022/23",
+    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
+    repo: "epoch",
   },
   {
-    name: 'Assemble',
-    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
+    name: "Assemble",
+    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
     description:
-      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2022',
-    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
-    repo: 'assemble'
+      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2022",
+    video: "https://youtube.com/embed/PnK4gzO6S3Q",
+    repo: "assemble",
   },
   {
-    name: 'The Hacker Zephyr',
-    logo: 'https://hackclub.com/stickers/zephyr.svg',
+    name: "The Hacker Zephyr",
+    logo: "https://hackclub.com/stickers/zephyr.svg",
     description:
-      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
-    location: 'Burlington (VT) to Los Angeles (CA)',
-    season: 'Summer',
-    year: '2021',
-    video: 'https://youtube.com/embed/2BID8_pGuqA',
-    repo: 'the-hacker-zephyr'
+      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
+    location: "Burlington (VT) to Los Angeles (CA)",
+    season: "Summer",
+    year: "2021",
+    video: "https://youtube.com/embed/2BID8_pGuqA",
+    repo: "the-hacker-zephyr",
   },
   {
-    name: 'Summer of Making',
-    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
+    name: "Summer of Making",
+    logo: "https://hackclub.com/stickers/summer_of_making.svg",
     description:
-      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
-    location: 'Online (thanks COVID-19!)',
-    season: 'Summer',
-    year: '2020',
+      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
+    location: "Online (thanks COVID-19!)",
+    season: "Summer",
+    year: "2020",
     image:
-      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
-    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
-    ghTag: 'summer-of-making'
+      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
+    link: "https://scrapbook.hackclub.com/r/summer-of-making",
+    ghTag: "summer-of-making",
   },
   {
-    name: 'Flagship',
-    logo: 'https://hackclub.com/stickers/ship.png',
+    name: "Flagship",
+    logo: "https://hackclub.com/stickers/ship.png",
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: 'San Francisco, California',
-    season: 'Summer',
-    year: '2019',
+    location: "San Francisco, California",
+    season: "Summer",
+    year: "2019",
     image:
-      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
-    link: 'https://hack.af/flagship-album'
-  }
-]
+      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
+    link: "https://hack.af/flagship-album",
+  },
+];
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link
+  link,
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: 'center', mb: 2 }}>
-      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
+    <Flex sx={{ alignItems: "center", mb: 2 }}>
+      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: '8px', mt: 2 }}
+        sx={{ borderRadius: "8px", mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             mt: 2,
-            height: '250px',
-            objectFit: 'cover',
-            width: '100%',
-            objectPosition: 'top'
+            height: "250px",
+            objectFit: "cover",
+            width: "100%",
+            objectPosition: "top",
           }}
         />
       </a>
     )}
-    <Box sx={{ color: 'darkless' }}>
+    <Box sx={{ color: "darkless" }}>
       <b>
         {season}, {year} - {location}
-      </b>{' '}
+      </b>{" "}
     </Box>
     <Box>
-      {' '}
+      {" "}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace('https://', '')}</>
+          <>{link.replace("https://", "")}</>
         </Link>
       )}
     </Box>
   </Card>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white',
-              textShadow: 'elevated'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
+              textShadow: "elevated",
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.325'],
-              maxWidth: '900px',
-              margin: 'auto',
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.325"],
+              maxWidth: "900px",
+              margin: "auto",
               fontWeight: 400,
-              textShadow: 'small'
+              textShadow: "small",
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
+            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: 'center',
-            background: theme.util.gx('cyan', 'blue'),
-            color: 'white',
-            width: '100%',
-            maxWidth: '64rem',
-            mx: 'auto',
+            textAlign: "center",
+            background: theme.util.gx("cyan", "blue"),
+            color: "white",
+            width: "100%",
+            maxWidth: "64rem",
+            mx: "auto",
             mt: 3,
-            fontSize: 2
+            fontSize: 2,
           }}
         >
-          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
+          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{' '}
+            Check them out at{" "}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{' '}
+            . Hack Club is also behind a series of{" "}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               Day of Service
-            </Link>{' '}
-            events and{' '}
+            </Link>{" "}
+            events and{" "}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: 'white' }}
+              sx={{ color: "white" }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 0f2682242b7361d17a7057d3bdc3689ec98bc39f Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 043/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 496c09417c1b52d4c78a8fd2cea26bad225bebbe Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 044/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From 510146e9a0d853efa7f30a3ea2c230ce301b5e8c Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 045/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 179ad576ee0f15ecb0711273bfb02a618500d6e6 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 046/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/events.js                               | 224 ++--
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 207 files changed, 7952 insertions(+), 7989 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/events.js b/pages/events.js
index a9fa40268..215013565 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -9,90 +9,90 @@ import {
   Flex,
   Image as Img,
   Link,
-  Divider,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import Icon from "../components/icon";
-import Image from "next/image";
-import OuternetPic from "../public/outernet/hack.jpg";
-import { compact } from "lodash";
-import theme from "@hackclub/theme";
+  Divider
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Icon from '../components/icon'
+import Image from 'next/image'
+import OuternetPic from '../public/outernet/hack.jpg'
+import { compact } from 'lodash'
+import theme from '@hackclub/theme'
 
 const events = [
   {
-    name: "Outernet",
+    name: 'Outernet',
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
-    logo: "https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png",
-    location: "Cabot, Vermont",
-    season: "Summer",
-    year: "2023",
-    repo: "outernet",
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/outernet/522a19d904a627e6.png',
+    location: 'Cabot, Vermont',
+    season: 'Summer',
+    year: '2023',
+    repo: 'outernet',
     image:
-      "https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07",
-    link: "https://github.com/hackclub/outernet",
+      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
+    link: 'https://github.com/hackclub/outernet'
   },
   {
-    name: "Epoch",
+    name: 'Epoch',
     logo: `https://emoji.slack-edge.com/T0266FRGM/epoch/1337c0f7f3c8341d.png`,
     description: `A magical New Year's spent hacking in New Delhi, our first flagship event abroad and in India.`,
-    location: "Delhi NCR, India",
-    season: "Winter",
-    year: "2022/23",
-    video: "https://www.youtube.com/embed/KLx4NZZPzMc",
-    repo: "epoch",
+    location: 'Delhi NCR, India',
+    season: 'Winter',
+    year: '2022/23',
+    video: 'https://www.youtube.com/embed/KLx4NZZPzMc',
+    repo: 'epoch'
   },
   {
-    name: "Assemble",
-    logo: "https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png",
+    name: 'Assemble',
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/assemble/4f9465eb00175463.png',
     description:
-      "The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.",
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2022",
-    video: "https://youtube.com/embed/PnK4gzO6S3Q",
-    repo: "assemble",
+      'The first high school hackathon since the pandemic! Hosted by a team of Hack Clubbers to kick off a hackathon renaissance.',
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2022',
+    video: 'https://youtube.com/embed/PnK4gzO6S3Q',
+    repo: 'assemble'
   },
   {
-    name: "The Hacker Zephyr",
-    logo: "https://hackclub.com/stickers/zephyr.svg",
+    name: 'The Hacker Zephyr',
+    logo: 'https://hackclub.com/stickers/zephyr.svg',
     description:
-      "A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.",
-    location: "Burlington (VT) to Los Angeles (CA)",
-    season: "Summer",
-    year: "2021",
-    video: "https://youtube.com/embed/2BID8_pGuqA",
-    repo: "the-hacker-zephyr",
+      'A cross-country hacker adventure on a train and the longest hackathon (by miles) on land.',
+    location: 'Burlington (VT) to Los Angeles (CA)',
+    season: 'Summer',
+    year: '2021',
+    video: 'https://youtube.com/embed/2BID8_pGuqA',
+    repo: 'the-hacker-zephyr'
   },
   {
-    name: "Summer of Making",
-    logo: "https://hackclub.com/stickers/summer_of_making.svg",
+    name: 'Summer of Making',
+    logo: 'https://hackclub.com/stickers/summer_of_making.svg',
     description:
-      "$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:",
-    location: "Online (thanks COVID-19!)",
-    season: "Summer",
-    year: "2020",
+      '$50k in hardware donations to teen hackers around the world and the creation of Scrapbook:',
+    location: 'Online (thanks COVID-19!)',
+    season: 'Summer',
+    year: '2020',
     image:
-      "https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format",
-    link: "https://scrapbook.hackclub.com/r/summer-of-making",
-    ghTag: "summer-of-making",
+      'https://cdn.sanity.io/images/2ejqxsnu/production/ed144128afb78a7095d6c77945efdd2c38078ecf-1637x990.png?w=3840&q=75&fit=clip&auto=format',
+    link: 'https://scrapbook.hackclub.com/r/summer-of-making',
+    ghTag: 'summer-of-making'
   },
   {
-    name: "Flagship",
-    logo: "https://hackclub.com/stickers/ship.png",
+    name: 'Flagship',
+    logo: 'https://hackclub.com/stickers/ship.png',
     description:
       'An IRL meetup of high school hackathon organizers and coding club leaders. Our first "flagship" event.',
-    location: "San Francisco, California",
-    season: "Summer",
-    year: "2019",
+    location: 'San Francisco, California',
+    season: 'Summer',
+    year: '2019',
     image:
-      "https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true",
-    link: "https://hack.af/flagship-album",
-  },
-];
+      'https://github.com/hackclub/www-assemble/blob/main/public/hackers-assemble.jpg?raw=true',
+    link: 'https://hack.af/flagship-album'
+  }
+]
 
 const Event = ({
   name,
@@ -105,11 +105,11 @@ const Event = ({
   repo,
   ghTag,
   image,
-  link,
+  link
 }) => (
   <Card variant="sunken">
-    <Flex sx={{ alignItems: "center", mb: 2 }}>
-      <Img src={logo} sx={{ height: "24px", mr: 2 }} />
+    <Flex sx={{ alignItems: 'center', mb: 2 }}>
+      <Img src={logo} sx={{ height: '24px', mr: 2 }} />
       <Heading as="h2">{name}</Heading>
     </Flex>
     <Box>{description}</Box>
@@ -123,30 +123,30 @@ const Event = ({
         width="100%"
         height="250px"
         border="none"
-        sx={{ borderRadius: "8px", mt: 2 }}
+        sx={{ borderRadius: '8px', mt: 2 }}
       />
     ) : (
       <a href={link}>
         <Img
           src={image}
           sx={{
-            borderRadius: "8px",
+            borderRadius: '8px',
             mt: 2,
-            height: "250px",
-            objectFit: "cover",
-            width: "100%",
-            objectPosition: "top",
+            height: '250px',
+            objectFit: 'cover',
+            width: '100%',
+            objectPosition: 'top'
           }}
         />
       </a>
     )}
-    <Box sx={{ color: "darkless" }}>
+    <Box sx={{ color: 'darkless' }}>
       <b>
         {season}, {year} - {location}
-      </b>{" "}
+      </b>{' '}
     </Box>
     <Box>
-      {" "}
+      {' '}
       {repo && (
         <Link href={`https://github.com/hackclub/${repo}`}>
           <>github.com/hackclub/{repo}</>
@@ -159,12 +159,12 @@ const Event = ({
       )}
       {link && !repo && !ghTag && (
         <Link href={link}>
-          <>{link.replace("https://", "")}</>
+          <>{link.replace('https://', '')}</>
         </Link>
       )}
     </Box>
   </Card>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -180,28 +180,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.63) 0%, rgba(2,0,36,0.56) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -215,23 +215,23 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
-              textShadow: "elevated",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white',
+              textShadow: 'elevated'
             }}
           >
             Hack Club's Events
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.325"],
-              maxWidth: "900px",
-              margin: "auto",
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.325'],
+              maxWidth: '900px',
+              margin: 'auto',
               fontWeight: 400,
-              textShadow: "small",
+              textShadow: 'small'
             }}
           >
             Every summer and now every winter, Hack Club does something special
@@ -243,7 +243,7 @@ const Page = ({ jobs }) => (
             href="https://hackclub.com/slack"
             target="_blank"
             rel="noopener"
-            sx={{ mt: 3, background: theme.util.gx("purple", "blue") }}
+            sx={{ mt: 3, background: theme.util.gx('purple', 'blue') }}
           >
             Get ready for the next one!
           </Button>
@@ -252,11 +252,11 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {events.map((event, i) => (
             <Event key={`event-${i}`} {...event} />
@@ -265,38 +265,38 @@ const Page = ({ jobs }) => (
         <Card
           variant="sunken"
           sx={{
-            textAlign: "center",
-            background: theme.util.gx("cyan", "blue"),
-            color: "white",
-            width: "100%",
-            maxWidth: "64rem",
-            mx: "auto",
+            textAlign: 'center',
+            background: theme.util.gx('cyan', 'blue'),
+            color: 'white',
+            width: '100%',
+            maxWidth: '64rem',
+            mx: 'auto',
             mt: 3,
-            fontSize: 2,
+            fontSize: 2
           }}
         >
-          <Box sx={{ maxWidth: "600px", mx: "auto" }}>
+          <Box sx={{ maxWidth: '600px', mx: 'auto' }}>
             Looking for more? Hack Clubbers often organise their own hackathons!
-            Check them out at{" "}
+            Check them out at{' '}
             <Link
               href="https://hackathons.hackclub.com"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               hackathons.hackclub.com
             </Link>
-            . Hack Club is also behind a series of{" "}
+            . Hack Club is also behind a series of{' '}
             <Link
               href="https://daysofservice.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               Day of Service
-            </Link>{" "}
-            events and{" "}
+            </Link>{' '}
+            events and{' '}
             <Link
               href="https://events.hackclub.com/"
-              sx={{ color: "white" }}
+              sx={{ color: 'white' }}
               target="_blank"
             >
               frequent virtual events
@@ -309,6 +309,6 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From 72b5746a9aa88cbd03983afe0b46bd793da28fe7 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 047/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From bceb66d94441425383d7077264cc8ae682a9c7ce Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 048/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From ac3aec030862250d8ac43c19ab2016906d7743ae Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 4 Oct 2023 21:38:17 +0100
Subject: [PATCH 049/111] bloody merge conflicts!

---
 components/index/cards/mailing-list.js | 17 +++++-------
 components/mail-card.js                | 36 ++++++++++++--------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..01da5d337 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -76,7 +76,7 @@ const MailingList = () => {
               alignItems: ["left", "left", "center"],
               flexDirection: "column",
               gap: "10px",
-              width: "75%",
+              width: ["100%", "75%"],
             }}
           >
             <Box>
@@ -160,29 +160,26 @@ const MailingList = () => {
                 )}
               </Button>
             </Grid>
-            {/*{submitted && (
-                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
-                    <Icon glyph="send" />
-                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
-                </Alert>
-            )}*/}
           </Flex>
           <Box
             sx={{
               display: "grid",
               gridGap: 4,
+              mt: [4, 0],
               width: "100%",
             }}
           >
             <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+              subject="👀 What’s up at Hack Club this time? 👀"
+              date="August 2022"
+              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
+              link="/newsletter/2022/07"
             />
             <MailCard
               subject="Community Newsletter"
               date="September 2022"
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+              link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..2eea2db92 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,18 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+export default function MailCard({ body, date, subject, link }) {
+  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
+    <Card
+      variant="interactive"
+      sx={{
+        maxWidth: "1500px",
+        cursor: "pointer",
+      }}
+    >
+      <Link href={link || "/newsletter"}>
+        <div>
           <Box
             sx={{
               width: "100%",
@@ -27,14 +23,14 @@ export default function MailCard(mail) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
+            {subject}
           </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>
-        </Box>
-      </Card>
-    </Link>
+        </div>
+      </Link>
+    </Card>
   );
 }

From bdf947932fde11fff7d30027380a999f03a1f791 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Thu, 5 Oct 2023 08:35:35 +0100
Subject: [PATCH 050/111] updating copy + fixing links

---
 components/index/cards/mailing-list.js | 4 ++--
 components/mail-card.js                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 01da5d337..1d952fa12 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -173,7 +173,7 @@ const MailingList = () => {
               subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022/07"
+              link="/newsletter/2022-08-august/"
             />
             <MailCard
               subject="Community Newsletter"
diff --git a/components/mail-card.js b/components/mail-card.js
index 2eea2db92..7b4dec7d0 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -25,7 +25,7 @@ export default function MailCard({ body, date, subject, link }) {
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
             {subject}
           </Text>
-          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To You, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From f9b48668b1b8381b0a305c8f68a25eec92878128 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 15:47:55 +0100
Subject: [PATCH 051/111] changes

---
 components/index/cards/mailing-list.js | 39 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 1d952fa12..fd8895339 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,6 +5,22 @@ import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
+import styled from "@emotion/styled";
+import theme from "@hackclub/theme";
+
+/*const Base = styled(Box)`
+  background: ${(props) =>
+    props.dark
+      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
+      : `${theme.colors.snow} url('/pattern.svg') repeat`};
+  ${(props) =>
+    props.dark &&
+    `
+      background-size: ${theme.space[4]}px ${theme.space[4]}px;
+    `} @media print {
+    display: none;
+  }
+`;*/
 
 const Loading = () => (
   <Box
@@ -185,17 +201,18 @@ const MailingList = () => {
         </Flex>
       </Card>
       {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
+        sx={{
+          position: "absolute",
+          display: "block",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 0,
+          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          backgroundImage: `url('/pattern.svg') repeat`,
+        }}
+      />*/}
       <BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"

From 1b756c25a3f027789b7617c81e1d3723bb39128a Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 16:08:07 +0100
Subject: [PATCH 052/111] tweaking!

---
 components/index/cards/mailing-list.js | 32 ++++++--------------------
 components/mail-card.js                |  6 ++---
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fd8895339..7a8d7fcab 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,26 +1,8 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
-import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
-import styled from "@emotion/styled";
-import theme from "@hackclub/theme";
-
-/*const Base = styled(Box)`
-  background: ${(props) =>
-    props.dark
-      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
-      : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
-    props.dark &&
-    `
-      background-size: ${theme.space[4]}px ${theme.space[4]}px;
-    `} @media print {
-    display: none;
-  }
-`;*/
 
 const Loading = () => (
   <Box
@@ -186,21 +168,21 @@ const MailingList = () => {
             }}
           >
             <MailCard
-              subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
+              issue={2}
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
               link="/newsletter/2022-08-august/"
             />
             <MailCard
-              subject="Community Newsletter"
               date="September 2022"
+              issue={3}
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
               link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
       </Card>
-      {/*<Box
+      <Box
         sx={{
           position: "absolute",
           display: "block",
@@ -209,16 +191,16 @@ const MailingList = () => {
           right: 0,
           bottom: 0,
           zIndex: 0,
-          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          background: "linear-gradient(-180deg, #33d6a6 20%, #338eda 80%)",
           backgroundImage: `url('/pattern.svg') repeat`,
         }}
-      />*/}
-      <BGImg
+      />
+      {/*<BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
         priority
         gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-      />
+      />*/}
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 7b4dec7d0..c564cdf7e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,7 +1,7 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard({ body, date, subject, link }) {
+export default function MailCard({ body, issue, date, link }) {
   body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
     <Card
@@ -23,9 +23,9 @@ export default function MailCard({ body, date, subject, link }) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {subject}
+            {date}
           </Text>
-          <Text as="p">{date} — To You, From Hack Club</Text>
+          <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From 3d64381de372790718a8b95f5c4c0df7741f02f0 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 18:27:13 +0100
Subject: [PATCH 053/111] updated

---
 components/index/cards/mailing-list.js | 31 +++++++++-----------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 7a8d7fcab..2ce6c64a8 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,8 +1,10 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
-import Link from "next/link";
+import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
 import MailCard from "../../mail-card";
+import BGImg from "../../background-image";
+
+import background from "../../../public/home/footer.png";
 
 const Loading = () => (
   <Box
@@ -182,25 +184,14 @@ const MailingList = () => {
           </Box>
         </Flex>
       </Card>
-      <Box
-        sx={{
-          position: "absolute",
-          display: "block",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 0,
-          background: "linear-gradient(-180deg, #33d6a6 20%, #338eda 80%)",
-          backgroundImage: `url('/pattern.svg') repeat`,
-        }}
+      <BGImg
+        width={2544}
+        height={2048}
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={background}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
       />
-      {/*<BGImg
-        src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-      />*/}
     </Box>
   );
 };

From ec3fc22fc7c2cf9ecae2a2f0f26b21997ea17ca5 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 22:56:52 +0100
Subject: [PATCH 054/111] changed padding up

---
 components/mail-card.js   | 27 +++++++++++++++++----------
 public/letter-pattern.svg | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 public/letter-pattern.svg

diff --git a/components/mail-card.js b/components/mail-card.js
index c564cdf7e..71cb2cb7f 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -7,8 +7,13 @@ export default function MailCard({ body, issue, date, link }) {
     <Card
       variant="interactive"
       sx={{
+        borderRadius: 18,
+        display: "inline-block",
+        overflow: "hidden",
+        bg: "white",
         maxWidth: "1500px",
         cursor: "pointer",
+        padding: "0 !important",
       }}
     >
       <Link href={link || "/newsletter"}>
@@ -16,19 +21,21 @@ export default function MailCard({ body, issue, date, link }) {
           <Box
             sx={{
               width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              height: "10px",
+              backgroundImage: "url('/letter-pattern.svg')",
               backgroundRepeat: "repeat-x",
+              backgroundSize: "100%",
             }}
           />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {date}
-          </Text>
-          <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
+          <Box sx={{ p: [3, 4] }}>
+            <Text as="h1" sx={{ textTransform: "uppercase" }}>
+              {date}
+            </Text>
+            <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
+            <Text as="h2" sx={{ fontWeight: "normal" }}>
+              {body}
+            </Text>
+          </Box>
         </div>
       </Link>
     </Card>
diff --git a/public/letter-pattern.svg b/public/letter-pattern.svg
new file mode 100644
index 000000000..3c8dc2200
--- /dev/null
+++ b/public/letter-pattern.svg
@@ -0,0 +1,36 @@
+<svg width="352" height="8" viewBox="0 0 352 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3429 8L14.509 0H20.6857L16.5196 8H10.3429Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8L4.16616 0H10.3429L6.1767 8H0Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0286 8L35.1947 0H41.3714L37.2053 8H31.0286Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.3714 8L45.5376 0H51.7143L47.5481 8H41.3714Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.7143 8L55.8805 0H62.0572L57.891 8H51.7143Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6857 8L24.8519 0H31.0286L26.8624 8H20.6857Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.0571 8L66.2233 0H72.4L68.2338 8H62.0571Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4 8L76.5662 0H82.7429L78.5767 8H72.4Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.7429 8L86.909 0H93.0857L88.9196 8H82.7429Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M93.0857 8L97.2519 0H103.429L99.2624 8H93.0857Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.429 8L107.595 0H113.771L109.605 8H103.429Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.771 8L117.938 0H124.114L119.948 8H113.771Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.114 8L128.28 0H134.457L130.291 8H124.114Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.457 8L138.623 0H144.8L140.634 8H134.457Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.8 8L148.966 0H155.143L150.977 8H144.8Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.143 8L159.309 0H165.486L161.32 8H155.143Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.486 8L169.652 0H175.829L171.662 8H165.486Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.829 8L179.995 0H186.171L182.005 8H175.829Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M186.171 8L190.338 0H196.514L192.348 8H186.171Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M196.514 8L200.68 0H206.857L202.691 8H196.514Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M206.857 8L211.023 0H217.2L213.034 8H206.857Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.2 8L221.366 0H227.543L223.377 8H217.2Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M227.543 8L231.709 0H237.886L233.72 8H227.543Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M237.886 8L242.052 0H248.229L244.062 8H237.886Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M248.229 8L252.395 0H258.571L254.405 8H248.229Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258.571 8L262.738 0H268.914L264.748 8H258.571Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.914 8L273.08 0H279.257L275.091 8H268.914Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M279.257 8L283.423 0H289.6L285.434 8H279.257Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M289.6 8L293.766 0H299.943L295.777 8H289.6Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M299.943 8L304.109 0H310.286L306.12 8H299.943Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M310.286 8L314.452 0H320.629L316.462 8H310.286Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M320.629 8L324.795 0H330.971L326.805 8H320.629Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.971 8L335.138 0H341.314L337.148 8H330.971Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M341.314 8L345.48 0H351.657L347.491 8H341.314Z" fill="#338EDA"/>
+</svg>

From 23873dd411ed16a68851889bc01d3461529536b2 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 7 Oct 2023 19:02:42 +0100
Subject: [PATCH 055/111] wrong newsletter...

---
 components/index/cards/mailing-list.js | 20 ++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 2ce6c64a8..cb194793f 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -100,8 +100,8 @@ const MailingList = () => {
                 as="p"
               >
                 We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
+                on something cool for you. Check out our{" "}
+                <Link href="/leader-newsletters/">previous issues</Link>.
               </Text>
             </Box>
             <Grid
@@ -170,16 +170,16 @@ const MailingList = () => {
             }}
           >
             <MailCard
-              date="August 2022"
-              issue={2}
-              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022-08-august/"
+              date="August 2023"
+              issue={18}
+              body="Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!"
+              link="/leader-newsletters/2023-08-18"
             />
             <MailCard
-              date="September 2022"
-              issue={3}
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-              link="/newsletter/2022-09-september/"
+              date="September 2023"
+              issue={20}
+              body="📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!"
+              link="/leader-newsletters/2023-09-29"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 71cb2cb7f..91756b757 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -21,7 +21,7 @@ export default function MailCard({ body, issue, date, link }) {
           <Box
             sx={{
               width: "100%",
-              height: "10px",
+              height: "12px",
               backgroundImage: "url('/letter-pattern.svg')",
               backgroundRepeat: "repeat-x",
               backgroundSize: "100%",

From 11d7badbb4269d42a2e56523449ef9b85113f494 Mon Sep 17 00:00:00 2001
From: Shubham Patil <shubhampatilsd@gmail.com>
Date: Sun, 8 Oct 2023 12:07:28 -0700
Subject: [PATCH 056/111] Add outernet video to event

---
 pages/events.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/events.js b/pages/events.js
index 215013565..62b430e66 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -30,10 +30,8 @@ const events = [
     location: 'Cabot, Vermont',
     season: 'Summer',
     year: '2023',
+    video: 'https://www.youtube.com/watch?v=O1s5HqSqKi0',
     repo: 'outernet',
-    image:
-      'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
-    link: 'https://github.com/hackclub/outernet'
   },
   {
     name: 'Epoch',

From b430b13837ee2f1b73dd432f32f9650b37f3751c Mon Sep 17 00:00:00 2001
From: Shubham Patil <shubhampatilsd@gmail.com>
Date: Sun, 8 Oct 2023 12:18:35 -0700
Subject: [PATCH 057/111] Add haunted house

---
 pages/events.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pages/events.js b/pages/events.js
index 62b430e66..47a1dc294 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -23,6 +23,18 @@ import { compact } from 'lodash'
 import theme from '@hackclub/theme'
 
 const events = [
+  {
+    name: 'Haunted House',
+    description: `Where Fright Meets Byte: A Haunted House Hackathon Experience in Downtown Chicago.`,
+    logo: 'https://emoji.slack-edge.com/T0266FRGM/hauntedhouse/427353c4bd656767.png',
+    location: 'Chicago, Illinois',
+    season: 'Fall',
+    year: '2023',
+    // repo: 'outernet',
+    image:
+      'https://files.slack.com/files-pri/T0266FRGM-F0602JUFXD2/image.png',
+    link: 'https://haunted.hackclub.com'
+  },
   {
     name: 'Outernet',
     description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,

From 0293f8a057cba696deca69a3a093f6305a1e7dd6 Mon Sep 17 00:00:00 2001
From: Shubham Patil <shubhampatilsd@gmail.com>
Date: Sun, 8 Oct 2023 12:53:40 -0700
Subject: [PATCH 058/111] Fix outernet and haunted house

---
 pages/events.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/events.js b/pages/events.js
index 47a1dc294..2063ce1e4 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -32,7 +32,7 @@ const events = [
     year: '2023',
     // repo: 'outernet',
     image:
-      'https://files.slack.com/files-pri/T0266FRGM-F0602JUFXD2/image.png',
+      'https://cloud-6vo1bh2dg-hack-club-bot.vercel.app/0image.png',
     link: 'https://haunted.hackclub.com'
   },
   {
@@ -42,7 +42,7 @@ const events = [
     location: 'Cabot, Vermont',
     season: 'Summer',
     year: '2023',
-    video: 'https://www.youtube.com/watch?v=O1s5HqSqKi0',
+    video: 'https://www.youtube.com/embed/O1s5HqSqKi0',
     repo: 'outernet',
   },
   {

From c13c7cce4169d4b7d636398818121916c083bae3 Mon Sep 17 00:00:00 2001
From: Ivoine <ivoinestrachan242@gmail.com>
Date: Sun, 8 Oct 2023 20:01:39 -0400
Subject: [PATCH 059/111] haunted house card

---
 components/index/cards/haunted.js |  53 ++++++++++++++++++++++++++++++
 pages/index.js                    |   2 ++
 public/haunted/TheFrightHouse.otf | Bin 0 -> 126376 bytes
 public/haunted/haunted-bg.webp    | Bin 0 -> 1378958 bytes
 public/haunted/haunted-text.svg   |   3 ++
 5 files changed, 58 insertions(+)
 create mode 100644 components/index/cards/haunted.js
 create mode 100644 public/haunted/TheFrightHouse.otf
 create mode 100644 public/haunted/haunted-bg.webp
 create mode 100644 public/haunted/haunted-text.svg

diff --git a/components/index/cards/haunted.js b/components/index/cards/haunted.js
new file mode 100644
index 000000000..8fd211dc7
--- /dev/null
+++ b/components/index/cards/haunted.js
@@ -0,0 +1,53 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function Haunted() {
+  return (
+    <CardModel
+      github_link="https://github.com/hackclub/www-hauntedhouse"
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        border: '2px solid #EB6424',
+      }}
+      position={[null, 'bottom', 'bottom']}
+      highlight="#271932"
+      image="/haunted/haunted-bg.webp"
+      filter="brightness(0.7)"
+    >
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+        <Image
+          src="/haunted/haunted-text.svg"
+          sx={{
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
+            zIndex: 2,
+            fontSize: ['36px', 4, 5],
+            color: 'white'
+          }}
+          alt="Haunted"
+        />
+        <Box></Box>
+
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+       Haunted House is a Chicago-based event full of sites and frights! Join us from October 28-29 
+       for a weekend of coding pushing the bounds of creativity, where fright meets byte, and check out 
+       the website at <a href='https://haunted.hackclub.com'>haunted.hackclub.com</a>!
+        </Text>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            mt: [3, 3, 4],
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        ></Flex>
+      </Grid>
+    </CardModel>
+  )
+}
diff --git a/pages/index.js b/pages/index.js
index 5a78dda83..7df44d705 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -39,6 +39,7 @@ import GitHub from '../components/index/github'
 import Photo from '../components/photo'
 import Comma from '../components/comma'
 import Haxidraw from '../components/index/cards/haxidraw'
+import Haunted from '../components/index/cards/haunted'
 
 /** @jsxImportSource theme-ui */
 
@@ -640,6 +641,7 @@ function Page({
                 and make things together!
               </Text>
             </Box>
+            <Haunted />
             <Pizza />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>
diff --git a/public/haunted/TheFrightHouse.otf b/public/haunted/TheFrightHouse.otf
new file mode 100644
index 0000000000000000000000000000000000000000..03b06a1b8e02d0e9f800ffc589d8fc852ca1d347
GIT binary patch
literal 126376
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
ai7)BDj(_pEd-cI`HD6r~|E$nHRR050EJQc}

literal 0
HcmV?d00001

diff --git a/public/haunted/haunted-bg.webp b/public/haunted/haunted-bg.webp
new file mode 100644
index 0000000000000000000000000000000000000000..662025fb36be6c8d158069bc7a221d0d890e213f
GIT binary patch
literal 1378958
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%0DGjXR
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%0ACL`h^(E{XMYAqMdoWT9NmQ;o^`_wG
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%0A7!e($;k++GDM~7S`BZu~9S}!A;IBfihsn4Q&O$
zoJpsX{#xXfZ6TcxP5{@);vB?d#vq*19+>X?+KUB7zP#Yp(21C0rwq%V$YCU5EnPuq
zFJUm6f?CXLs6hJGf1aQ0&#-7@yJgh?LqNR0p)KZcB6r`xghXNP#tbW3g;pJeKg*XX
zh5PH%UM=R^^_?G_{xmE2bg05j$=H@h9<SZvVse&aF)lHUD*SccKh0XMDC_?^ni>w`
zEz1>#s><?h9;9$^z_V-xZA&U@p2QVLZNB4hU_9b6ND*bY7Xjx|SeI6@MT=i+y!H#Y
zcxMYuVsnEORXu<YmuAy1_Q5}^x;?5rVmr*^c+PqO^25M1{g$poG#QMuK5rVQ8NRg-
zdwiL^QOqyGa)}1wnJ(BC-YnZ`?bTZ~dbaL}N)g!IZB8~0Xp72|QN?d`K4UzZU{u@4
zyMAX%I|MJyDb?>Ek0@X1a;+sL#Ndn?`C~RWHe#S8)cHYQ$X<S3V9q;g;dQ6X$RoW(
zu$!`&<O_&@4w|D*-IN~ti(@78$78kne7d5|#VB{CK&yc(=0OXD+X!SEB3I~028aoA
z2Gbt3fHKH>n8S?dz4x0UyvMXKV(8tdD5D1+UtF8J?yWZaCUAHn1*?%S)C3U*icpjG
z;Chm5JewM^pE5|DLlJVqd#&DdC<A8GHp5+yOOi6*{ZEoCE=j&NU@6S^+-qMLnil#C
zY~Tg(x6O21iM{7>`r}h*c^)*Q#>GeHcbfVH9V#q+bCrfxBic%TBGFSqsa0`LrkJ6j
zjK~=Nl{huKJF|hdK2Sl+wPD;wa~b$j*E2-gnjDspdT7lt;1oY!Xh-XQTu!DqXZdao
zs)f~ZlYx54UW_RyflY9&R`{%ZN{Y2y#B_I2ZaJ41)#>2igKbi925Fk<w10!Zv}mbu
zA_MscZ5a%xHV35md%mD-CN#l$kS<mF+^zOmdwMu=3j%apd?#Zz@|OdJ5^inTBp2Oc
z5TGUvqfj+Bnvb<?oQth$8!aa$W<5^LQ#lXh0{aC<D^fZP`@k4uwsAgfx-)w=z$pO5
zB<VtDYCzTVcQva~Fi4NjP4C%*EOivWE@O|c46y8bYXqMi@EeVhet_zgARK6Mo_l7G
zrGcrwmg{&*>vV)eB5-MW0Qd!Dv-3%rd0V`C<l@T{`PBX)48&QGv49>M?aXt29$5(f
zfvu|^4bD=gYaoSi*o_f?nzWU-8<ifk{OMew5q`pXfO=k#(O_@k`XW136eEkql3Oo)
z4P_H-_0&o>+#%y1C*gIiE%8crAh(-LMnvrn5({_gG_@xp#?mCJu_k99wos3U{4dY2
za}N%A$n~3ydc$2!tAO535S6~qw^Kr)VZhJbv2Cyrmk+(6+b?txffKv{=A+R98>()v
z6%iF+LD0$Nkamf`MWS*Moz3aCqn5iu<&Vt<`v>=C3Al|eeeQ=THKp;5rY{f^iXsbL
zJ&}$aH=mkzaigH^9EY-*A)!$B#L}jT_jYAw`GyI80H`ILI9jBjd*G_oIK9KO!~g&Q
zg-fFr=Mb`Keki{{Fx_}y*}XLf@R^JvGEB_~OshGRTY*B8e;L*F_&R{GqgDFB>kJQ0
z-?C)Qz8xnmQVbyUq@F9=K9L<$h6BK0!WMhj@hDIE=00Mbmei}@{HfS}UkH!&1sGV;
zLTF`w0qjn(g*1&<@#w#m!5bF!2JeZ)l#)RF1+Q+(tPBhL0KseAi+3jrE|c!;Ht?fp
z;pMI+0wgF}vJ9tPRCi_*UQgeDO>j689Xv(}NOHUM<Fa5uxKnOH1vI^y>c)S#FX^8%
zmODSga<eHjGN|p+$fZ9Qi--vEWpi?u{EV%zR#->IMXW-Wv;@nNRiUa-3T<e#HmFS~
z6|qEyU;~2yL7MR-A~SgzxGa38%ShPL>VuUB(5Uf2*EF;jO5s-P)xsAuZ+FoXntzjC
zZ8}7|-k-8#Quc2fJGrp3!_1-_JN>Ru1OK?nOHbpU4ts8E|G7%*|7S?(`5fdfpVQnV
zF3!ueiH2WXvXMo<!eb?J#<wNo4!YfKQ5vILJeGpyPem^B1-wcn>G5#_lC$Nii*wnI
z=QJ5S`vK0o$lKk}#}v#}r9t)U6$Nn?*a8OGn-kCbXb+lVQ%b({1GX>(0|(vdZgz27
zCzxqNzw%2JE|^u73G2V%a43E=)+`SRWyz%EMrJJO&5V(TpD=wO@ZL%4*CYHP55GgQ
z+txI^=;+4g@zHWxWobG$uf+%MOHKb%TqYm@4!taZF4|jDky5@~yLS*%5|)&97#MLb
zPurr9X#rT2+pWD)vMDw`WJVd5hsrdm^u$|3fC+Tl)={S*>+-cv45sL%a}7*)m<Sn$
z(iu?I+D@IC1dj{BGPVX?I3^uDgWe0(GvivxxF+8<Xp6xy-_IjJkG0D>McDw{lDtRw
z(n!x~Hm^XNVnO6)Wvr+a<M<ceE3S$m{La?RI@5b~GuLjm#^%^X*1u`OJBoh)_^QmV
zP?5_>qitZL?7s+kP2atcW4ggEF|jt#W;aiLx{Q%%1>=U^A^n#82NXUu!Ggt<?OtH)
zqr69zOJ{f>)sx38sxxy#3z$C=L9BP~(XE0VMdlT^yY$qG-iR2@4eJxm0h0PnTcu_4
zpb`^1+#@+&O7c#-Tw5h6h>qkN|H0fi>UbaQgGhlq5#LN>R^0?)oAW^Xs5NI&VTg6^
zgkdDye&auJ9Yb(Q#UgKm!H^=laCaXvXwuq*=5Ej!kqtmOr;uM_b!q!bXv)lZw<tFo
zFcpIsJQ~J3H-p<zyD<s2tG}@au@U*XK#_RP)N8#lAQ!#<`Xf+~I9L9nWxiKx2dkzW
zDMw&cie-AGY%SSeB0B%uu~j+Edc^uDZ(;0jz00ZcjQuW$TGeNvo}1*Z?xVXL-@F9D
zp2tS~#0`}P!ewNpMw8+I=w*=I!jeZvD^r<Wifdyc`>uy=I}kn3<1+ZmWR*;oE~BN;
z_(S*5r@d@0Tb7zVM_zC?fjpXi=+<v3a;w5thjT71BA5-5TywQ=2{||4bXCzqRH(2S
zDUHWPjOc3YoFtpR?s~jvb$qpFH!t}$k6iRz&++#N^kD&^<mJ7dHhw*r{92h^f?BIp
z$12gE{s7)~^1gF+Z~!3%nI*LHh+6~sgq!7|=_wQMuZz#6v6^EHi+Z*sK@I=p@vKoH
z_2`iH+YI`C8|R-q-n%|#E7|{G(udXpOAD)Ya@ln~G=R3_`5fxS88VT)KwJPMBW<z|
zP{MCHXn+F+FoZh5S(?eiQsXvc`o|&Y+2VM6V;@YsI)r8~)vxiFUC$U1gFT~=%BCBP
zrY*W<&tj`A#k%<vd{>*|0jgE0?4LyCl0^1aJ3!>Q_DnVm6pk1U{5SpTJT>0{ht9K3
z)15t*yMW-Nf(W@OE<**xU$vP)?&efZDas}sO8W=(S@V1;{LB^5>0QyVq@B3eDUU?J
zB#_%03`}B?1Z!H-kIpN;q`JlZ33}L`wWzTgpjRI$5No_j&D`nmi&d7Kzexx*LM`dy
z$wEkA$j!G_Ah`Eh@j>plU5TUf*eF^Kkq*}hO_U8pyePbiO{`PHp11f6*!wR@YMS0{
zHYqilXQ1GRRIh{HQ*N{9nz($5U)7NTsXKL<gUSdmq8$pznJr0+GON3!<pNuCzekaP
zR7QIA42q$1?j1u_Yog@k39q|IVd*lP3zrtLsFRSH1kr&jk9-jYu>P7NkXwWY2bp5v
zi+5;kDU6X`9v#*NE|VXdXD)}wvsf<O?#g7xGhR^=TqmkZN*@QtiS*G2%>Dw;>E^GY
zGJLFzc2}KTmX$;%xUU)nGC7cRY7^BT$q__)r?1aE`q1<&sbPSPwC9^QAa*KQJ@kL3
zT=sc{T0*M&t_gHm|0x7KwVKLv6D%O66WyQYLc>%(PIo(I#_LX_azR52V_`(b#C_GT
z<&p?;Q*+#g5BSL89taP@OqET1<m~mqo*&c8muJ1%pm+2wUQP+Q9aHxBYn$U3mGc|+
zS3@U&qiFIcBf!K0rHs`9FFbU2U;Q1#uY*%Rc!=ug0MGq5hsTxYBwz@y-C8&e9pRFd
z*V?by1Zd9b2xY_TH28QOkZ-l<<UHRGkP-I!f?fFa_znF7*YQxd4-3bXsc{(8<f?RC
zAFaaa+6GS?=XG{DBg_{^2Y<M3JEKVPI}MU+l*FQysvxJ~jLG*{$u~o92|(>U2`$9#
zx2xg@<v=HVb3sa~Uz*4MS_1@HPe$Ldo>}jZJq&hAg{p5w<+>uZVec}Mz9$GQN$Ng1
z>obWEW#Tha%0q<<#IBG3!hk{2xN05=_7vaE9j?PrU|_JQ$om;ki~!2eNKnHOsu&|b
z&PnO>xTdc}JkTKpM;!*Z<>*y6qC_x!=pSHwE`3@4WHRo%rN5eC_|b0}D6!b+zae?E
zFsHJN1Z_4!u8}={f4Yn4yztww*V_=zQ=|Y_^JmB=Ro(nGH9IyaU8N96IaszI#srD$
z1Qk8?ABbjN>15NfhcK{RA+|JqVo8CZ|BO6Qg0^V>u61f?(p|<(@jyB8EY3xj1F~FV
zherAMBlaONgjx$nDbBO1!tppBAT=N+PcTPsw8zOm`d_~4&DQe!87I>`oQ&??l*%v_
zH>wvcK3?b5by3nmhdrb~oSWdmRD*cz!znLgtzcmP3M>OMzoMUE9C)n|jpi5D#eN#r
zV9Gqc2og|OkbF{2X*h4IxSQIN_+>3`azu^~Rsh=z{99sQYnpL;F;6>jpiD$QVwT$h
zMctMauZ=sh8c$5wD#*x3<|t|v>6+fU&<X8lB1P~h6ZB%BZP{=)dcFF#So|U_&8xe&
zq5Rgz8?zl3_tXQaLftfqz;gf8H5U8Y_vQazxdP}M0tL?BvssyrKpSgnN-MerU7C0`
zF&9N?(x?DX-u)5SzGgz@m1@A_Bbg*MW2K|e*%LIp6m#XkHB_XP$3ntw(0R4@GbNJ}
zMzn^)KH2OCsyPE$4U-1q0Ya3A`;Xp(mOW*6fAuDJLSG1EtQbUupnX41g%wO`+xeh(
z&Dr{snT6*43>U2RjQs6YS|Qt_RZo~C>hkqrW1b#7Lbb4Y;15z`6GC^bgmuv=+CrNf
zNU;xxATv`dqR(C6qv#4~#FlK^C5lWgv`2_NeI>jdlX-FIBv_ISeZxJ|yLygK#dX;Y
zvpM8F;_!a#Yk`)}Ok+mTmDwAIhl(}4(B17rh+L-$o$ZvO9K$Tm+eDz6hex@5s%0Rg
zO;bTq{rE2<Z<ZTv+nov<&Sv|z7MijMhZMdjAsz#9=;HzkKKGHJ4&zy_dp!>Irr=n0
zD@2X>nn;EIg?I&V_xOcmrsS<+qn5eU)@@*<jZ-RHP~Gg7^0ek<i>1*Zwy`Rn(#PSE
z?<jEncR4C<N^AQ?T#gynMcq2-rwL}ifE#r0^g>NK?9qUvO%^f3lnM`B`F<kSKM8ia
zS`vPES~J^f7Yq@G;wC!=eSNzWcjp_igE0mBut`b{K>Af$+YBK@WGAW=;35jh&4Rru
z)!XooCc%{OGh2x1qS68fMonSs28-jVRQDnMfE=#V360kih^Tk_nm5n2nY_r_YYceN
zbEG+<G(CVslV(uUWVjSW@8i%Z?~F=g*Y-OSpYWf%OCc?BnK+^qDP?XQp-~7U6O%sn
zMr^q>F&XCNQo0qP3q=uaK#yzTnKY=I+8r2(=~KfYTXc1g{1g&5YE=;H?u`L%?;UhN
zLRf_k%mK7|?WQej<?%Q~>thg(h5KicxaGy)d9cn{oUA;9=AAV?F~*>Qqo#2t0qiuB
zPhmFot+vzSwxxODz)X|=x{$ZO<4Mj1jq#lju0Q?ATFoc<p>8u3$FCDaZ0RP<Ejg(Y
zb+non`k_xivZQdturZGuujY5cl;$seV71Pyd)ZaS)dUUYqD__wtxDaeTluw_Ze*3d
zLp)80c}1C-DTNWgeh~LPW6+;zAOHXW03Ac0snhDCXF{eZ@xPwOOTD6JHfh!jbFcSQ
z^MOifX?kBa^YhrV1E*=x6Y!Skc(eL&tv#y~80wy#XS&1Wt;nc#Fb(jYixkGwTJWbj
zOcz1K4)}CwQ5HjDPdMc|sgD#oKhq^2?`Q&@3J=iZ6ERsC?1hxMo1;6!Gxn86Wr{ck
zu?MEsGH9X8+AJRnlz#`3d{*JBHPs$Q8OP)swbRPwGj1|7)MAn0;Q#o-6BK_*_hVpN
z|1V4NzMFf?Fq?gaj%*H~Y~>&G`VBOjkai^a4J)ui?)20!@*+=1{fMy{xKGbRT;`K)
z(M{1=2jO{c8GgxfD#ENp$2ZqQ+e}(~=dD2%)ngnNeEd)@xP4k>H3&&mScqvL6jU|T
zy(<@WZ1v>lwe|f>Ne@jBfy<&A#%mS=#q!*3+$hTBH7+b<{(UeJ$&MAf0{!Bpg}kL_
z<L>QDBc-HWQ?Z<cY2W*u17&p8hs5$@U!D1&&4Jv%r?Hb6g={{WFo>V*#&o(ek|nXw
z{Wros+ij#@Q+8cwT%8$v-vXWTIFhFB%^PQtX}@#o9X~94ZvH%frn4Cf=ZYogzM3`z
zyL)BPqj#N%R|?w^5dqi!K7;+c5T2L{@V)+yKstHcX~df+4ok8wp;M%{|4R@eI{K~O
zJlrffpA^hVA-4)7wOCI>XPDmcq~MJ-<MPvq&-9Eo_~^%b@7ycu5bw-ezu(r-lBsaD
z^^}`{PnFVzZB$JUCdfesXD%cO?2;%E@__P2!-T8H6?HO0IRAY^vqL_>Bd!7S@S~X~
zAuNUC16H!!q7Z=86YBAEmfDO$Je~%I@|wCgm2;>Ku%7iU_I0w<5Lv!*y}@0hJx#VQ
z6{j|6BW7p>tVbc)d)dn72S;pg1}PYD;GW<)#zf)XB{Fb_OtO~|<wj!Yz0}&J$9AT8
zO-Yr5sInAoW4GGS4RXU^MFl}LqA4Usi;{e{)>2i1iVj$Iax?QwA&L9DzWgK6W{wVy
zNrHUvFz7D3-dO|H;#|xMlNA$x=y)0wZrd=5rb^*9`5ym7kP9%LA<tdw;Cw$c>!+y{
zk^r4WsFH27?h&d*l7ds(WBx#V14&YU#R({x&S}mXfcWlun51l?YJr$qG;;);#QERI
z1e#9VB?f%S>=EBsA@}iqG;?JM(AUS6R6I~Clh8HVuSvQ7f+D}vDo0V3Pd9u`CTI#r
zxIe4{!T>?AroC1+G}~euHBISY0;#(LEA!i4Fx}cedHy6ehTO{(%#>FLCLF<=ro?s*
zGay&>?(P63#AEGyLXJ=FxCbdC6)FPm`Cug*XCXhu(eM!#ptZL(b(chpS^)$q)S7QH
z&gT>gV9VEZRj{koKM!cGRxu0WQV8{*AgtOcq~Ohf`My{uesEvEP*t<<e)SmAoJb5U
z2A7=<hVD>i3Er`W&qTrset0j>J%5;aA<v=rs%@VWLM}HlPE}V<bE04OogT`iXC4-Q
zzjKY4eToA2Aeut!{(o;QFo;VF!TU**a1YlH;;r)kr;I?~T>?p+0<!wL=@vjq%b<>1
zM6ki`E@oG%BD0ltA*lQ4_pAS(ma0m}z>z(cC2M%{8@d?chKMxqW=1Gmo+)J+<-R7W
z?%xZCbDq#uOVPR$$>dHhpO7*=$vi4B1Dyk3=Fnl8%zt<dw*CUrVl{kHmqS8;kN|!Z
zDdbhS$TvZx1jBR&ZbjA<7t}(O0tZ{*nnIfAQs*R8873II<ZHeaup31Wrb=098R@`=
zuJOuGr?xp9&;P;M=8EhC>_;0sUmT>I-w7TN=W2|Smd9J`%4Cf%)jt0$*7MLDJOX;k
zVZs&xwU4|{y2l8vw<@@Ws{=($b2`iUO@0>pU3R+R@?IH%zf?zK_EXy&rL%m&NP-KN
zBG}8d&9uwMxMD1YsSr}k2i{RQ)CM>N>bMjPGYmZ<WVzc`5J%0_ltB{sJ?q{`lAK+g
z-)VXniw>clxw~&x#U+cVH;&KxSM3zoa<qzVlu2}FJ3NLq2)8_!)Bx$oA1qaF04jH~
z@X}vx7OClorWw+7!mqq<!O@S~RB8&#V<-t>TK|h_wjV*4W5@2qHHQA)B1taSXRJrC
z-8Jgino{ez>6=G3q~_S01j+v==VR##t*|3@#xpWjG?Ijf_mX?$n|~-O@Fxp>VM)vy
zTM`ycTYQ(<IQ3yRVo3LZ46wvDQ?mQ)CHtCC5Dy3IO95f67#9C*)-@$RhhbpLl5z}^
z>mxca6sg@3eP##V4ao-ar|>-R*x4=;Lbz|;c&@l)oZGCsO|~rRk+XGR2MG6vj;3Vk
zpOL(-b=;FdOxFUV#*mXaszK0!%DS@UZlNYN9aZ^e3iEiK#O^U9yPR_`qx##m8U`tY
z9Y3?FIpyW-=3t&Q!c_JSSzUIi*hUnT#}<f2mZJgFz(G7q#)7CK%8<U83c`k`rX|%|
zJfwhDGn+#I63v@Mw)pOdCn9voDcNuq&wh$GT@>(MAEXqF$?h~ezcjrB_>TIw5RaFk
zVE^IwnM>qTru=&5Y|94DN>@2nl=(%;l;7VM5NA{ey~(6(0{O(+AlX^qFhz#yDcDw|
z#`h15;Zk>5fa?<P8m)k6jAR-aL>7S(IjNa}gOkRGQu);qOd=J$yFHYeK<)o_CkR|!
z8ce?n0z?PN8^Oru>&I)HD4~S!kK(${5MSx|jws&dqWv=Y{N2g4Lum69g&+!aHNM<2
zL}L-o0o_5f`4N_v_&c16i)v(e0H?zGAyEZHD;n-d(J6N;@eWRQYKW9eshR6$>WML`
z-k?K9DG-D5Bx`c3AHaH;Q5wY8dw!eGdWf@g56cpARbHmc$6U1bl}EnByE<-LbHFm)
zEh0^ps@`DcZ}wbokrUX@`yCCM+S$f*57SB;PqZEYz|DZ7@awROO~Tl6dK3MC5lwDB
zVy=eD@pmYH2-v*F&~Fq4;8_BFxg4x1eueSatD>bzBvFky&I9sNoU|_F)wwFLdT~mW
z5uD&i(LNnXgWh`jTpk=L1X$wo!-2Njd--N3D6S*TBX^kiyI=fPc(L;Lp_&KSuly^y
zTtRZqP_1^TRs_0`rJwIH6EiA_>6I2sVFq3=K(+e2gm|a|J_yPO+)~_1#IVSey%ej6
zpG8Y~TeUI7<;(8_(rynbVq6cM4t6qFOs`LOia{JIBPSpI)9{eti0Lb>cl|#w>|5%^
zq{cj!1tt9K!}N5wk_6C_Ix%M=z=~$c{pXBP@*y=q82&`1l_(>1AbF{@h;|H-uZMUX
z0o)V5kyDq>`Ws!jCwq5W2xOy?E+|M=0nuDCOL(rv!QtL&gus_`#s)%jgK%?LokTA8
z&Ic%4V}>g2Cy8IvnEz!ZkGzwVaHZsk8V=dVEU4qkk@1NmB<cI5FW(}dR-d>#h;a4+
z*!T_-j4=(vvhN`MXVfrwgqh!s<5O=(qvn2SG|76-=2gOZ;S-fAr2_OBQl<J`)vH$<
zo2hs}ezs?_tgr$Ra0oGAr9LaXZ%U|Ndgf@)%}+)pyKr|oUfoBbZ<NKBtQE~h_sO5i
zhY;s%zCSrD6C~=fPD)N((oGRqUou|+p(X3b$})(l@~KYCt%t1)8<%}0BlC4x+sZvL
zuc^<}nBh&ORFtnrN*$Uov8tEYD#&MW6>#72_eghtJZ2_MzZpg2>C^0vFe@xIPL4(7
z#(Q<G7r75lJjLvnazosT(ujftYDS?QY=yV_hM;c&zW6ea0k&i2X1lluwsZ0fSSn$y
z`QK&-sA1O%rcW_t7gbdlrqDqCrDNzyg2nHS#|06&9-EFmw#0v{_R#bHBv%YV_p%xl
z<TIK&$geliQae2vYqr2F=EKB1aVtHlwoc1<DaB9L%zn%Z4u=kyz&WQXxbtuC2qp|H
z3Q;(!h-l{aX+0jwSIq=SI04&7H*M(S54vL-h{(}%!3M*LuHl}8C#h|K+%a6U;H84o
z#g9ez><d5d4mPB&3nxGYViE#HQN8148Kg@;9)TJV{Mx=THbp@aPpyuQ&-jf<7_FCj
zls4<qQ#(7eONqDt@p-nJ)!&+^Ac#bXS`S0N1B?H9QC%a&(51G{%6fFn6B)5F=lC<W
z0&IFvw&IJk>ZEOm!yaQ{?2QyugIyc1<hX$svd3+MgIYXRvjuIU{_%`<eGnK2(vw8-
z6tk5`c=c4aZ!nemz`Ib##&2|7n6JB;OGWr(m2KN(U)EUQ90&YmmhMfbvySt959Q2A
zJ#F@P+```pBo*40T54D)y5=%w>wh-SX9d>;^^hf$BC?r#O`D!(3+NG@>`@BToh2Fz
z+@+7TB=$Q6C+j~tj}Z~y$|0$_tWTAlm{tLE(J&jjBd+NGYL8CIDo3@0d)q2o`e=R}
zM@u+D<SfN5P2<*};(p!$2boE`O`rPc*+BiYGy0UeW51m%WyGz4TJ+1&I)hk??GMLf
z-pv-tNBBoy#zE&;Oe<~c?hnGEqZS*o2gi-%00010;WpMS{I{Lk{4<*~^zWVEaZJ7p
z?0`#c%?nZ5_R33M=~U>3=@31$E)<<vV663Ph6-rqH&8cEN*TFwZsBNMQVn_ESLtMN
z&aB6>TG5Hf3R>+R$zqgu&!v>og^Fq9Tmmlm5Ub|sPd=Qu!eZ;IVr^xcY_1S(Q62j$
zhVHSgIN@I4EL*}Lk|NE+e0sk1CPA`d#}!N)ulEaFt-sQLi-sP4d*SQfy{*@~Cd^}I
zBBl8%w7jA*1=WkFL$^qLS-1b-#Oc1G5A9Rrj;h)wjF4qg-f%JpZqd?OY<&Jy*mr4o
z@{0F*l^40v>C17=C&8K$zC<BgT0EY{CB-KuRJ<%uL_{ghWSQL^vss9PjxZP3+Qw-S
zT0{*>dchW<$Nb2KL+e`E)Jr1=P9KP={h9_i2U659u;xvxf~X7i^6E1~+*>eM=qE#x
z_#<nwPX;uJ27)H2djxtOpdWX36DT@@)wayU0jz*4A|my~0!^<G+IbF=<*=6g<G^c~
zZvM^v#2ijuElAm4v4nvP`?Ic@PA#$JTB|TA(&OcvWOK4(PqNMyuF)oQLo4y$oNt|~
z_EY}YO!!fiZW*;Ql2tYwyFE7R+x?-Tb_dgkVt$qEQf_HmOrzqcPM@pWM|Vf%9vB<`
z-!`MrGl|x&4!jk~TOEPsC8xm`(<tRA-Bu=q*CgAYQ#+L}KVUw}?pWsgCfoQ~hhP6b
zPh^G+);Dd`%j<?4GJwZLefEXId3c?E*5>BBl}g0=El|x8O=g=J8_aQj{A|j<_7}!;
z-_(FBT<!l=C1RXO#PG#46GHaB<xyXyJMS{DbH5XgFthn+umKK5W7-_EPH`xxP`{kB
z{m^lU$Kw=E9B~Hl5nj1)0ehJVG4}I`2UAG7dP^h-Lwz3_5E~`fXBrynV6^oYj0hmw
zH^oTqZk&%{bIFP)_pYvS4C$?K&F^1dkss5+6DU_>>i6;fHRGU~d$&^wG%t46<sm!q
zGsAjM6(OF*;!uw1Y9Lvh^g|&aKVAQ`5|lky5P9OgO6~=!Wp=YQuKZVWP{9GaUCX|h
z(Bu*-88W9)Rdu^Q%MSrH$0Zf>$E^$1C$a)fdjBe>b<9Jw0|SBRYWScXPW3BE{YM6K
z(;^t129Vd2KL<D$bL)%aFANksY?ViYKbupO!Ly}jf<B)FG`NS6`EsbGp43qK*Yost
zs_X#dw6J5nMV<js0)`#O;aY0#B=WIsmn<D<^qterVtFL>K8(ZUn?N@F<YXwtpt#91
zj`TU!PKsRBhXxtO&-|DuD+sXD9BX01+HnPK-rlLvP_XEU+$>gT5`BpdXFt7>g<swF
z097+<zNoR4-1z;yCN0eiN3I80EuhG5s}-+c1mTNvRD5-^-~G{ILeA+XMvBGuN^IV(
zqsCWClEdtY=~I1bA1TBJ?1HVfPPEC&37m6&zzuSP_`Adj;RUusBZ&bgu5g#-IT%!C
z4fUe#sK^J~!WBvBcMgP7xU}Ty%^|Mw(a<gnAzl}k&5ZHpI4Wfr&3^y!-l-ySMQ+iI
z>a5^8BEXCDcNx%zu0xV?E6|&A+oFAd6zwWCZ8JGBTE|1eGJDvTzx&k(@Kt>`!dIIP
zRabRA-0E>cB(OG6k^4?q#jBf19pcTF90&M_qVb3kgW2Tm!w5)EPb^AOjQoqcFjprd
zvLHw#p}*ld|4gjY_ksTkspJ+0o-W2Xgs7l5zvl1xVM81djRlarx3E{AS{Da&o_kA+
z!-E4!Bms{uRR)SSY*(6oC7j3t0ep+sq)M);xH$*m<k;f+mcgB==`_c|pfGqHb{v*G
zIV!n>|E2PR4mn8nzZlTvlRo@=X?o+64=y0m&I2I{*5OWQ(0vBle$adrM!F;{v#2W%
zphCXVl>;8JZ7X~*lRWw(7sLk?Gf^BWRrk+%xE$VGKJXl)B1xgxZZTy8G1ep~l?(uO
z8bc>Q0eX$GdXDLF{xisY6P$rqE=v6xowh{TP@c*R#<f86A3yXB`e`udGwFE3WcDMj
zXjO<ja<X*Q#m6*dVPM$CY{I%UN^tH}J=V&Z!z)y{GXXKbWY!C3kiubR)?EZn=_a=s
z#J9SZKI|ffZI}a^8$()XL5g?42gM+;|DBgF7ZpXa&*faQ=M=8L4k!Nk6FR6@nE<nq
zA9r^Q_-SPX*{o7%51^;eAkUuT^CI9_*Fzx}-IpJCc?t^xDT&IQhOM9;l7es#vF(AZ
za=KHBvO!O=3-F7BFQQJnq+V%Czr%hXKui14G6&B9@8Pdkwx9z^Xc&M=bRuts_+WF=
zW+YSTco5~^ng|mmaTc<K>~j^S-T{ISrL94}$J95gr@6?lkhVb_-u;ua0jjzX9e!9w
zKs&@Gk}{PqWRY$~8KP*pKVUpyU8;kKgm*(k-yg6ylH_Ag0CJ*!25?t*+MDk@CL8KH
zTed?d${vKu>sathUI>+%zK+K>X6ARo@NA~HX1Jy*8|sFy2g2KK9!XUJb8Xf049p=a
zO&MDm(%Qz`V29K54G%eOy{q<eRqRe#`I=6zjlE9pIZ=uRq)+NS;37%hxz{xdR2CYO
zFk~&XQWf#S%hgo&;uERRu9b<?od0F-s3#rM3yE1AX{ojJ+*!q(Q6v$#iK541XmMU{
z0jYO(DB>fGIMz>VFs*jq&M#riTp9VtEqr*#W$PCa7W*sK>4r+PdUfa*y%=wRs>R#D
zAdFVBM#jEw_K7ynaUBS7RJvfSP<jv?i|*JyGQBW+8Fo1c{e7y4g$rA>!z75_Eo_jS
z*I9e19GF~rsG*0~3_)^#MGvGtNSxfWekEe35lF;KWu!^eSqP=oV+84A-W}J6T^3ZO
z%l|s%XLY#+nasD1>slH5Sh-lo`Gwb2%Ml<IC4l0%B1@U#zYy>0sXXD2G)XL(4f_H1
zXwJ*E&6~jt7~{3i5I@w<(p}hw$*5ozG6C94l^PgiSu>{DmB(J%&1AwB5BI0kk2Udh
z#Jr>RG-}#?om(F}&a+!{2YE+@l^aJD=@W^Ki|Iwnk~DmyTvpvRgO;4&;u`r9)6J8=
zV1Fy<B?)qj8c5cSo!ud*Z4f0MhscyK&<O_FYH~TGaA7uni<vZ7NQ5EWn#}>wu3H${
zMVY>`28^*>;e6-ZDKk?zghLs9|E2<tOEYW2*g~Xc3g3&%8Z*|#9+Z{@Tco85#6sL4
z*%h*9^2|YEpfuL9->Be3^xGI38EQRJOR(f}SLbVo#ouo9<j8H$GH76?9rDgM&byS7
z$e!Lq1KV!?GD^hEUFtw3I1{<~kZxgAb;GHv%U!n|vA9vU_kEu@NbG(0qDT6vQ;XL6
znv=p1n@OMIgL4%l$ythx$McVM>hB+zBSP-!5qcMf*uYc%wt7ezKrZGi4+)BiH-*rB
zMYa43z%93)(*>cUSxLu-_(n{;8z~(uv4<7LD0ytiA}H+ekxXSPWnMjvF(sXr!VnTN
zOIGfl#?i{Pz!7V}Q8(|T{@q*rZiR(<3(wZ30}J7g9PODHDl7U^9Ch&gNg_Q2pM3E;
zZY&-+O*QU(QxFk&*yNyEpa_lD%PM{G&u`BM|LT1ms3;%*(<?CQ7e!83;WRLw^bz!-
z9Kjx;@PHY;XZ#pNi!lbEDL<%~|7;=Oo%Ml;a??ALDPWw`6+Rj48b%W~?}9uaCyP-A
z-)o4ULNi{{=)-N>CNBy9=t9;Kk0`uMB@JOKlqc4i51okrywts@bQKPlO%<eGE6RQJ
z-*c$LL+EGiV#FrI^YwTyS=7yefG|qZTBdZ4%?wZXj&4UBY0)|Xr=XbM9+IoE2>YVq
zC53*(WEgj49^nt`FxMi9spWIH4`l+iHz$_gP-wbvtewz$Xy^BbYQs>l^>#q+hyR@Q
zDKNo-=-e@0TT2b*^l&11>AC}Pp!$4Fq!Qq#<HtnGf-$%kkX1&{S-J>MLz?;G4=B&C
zv9byb^+L!;kEuX+be5@FW@HkTti|n$yPgt)-Xh9W%-znE-88EWY|;_$aASvB$fhW{
z)Q&@_AJTFu1bI^)Exr0G{gn*?KV<*lglc>GP5CNzYO-t(tLE3AkA>fs1<Q;QiZtF)
zC+Vv@9?QD%d||GSw$+lJ?qf|K<TGsp%c=6TFMEqOlan8t6aHOeBy>wu8~%vY6hE=s
ziz-UE7cuooU)+lejDdG_p!?G#`+93x7-E0FSiSnx3kIRRBc*lg;FC~}DqWT!-{9D4
zNPVwB-6=Q?jd^QBhSij79o(rhLz7!mfJ?GvA{Y2TK$j~amtQo4&JFIX!8HTGAcFjj
z<Qd-4Q3n_MT(xTIJkhBh=THGv<fL+U_k;(INB|k7Ni?yXpF>Nd43qyS4gyQc*%qU&
z)ZjmQ?d)E*$lqRVBH!xE>cZmgVO3pE1b0!OweKUqq?kMwftC%MX|!VU0Q-j+-v%rj
zza5F2P?Z6DHI!0=SnG^-4}0^^dX+>_SFoOIwNs2;XY|Q6CtR2BKfm^@xj>6#!rkDa
z+C=})s7Z4H6JGvdEp2ocH2sMfuM2R<ds=?IM284`N6(W_+lQQ=`G8s|sKmKXwG(NX
z(xTw*6P+>-!;&1pl&NIL2Eg<@f){h!Ens-brs_y6f_uxamyt`6=go!^^A5wvV+OUo
zrwJpdLAq`>!F#K1xY&FG1h=(92I2OkK`#%bv|sD<7F7>ac*xvKb<ex;4iJ*ibxI?$
z4if(Kb+6ph6&1-@R<@(#@gWefr?_s36pLN%4j$l^V;(CQEn-td^k#)$@HM(iVsXN4
zJahioNazKngs%|U`(PmkF<^~MHjebyiw70=XbD$JPHWP7cIx<a--NDFAFhGKFT9Tk
zqa*JnlW@^ONqRXV7c5!i(;@B3O<_J~0ieGns1ED`OxXgvKqJ1*u(p*EJ^ERY9URma
zO2pj9?0Tph1u)v(6t4e8tUkJ8hEi~`RZKTGQ#42=pQl{JOmZmMlHYflQn>|PpX_D(
z9U)9<DbbT7feL8kr@yri_;06*H?u1ct{Y58{s3>@45hHl*U&SP&J|yIvijqm#heo`
zL!Q(LbqCNTwmuxxf=bEwBhbvx#lgpj+Tpq+<mJN0_B)stUX3m(_a?2X*G8KdXb^ZX
zLBEUB@dGPzzG226U2I{GJBcBcf$%i4Yvn5et!n#y1xi*QUE4tO-XF+~efuMZu0ejk
zpJ&{v;|%A;>@-eW4EXKwWlUY#N9@s-a?cCRFREOtF_Hm1Spc9@-oNhr`(NkBKc#A}
zq?nu(7Ti5-(^tCZDin+;J-J8Qcn1d?CcsF|;8I28x4ulgr2hXS^}`+(+QX$RY8uY!
zu%OhIJz=s$DJkgeoF$S^im;`^VgZb1l;33R`Yw@ey9m!J1f}3$<Jd=w7rt1fTV||G
z7QvaRccM%XtVZ<w@<woISD=5L3WM%#8Y;O%BEa?@*o6X~IQPCsegqKrp}fB_0J=UW
z2s~fCn#F+59@de0*_js?9E-DT(0n|^@oei(wb!81_b}~$Sh@o8R`h$AcB_Uyl5-n-
zGB@x~7YJ5pg3VcQyLag2N?o%oxB|v?+eY8_b#Mxe`YIZ2+>eMUuY1}a#V^YdJe~{H
z+bC@Td0<WmF$?^^<GQUK0iv0sk<kM!9yRkSRmono2j_=vB^E70#S&491&7vQbZNy_
zYuTf?>@{Xa;ONQaFH=Ea`-N~Yf40owJp{fPvmBHzH|MWg_*hG)bKIK=t~<){@|$^k
zGYEtvCg5_--9%cLEEYYI7b5CqP>kb24bvkkrK)OPHRn)D2|KCnBdJ3!h|!f{jfyJB
zXiIXkf2pfDU2vb?M|BVbhzdp5#q4chuL!QDQ;XcNRMqwWMTho1M$(1W&rN!u52Bq;
z_~vkf(-MM6<0Z))*WNvs6I{I2zgL-G|H=xUOJ(O96)iD><>Ln&$=i0f{s^Dvr4Xef
zP<Doz0h#pRX$B7L{x(k_r92rxH=9jbYoBV{qx+NeY3^6M6#w^KVv=#NAEl~Ua;gP6
zq}0JO0T*XR9;bOjB|dor<7+}}2GtN!p8OHuuh7}>=cxQ6;JqrdKTW?AQ)*D#t%`ML
zMwSUIS3q<j$fd|-6YB%C-F-mv9M1N%uR$+`x&?VVC`gFkKG|y6ybvj$GIB_F>XZ`8
zvO7Af3TVe`E@2>uSsMh`E_zSJO-|Mryfv`KFdl-$fb#7=Z*#Sn;qh_(0JI2`XW@I*
zzOtgg4LU?EO*mG>2o5rSYw!(%{|q0c#A?{s8n<jJ!u#d+M4MbK_n0QMY}5t3(B*`(
zS+YUuB<!~Py4u0K52ON=^T=%Vf`#JoNn)M^o3oL++YL=ZC)vLQab7GeEJH{}WVM>6
z`}dy-Y11Y%^ID&&*<q0oEq6nZCqUSM*W*fUq%ryXNsjjm`lq<HtssiWZrU?=$Ma!c
zcxne`%2PO=^CiAxdV}57a|l9s@^bHCM)LaTKhge;1ikb1Y^&LSLwV2O{=f91NA^J*
zhzzmn!Qg^}9=S}R?zD9(ftM{<HcsfcrV%0H+DzOYTptkuB9Jw9a7AKnM&rPTBI}W*
zDIhyL2bIW2_I|cXqW$g?yzXK{{8XcSDJ@FwIxUCa-+NGmYR?|^*a+@TFPw##%GX`m
zxp1=3c=b(*J1e7ZG&zJhDm{(z3f=Mg)cO{%sIpW?E0`wb%&aE2hvUFno$z0Dc7fK{
zYU<F9XBijua&pgj!c)_vLsr~1!uEocYsJSrce(f^#(s&g8xLZFU_<baS3fA+$0xBo
z#kW5s70EwEkY-#kGY*cjTW?E@`Q-DGScdeurnag^DgSNZHc&>pRQaZJn+a{DQOU0^
z;Vw|QGX-~7@Xmzxm6SUF&OoO*jE17(T+T3UnhtlO57qZF315?!Pyb8dz(0yM28A3o
z0HnB|X>EzyqmeQX+|hMbO8yjXQ0K^Z4IaM5_=-bxl<CA_EABJNlRns3+t$NNmb9h9
z1cC`5J19M^z=d2{CopE_*L#!;$j{XZ%+hamK&*JhQ+&jxi+0Gl=6<7iU=h2be-iUo
zg-5ai7S34PL}HX6?wI3MGc3tARur3_I0f;@yig2oQNS*NJ(Slg1CLr#$g6wc9ev?g
zl-P@&IFh^y?P0k(y)*IBOJ5TsY5ufp#%Z={XSL6E@dLYmN7#ZZ(};58_w4LX)vID#
zkt;Fr@i0oB3U7lgvwgCHRwxn#prAQZJCqBHEVG{1)E^M0=FwkcBTeX?H^@Ka(cQTu
z+3COdXVVySTWkzub<(W79xlOYhDel<GMGBNepbuMHvFGf76oaoG7@yFi1~}lvGW2>
zpD(Gu^~89E2@rw6|B9f=Z<*15GVS;OwHU-lar9u=!G&C`a#vjw9CZJ@pBPVB_`*8q
zZZ0kPb7&Q<3TGp@BgW4ncR082b0HF*Vw~9yR_;JmSw>eX3Hr~yYCJ&bhr9aNCdptV
zv@~oI%<0IB&SHXMC0e|tRBm@(sNZaPHD!mt&=2=_{hc=93$2(xT&WYvNy<uba8@Ed
z$mbT%n%+?)#>SDpEDIz&-4C}>7NiA@>f7`1H_Iz67+6%59-O-3?$tM!ki^!8EvRa4
zOLt}h_mh@9WeaeI)+{vut+huskfpDlc%4pG@V~$xQdFbAMwR4sKNYS2Lh!xIao66R
za7f|bb*QZZ+SU_lu@tm$Bzrr(2a`xyRSvL7Pqd4{ZqHPuqovyWaZEf5wV9AocGV8r
zp&YEIRIx~#Tkm_uaHk_uoq>b8rmX|2MMUO!|9}-NJfyFwRnmZ|P`}#U(X%#{uPm&L
z3ZI!0{Dl{=(~l%eeHnq43f&jz{cS;VQG4JZZ8ri7Gsq5Tf3(rjP-Dcep29&kuiVW$
z#On50N-m*DwlYUyMB7UEhek5m&2-0NI$H|cJZ~nkq)X8Gb!wilFW%5e3&>bLzMyI1
z014z<1G@&n6zrZ%+_GB3`8x~oLcJlN7YJTRP!58#0ORXTG>V;`#8<4OLaciH5-x#}
zqNd<OZ9QZ#ToZOUFPi2w=6Y}E&d?W9=tUsIxwXmRz@#`HH-YeHAT4-y0DFvCXYW#8
zE4KV=4q%hG!kTF9A(|dYB%9EYB1-`%{PFQ+BKuko&z+NVpdXK193cK60Mx-UzT_`~
z{M2~wz@2GY<V*WE)2J@^bMkYZ=4V^|w3C}zJkV3anV=Sf=}yY<XhE->o3Q76KjKJH
zARl^4Oq4S9AfkDuM=vff+E35N1C*2z8D!R}KOo@P(jESQ>`b}T!SB2}LGVKcU{719
zmuME~MtqhIlTEg(!O~n1-h7jfhNPxTmDAWs!YNHXnH3789V-UVq|oYYHenbz04d_%
zF0HM1+;7OAR$9j^{=k~VtSKt2(-H($ZaU|t_A5ZNU900RU4}2!>QXNYY3|S%Ze8ZX
zT%pX88zTgi3WWud67yW9)LC=KnTf^W!%Cx1Pz$6s7pblW4}86f0Ld=rz*F(%Lrv|1
zXR#n&X8P{V?@+&9|FhmPL;w!av!+?e*)D(*8hJrU{-E_TMy)(|sSn->8oBY2-{<(w
zP#;qC?4vS~F0~)P*2rf;9-Vwu%X*=)YAwUkK_?#n1VITN8eSx4$uA(%+fdojgb!KN
zOg1<EmXm2SvmJ+gO4F~03WA2bYutt3{-lBr_0dTQ1cQLoj|iP4os>6(JpTI6^kjn-
z)U+FWM>W$QB+XKe{DEBn01x~mE8QVZd&cPeg~IPAn(FPMwlD`7^chA#)4K~Uf2S=0
zcPG$B-4DG|ld^_HvI-7`^Qe;LjC`|tV$emwe-w67WZKVNGX3@ba7<R){a*`5@gO7>
zZW=Q~7vU1l<BVT4p|2AD1m9Cv`|-+6Kwtjl3;6qxKw6Pg3L^BP9NO~G;jSbYH|WF}
zxDW`Q!L0hwZ6;ZC-Mjq?t`Y-RBe9kNWu|0t@7Nx?OAaO;5Z7Tb0pl9Uv5f;S-9@l%
zdFhOY3k%`VMtrBfX6Kiq1|VHrNkD9<?Em|Ah>@E($=zB^q_+`|74DGBnXc3>)T2XX
ztnvQbK0>N^0tczOt&2O*s&~`+vmWm$Vlg?BBzlX?=Ek7@U&D8VrzYRqIev8}Ul={T
z{1Y77nb<>ue07<vs4hAL85Hf3HUZM0ST_}C))5qzFkr5;CpTBN<9d8tfu4VD9Y4~d
z_t>N~Go-r7B`~OE>yqY2u=0=)-Fm}I2n;&4xfNK!kk>)CZiLL?;nMiTyjX=Y=R+l2
ze~7r;v!LW@yH;>O`-n4MfYvysW~%Ob!jNyM!nff*KC7t5k>S0uUi3NP)(*>uO#D>g
zH71%0r=i4RQYZc6ct_8j?wx9>fDSyA7V?d43`Chq&Dm-F;2$48++|X-ETxyN%Seh4
z<tFI|(*X1-iD7Z1GEj1i@apv|2HA!=#;YtjdMzMUp2=^Q{Fca0$sTFgg?0u6xXlnc
zyreR_3<kppyxmi)nw03k-1ylS;K~qMY(dr*|2bzqCLO6Rq*P+0u@VYqg2|*AQ-ci+
zscw_mj-r;Ed^Bfn%kMM{z|IpBE1DTG6D!Aw-!-FU_RqQ);+amZ9x^E@_Rt|$0-Cnk
z9Ls+nPmK={2)DH0SQT@7c3*2_toVJ{FjInZVJwx;DY_fG$RlFqd0$Arnjxy(KyY=N
zwNKI$S1b%G$&l$#FI>LoW)J-ml7Z~R_5<^WtbB6WrUzQXTE_kzUJhx_Q8zu~6@<14
z9HXEf_*DV(_Jd2IF=NN#HU(#JSad-ZC!zZe-Tqn%>2r*k_}X~-3rrepoc@AMuux+@
za~d9=1Zm0=&i(@~fTiD%v2N|@iy{vkb%@#cog8wwFpW2m9Q#e%LI>OvbFOMOFFMx|
z-cYlQs=!LNV_IABZPrgHXeAK3U=~#v8%5zx>hbO3kaav*rIT=wp^W(8W5MKDH=YYs
zPAvqk<3qjHhpNGMw{sW)_%4k~=Kjow>8U18#t&8FhY;_sm-4N+mS!MCcKD>&64Tg;
zta8Mp%jN1i=w|3ZA(DHgfB)y(=JCPA*&mh(Mu<n_VD+V*^_s5rj;*x<l^itEe7zh7
z*R>|S9)aiIpgsC8Nx<jietWwft3{Gi_616MsCD*$aEG`yv#@9di_j1DlY4`XgCKD4
zo$rXk(^J>cpqt0qOCK8LfhrEHo&jb1(G)irYr8h*p6zion4M)~KR<m|hoFfz>hp%q
z(lq?{>%wf-Wd|SO_*XaVw~JvlxN!Mv*g|Q89StAi<7sN>$B`x^;(GK@F_i~iF&@t>
zbmY0iY~>~$<FXRfTfkOF3=74RN&K3=q&ck+O2npIrjb<8-kAK@BKg7j8X6TZwzr(u
zmpD053~Eg46PqXkrz12@{$f<C^a|`(OT0sZ?o5N@&uF>zHZ>93wDa1G+W_VGkd;^H
z7tDI_nBV^vs2I7`Z}zK201l$wS>!=I32!&#fh>x)ktLlA>W9w+Oc_?p&~IpY<J_EP
zk{Q9Dg&0(qODWtI5;Wti8l}j{4mgFTzObz5>G_PaQdgPXN(72F01UN;pskvKKsBlq
z%dRoJP(4Md#qXCqAk|2}-Y~1&?@Gpx+n9D+Qm%jN7dJ}uLlN3Q0@oMkbkj?f^u8ti
zrs}C9H4;z1t@|d%0?eOkVQDn+6Hdu-EGDGzF-#%bsyExfOL`Jn4VqK9&(gaj7u>!r
zn}7i6$}`qc1NqX=<<OrBu;kmJ%K;v#r48bLX(*G$>wcYe3jG`Be%+F~s0YMhbOUhW
z4NspAKMgjUXEWgW0_n1+J-OxemHo>lZ?aKUuQte*uwWQgT{`35GRT>{rq3|l?g<7#
z+TOf{8d3J&WY-nk{k^EwR%o1u6I5Z*-lSj7v~iiW1-j<84NK7Gs&lHJkhgdjjZ)~R
zpPfn$<dR;OE3+k5TCyV{Rn;yZFIS!htl*mw{n=4jla_#(J~#kO7A#=zS0*8vVB{jk
zG}o@r@O^bnC!&HhN54ptL2s`j2!*v8<T7dhj%k?c|N7|&@0)n}Pm9@sdBP((5=G0Y
zlWzJ1*=&4=Bc)|S#a4Fvt-|)ws&LV%#BjU6Q13aysdXNOf5TvKPV!zF<P!>MVw43;
zPAYeC4yCe@0wgXzYdIJj^`mP*?Q>6K&^3xNCSQ%{iO0!vB;?9NcVl~v_5NBILx>t+
zZ4dW=JclVAAR$`lT1?>~Q{J*1R(a2@!4z8$a7>8}aMOb1k$YoWtqiatP2QDV5_Sr-
zY{c(mpsiy-`L!qrC#(!vPt?tp?1&ZO15fmBTvxlPT)WQ`(DR<e=Ns&1ysKknF;T(D
zwqXG!iX~BQo=eh(29Z=v5(ezO*>ls-#QkO->KBMN8b^axHELn|lYI#4FtA@<I|x!-
zwb(a7|CY_3)T%TrI>b(7>YvS?+kujs`4Q|O@JGiw0d<YD4|MUBe%%wv0+7G}OF*>0
zRGAXjRX_COG3M2w6WH$OmaqO~$#_~y(VahVCuQjAa9}WYKZ{WKtvGqU3QS!qp0=|3
zA}nSM5NJ(*2gf%8+H@k>QT8v^wpsqJHXJf9R-s!;QKxKu9wo)G?oF?6J4PSXc>I+I
z(W55G3uA)WfHC{RK`#3^dV50Ip2UwljwH#DPMz1#bg1C*s7`k0i|LR*n`?f7sV;@G
z`iftL&p_H|;@+v`OdT#GvDjKJassVyd`aPSQ%V<I!60=DrN<B8LaBVhC!#Mu-k-x)
zfs}zJDCZA9(apfbw-FRfcw2Orpb~GPV|o&h-^FB<7aub%CKC@<5+k_*8D>Ar)%sgk
zaL#X9F4}_jdVMHTI6e0fcc4qk)m#gm|Hb}uH<Y-qs`SFQyH<R750U-vs*g_xrQ>vX
z2U6>MkukJ#$gN9kDS7%Ks;(2M+0FzG+n|-tiCunh&^>X{b8bGzKKeu91}lW`5Z6D#
zd%|~1^nIDA&fvQ8Iqq{kK;=^DKJh^8+8Gbs(73)t>ttcs&`}gt+`MpO(D8R={u5S4
z5R43iOoMn-ZF|en>7$Q1b_1qxnTK>|bu3-1LE#F6SO$$lwCKu3lA1)|<+bN@twKQ5
z?mkGHW8T*uTKv{dU&_DZ7F;DMhvh9HE+1rBs~R*lqxBzixxm?m!=prqc{@icocU-2
zp!JGn2J6C|+&Jm0wi5J$Ri?2Vd6B|UjnXd1xIkAf-$yBu-qKCNpSXeMo8j9|2nE4H
zM$tE>1N*(rhQvhs+O{+^xeB=|x?R$Je5i&&Mu&R;@xzE_y%K-YJrVOH9_zIYK11To
za&G^(lKrs2pAljzL8CKsyH<oPNMWMnafNm{=gm(|Y~==p8Q+;$RaB}6ZPg0iY2WES
z!u^W>!qr;jB3sjoHOyJ#h*E%1yyr5NV&EypWPC7w;VDI&4TSOk6L!d@C))0{kC|5>
zw>4W9F;c_IlA_!Uv>!<>vL<8q?Gyj9vx<0~4z6`*76^M(4;VQ6oVS3ML#glRxN!_}
z!caHWjj4tyVW+xt%#___s^0(w%fnes+;~U#Ul3?fj?%a4Uy|CB+y+P&G2YXcUtd!3
zh!Mvd{6vW+Cd7=)8_R8Nc|jH;vIqyNX65rlTReR+mD}XWyR8F0cw~6(Ac7DdYNBDX
zU#_UOLpVB}us}ge?V?MyWF!+5+WxbSDoId4v2OUUHV(?#WQ;=lK|MKLK%Dvoo03Tb
zhf_%;Z*&u4U|fp^6GJj7t8B5q>Q`(qjX|`A_0zkVjk*vokww)pb@q;cv#=?4Lno{3
zZGb<a)ER<CCBa#l@1Lbn{MIbbe!-fhV7?CTk+P!QCTT*_0^TYQvTo5j+rTz9QsNe{
z2h(g|&DG69X|j)l##TU7P0n?KeTXO}?jXdKm~9O6cbMl|Q{nm+w`k%yGv5vUE6=-W
z+!af<gjE*K3|AU!vsdotu~23)pAkE`@l}Xz-CZj~aeZNG1>kaHMpJbCo9PS>qpA`%
z4DyhbKK)9;G4<~_vQk^xL{&kMqvAl6r&!ZfaR`r+n4{tQNPu6ygkcIVz&a;SmAutX
za_^st;Gc-n2TJUU<k&J}p}pC~t^)Sb=d$|!@H~L2Dm;`)J&P|4lidt{gGcVA1=8B~
zV4{kOrV8Ow^PQc7@^Y1m<-(q01%Si!2-E$@gp=49QM0&Ymq;!J^UGuAm(CO>ssjT|
z&tL*(Q>)g6Wj-@y;bUNXYT558tj}nh3Zmb{8)V7Jk=9t&8mAfcF65{(tfRWS*oM@c
z3Z5dwixRN5iP^?$-0C7E{IYv%MXI!*=5*+NJA1#Ah9C-XYg{HAbUo5$YJ4pSQ_psS
zt}||CX^<eo|8JC0U|g&^x&J8SVe=1p(mlQJlL=g_xLKc;e8KkMBuWIJ1l9mM{3$$Q
z^7c5xA>uclGD(K4ChB=Ejg7_F8l+&1Y{5QW2dC#B?^{}1(6OTK@owPqK90B&yu#qv
zVGpXoEZwkG`6}EU<Q0!k$7E53;(W(QiK@^)-Qr-I5F72f6323ukf=tzS?vh$5ERxh
zw^+0p(8i@L_PLc-nP3Xo;w+8QYRagN%-T4;B1^ttr~l)ztEqnfsHG*h1oLh-=1YIb
zWjyKzuuH0v^ply6SbQkc^#QhSF}Nt?UqMZX1()c>uat?=kHtS`9Ezf=*B?j4atrFg
z3WA*FC7?9%$h(mtZtRgPX7oK<8ZM&MR6nT41I@DuTgHaq1F6HMX*zQzCK#lZYVplw
zCI(?tMAGj%I_WMc2M5h3w|+acch97a#vEfyKrB4zgBL~Mi%T|8QBcbEZ`HdDB<^aH
zC%_^nK)iRK2U^v6i5G|~I5w5?1fEo;KfDtfv<801e7-od5Fuw?)vgQROjML`Kg<F@
zwb1c%`#?%1+N0^ZGb4O9qW&9S{D&+&l1s!G5WuS8iQr$x8qdglF^=F~6RqhLjfWf`
zT94l$nx`YYukI+stC)-Nr8O}_vei5zWJC5)5gAzbUlc`uLz7FXfEvVMVCX+WML18A
znB3j-rCjHFq4<m4=O7#J9a3tvm&E~9?iN~aHe?ax=HQ|+i1<({FpE-jrLqhb)1p7_
zNOmG_izY(Eu8%R$5VS#%TsnImR6pb0eaVRFhc{HhPDblZz&ikc=8Er^MUWp02`3^H
z(w6z>;7KM8;S?P<1t)EX-$E~|pVef}J3}K7Xa_<#Gm$#|ckaFEJB+U75JJe*43a7E
z1jYFP=U}Iee{-f%cxSj9u)QW{%=t6!%m4Jo7T`o@#oca?>|^A8x#5}HT~QP*ydjYA
z8-9W!WpN(~Zzm38oTa=hiZH|US~8*xMc)+mcVY81%&f@|fF;JUYtfIEeQBGqvN0*E
z>_Xyr=ayUm48#YfsDnQ**~?t6LZUN6y?O%3loQOOD^6`UwAS(K(&Ae`S7G~Bs+1yV
zoeL*Kik3VJQDr2?^RY_?u>DPcK`JvR91>w6<zxdP()7k#^VC5wD7JtW9&Tr$2Z*Q?
zPL=b>MHVL~4g1aB1AD33wuTbl5Z3z<Of}uYX9AXa{i~W}BMing_vZnwI0|Jiz-BaS
zft^|YTY6!3o+B%XOn%mH`@HsqRAxb%H^q>n6GY+x(@FIJ*XtVe!?Dbm5ly8L&b(7N
z0-TSRcK~H4pg3Q>YZe+*ULPkJY-gh@7Y;^KzQk$s;Js4Ap~0gQ!IfBuZK+0Hjy=LE
z(M6io11qsc@`aln=kqd1Sp%t%>UaqwErWbOa;j7;fM)?e+UYuoKfrcd1?40fjI<No
z`1_N|Q{Q7H1YzsV3JGrJBYqBXCLJQAm*Kdd?uTVuK1q<{q+l32|E*gj)|5r1PEO^k
zPHfSB#7T6IARWdjv>*OoOce8}6G2A?nd54gYD{vjAO^CaS>Ps*vvHTz<wbk}TprVI
ztt9#K4%98*DIo%rVD=b=k{1P=uf%U596`d~8d_oS-8hhahskiF+F5R_0r{i`5#a;z
z0XX5FXypfT=KIiA5(w_<iL__yFfXk751Of91G}KO+ZTGihj^w6mioMN+I9Q32)}a!
z1Q<N9fu|Q`ES5l_7yJG4;<vY}s%BApLT48k(~5OIb_}Az6hPTIbh|9aKA6_?y3znC
zdeRZa0X~HiSHz8mo{1`W0*XeOGs}C{-Lfv-)V4I2Kaw3+OkZ_D7LV8U1=ZBP%d~cZ
zlDtIEt@Q6ZY5}6UcSpXmYeD<~ujn(vl4RxzT?gbRXGy!Kbcl!LDtW4!FZ+MaKX?q}
zGa&m9x2u_4)#sB3`_uzD<8!3ycRB5HwlO6oNfq236%)Noo<$AbHKuD~8<PT5IK)bR
zjh1Xarvu-T4xgJ}28h%SE_OZ|^HqjiRp?*|w}M!5r8h^!3AX%j4GC}%QYp~!<kEkC
zn0m-dMiZCl(j?DzULdgb&QteCOOix2Az^kx3nda%L@2zIW#=e4#Pe8!``{Q<aJlQ~
zL<YVyONzs>6>X)sveAD01Y~cK7QGMlGfZ6V@|UhE!|E={-0V9iBSek)m)Ax1Dyiie
z45UhRVAi@n7HoJVfCaFY`RejBZ(iI#;n5Tn;DFES#58rNKSO6mL6$Yyq^|%t=`&#W
zbfiW&f(-On&zCycr2`m%lxhs#oGdcZaIdGU=(FODcKyA*g^&WMYY3HVe(o5#6%DWm
zIt_9z=D?bt=z@1cl7`B*AZqJwrXB_0+=fzl8MfS_0h~Q%Sy(eGV0pxF3*$S!F@?P-
zfU~}G0L|&Sy=Du971GAnz22Mwg9iRBX6-;)TMe5-O@5Uxo|jqwTF`)U_-ghZeQeAz
zfs+96tvdn}3miWpDpZFBLLqm(*sJRx>|xUd>Q*zGq70t{Gn(Ol>Qc@ZGY&&t{E0zo
zzQONgQ|7;H_wf!hhFJFo)SGISE1i9<Gh|*dfuh2mq+6RMjX_7+TM7IJ4}0?H;pO<T
zju$s_(11Lk&B;c#)DY!2HnGct_&pBiNh0OcO5YpH<89Qf>rojv_U&*>fCTZw5v;ae
zybOT@9+=^RVGd^-d2L_x@z&>_ar0hcjdJ2isW;w<o~h3s!bO8{4+GwX4)O}o7Lq)S
zP9ZOOQY$sfGPu>$P#}W(uo!s0sl#I%@#94H)mJNUdrV*#?AJba1@-00+V1+l$TQa(
zCpJ#0>QUJ`npqTH)~(_)1_&BlqNt80rt0P~H;YLd<ZW>E^7&w_oHvdOf`jVTkk~b0
z%y^LwLRqlQ1)IuGo2)7|=jLre7-IWmjCXJYo?&w9da`NqJrCfFJ%)aKk;0EeHjkp4
z=i7e;0q{P%XXk{)Skl1gTam!}I{$bdr7eFC-=B`jPbyfp;;0(Bkir{jvMx-zitAt)
z<^jKxuNKzuXSSvmJTvBcE?@y4g*kbcYPXY1LN455^U}8+<y?AC_6Z<&dVtGIYMeoC
zw=D9~aeQn8S%+Te)6bk$HgzKRJa{y;X!9GyZ>GNaVY_BDD4m`K-@wKr(?0SM)R#7b
zM<Iatpg_NyzH1>*Lb(SO%b8<otiUe+q#IqgA+AHg(kn~B6d1A=;z$NXWb!^JL^Yns
zw8JZ+ECKpv98j2zI<Y5K6vV+XsFRTKBK*&~y8$b}0a!Xz1|hFUlW5KMIAQ3bk%`Ib
z>1vD>G#O#$XfLs9-*vMwobc)>=kON^O4$S?FuE%S0mZRZC9#jHk)bH!;Us^CCWnrh
z#>bB0a0Kui9qRl_CBPX?OAN918yhyd)vFs0vzvwLcg6hAPC26bx69~muekX@!rl`}
zW%HIit^S1z%|LETvBUTcVV;mjaygJ^2?AR#MTSh1PD`%i4JgAv%QQ0a?wL&Hjc2^0
zJ@+3tAn(O$?TP5d8hge?IjI^>EO4hIb`d3FOa^U1IUO8~qY8%(w5cCYVUUT{KMHe9
zSk#2;W8Cxqgj?Kb)^CD<BH~7Aeb?(Kp2xH#^ZDV(M)JMAx%F{dv-|57)}QdKrzq49
zO6eRMjTnv{p~!dbNJDf7@?Wl^;9SdBW2Ubi|2WS(nT*hI_Gzer`F+U1YUro3AQ9~}
zzDOKaB0bJi$r&DYI&A8_Ed!UK!<2ZQ)lnl?z45mzD`9x!x236bZ$<d@6-z4-0q7Y&
z0v?l{9Xto__yk0lt{3CO#xW9FRfb2#8TC{cn#*UPv5cpj-Pd;F7NyS6OiuJ9@2`nx
z%^yPTaSw>%QSY6RhM&Kq&0ZM8wS$X3i9`?#tzz+zjd5Aql7|H>qGv20uKD1gBiyp|
z?NFule(Q?f<KMbznwwNEp>s}8o48RAb!l#4DQ1O<qcI!t>=n+LRGpR1Z+cd=%%vmS
zBG~;=@Y)ui$*;ssZx*m10uk<zp^dB}W2@KEb}zj=j${4Cb^M~IiN6(;r|;Q5FGepn
z1%5&)8cGcPT9kT^<O_1&STc?Gei3XS=)Y0*WE==*s0-%&I}U?=yCjOd8<RZ@Rsxbo
z6DxQ6JlV4kZ7Xm0KsUFf8t;;VYfRaTL<3@f7%K>(462K~>Q{stEE~@VjU8h)5qG|k
zQP~-&)@`rP$Drfe7mm{z{N_v$$x=o(RTX(TBMs_2GdVaIX<2EKeHe)993lm_wD>*8
z90L&-lA0(Mr#H)NE>HD(zhD#^(xi3fX6JkUtG}|!&9N7(zGIWC2^tBPglK&-P`Rou
zTNF;9L&o{KX82jHK_zPr(p!ym7PDqMhu*I2KR~X2<Z94O_jPwXBGj^c9aUTRzmuO6
z;Fx%5i{Df}7YlyCMPU3g`JjSLsm>SLMz*Qh1{<SCCFL3!pa2C~NNbJ(OHfk!xqQhm
zhpQ#O#AxA*^R5btfbSnLPF$}g7F*R{M2;7d^rc)APAZOxE;ofl`7=m$52><nJLD`K
zmHPoa4i;mOPD!LDlmSOo6mXV9GeK?PsOw5&O1Pjjs)QZVDIXV4{QmC2As19CXM@=2
z)-wb+$q+T>h7RFAB{@5jqmX!H6ot(Cvl;>I0-)D+!sUD3GfG*nUobth!~ClWrJA1D
z>E!apW~}rB3+g|l(g!`^zqIlWQMRox&ry<8CUok0!Y5Jf^~KU5m}t-?I#QwlAF<vH
z>z+eC0UTG6or018CXE{2ZlJd&l1lWDjl`4nw8Ocz+>5`wG}9G4!>hf@6;{8U3&*R4
zXv<l7GI$+<pK%#=eFxw(9+h2~8%<iHl4&!2VLo(YJ65naPhCL{qx|vGPCfvun<*O6
z8D^9fSVA^{1i^>LW#Ng=%|VfYY4k2}<ezD`ZWrDjEQ{sVkx7sAVPS1RvVqI#9h3Aj
zh5~4Y0^d7+{7KhY?;+od+M7XfKgxP}OJixN;24cnsU>UtRjDwRZmX(f>xDgk#C^#Q
z+otJSlYTOdFd?0q1MlQ-$i}?tQw^~fwQsz}S7oX`93kFcwe&q#YhO*7O+yUyYtFRQ
zW+yGVp%~DZ*M!Bs@5*1D#36y58pRJbWPyNlni~rwn(X-voxpW}wj=$Bu|Y8p=GJ!R
z%TGBcYcb_sJEotG?aYwrOS%{*<O5uT6<g9?yS@*F?jh944cNiPH@gQY%Ui>?A@P=2
zNNAW0Kz949Uq`htYU(CFS<1TiEFU#G!dJ0JbV8apP#yw)*ah>=5STL-U10lgPPkgK
z%#4_!E~h|A-~z7qJ|CcF3}irnb)Nj$)r?~M3HkHgTxkM=TF*GDwKEfpZKTKsM!22@
zQ~mmoWz_>AfPLon?7sWBP!i#Y(6G1CiATF|0mk)lKW+ob$=iz$B`dP7+!IxKHf7I6
z6l3k?cEoC15$*j${+g;dHez!fy>oUut4pb|T%-%If9#+HKfv={H5)hdV6>zX(^<d2
zNQy<SPPmwlm?4@vQ3n~$3LCH_T)H!<Jx;KtB~V1N--w?`_;%g@i(PV7FnCJWdu3<g
zm&2pI_=;B=q^*sWf|v)js^WHRk%$*lt(vQ}J%a43R~sAo#Fkgf+Pbi?xm?baE}|4?
zZl1s2=^}e0Q_z}F>P`|#rzZYdQ4`Jx%k9ngUxaU0svJWEul}{GyA08gN0+|@su;d4
zlbbu1N$!6_sDQ4ylw_VS>V~gKA`^Sw-VB*6<W1oX*t>C)dq%Rglq}TzCcWOky~fOs
zjkxUZwt8x;7ta`uu+F=}KUuIbOOk61C7d4alPAi=aWyiZH<T&ctBs3~<ktrJUWh9m
z61j=v$3~Mzyj{@obrAZj?s<g^1~QEo7vHK~IAA>=r>AVKf{L}Mx*^Thhb%iqk%`Ao
z9|y#}Ky%BRzQTaQUVcOdS=c%*h9oi`c5Pj08YaeAMGTh8Pd}4ga=j%ykirm#BV@iD
zqk&zJN*rMGOw6R2n6j~RwhEHE#>oUB#Q?_jApm(bO(}mvVc{Xt#x@@_&n9OoE;OQp
zvli)*Z4d6@(YMCVCj<<l!s%;3NeR#qH9FB>M#75tD@=aPnh$n0<hS>q_2!%%Uj-_?
zA`ft=@s8N4Ji-w(p;-yR3iZs_qNxggveWcEQ@No%AbNt#!UYoEAW)F`a8IEZG+EwK
zbHZRrRi>S0@*NV7Uw(ZIgBRG7$;-rlcd@Q;TM}S6j@x^vbT4uD*+orbO%zG7I12=l
zO^x0cT0ILL0&4j@*3@@xCX*fB$F6(5Oi1B5NXwOM{MME5j@B`gJvgupCLH2wLLpKO
zJ04IJ(sGD&$gs<NJUB?UcmnM|b#PQ_P65rr<xA^5ZArX$Tc+>(mPlj(|Ev9Q)Vts<
z@c7V0gnC-HS$E0~8GoqVw(XLZsJfhxnXCzDz4zDqD@85(GFG!d5@sCU2yKx*Imh}M
zFic6^;(tEOKVmwpaM@^jaGGpw9~Vk(=F&b5j3k)okqvS70%ps4W)WpNFbL1zONawg
zfkO<uJi_HlO_k@tuJ=)cxW^-ySyw<TZl2t;0+)3TA^l`aCg;a^cZ6|-jK^|G<Q4oK
zW$6750DF5oug!)Qd$xT!-f2c?UBC<|hO7AyIgKwV|Mhy_qoFZ?hS^uQg0w@sCAW&H
zaFRPKUq33${+qR$?6O}wcE=%o|8$t^_<urfQK=Ykj9wvcOqbRcGe?bRD3NA}{{;7E
zs$w)-9sgmn9ck~*j3rl*7#Rq)GpI=5{*-bm0EQiUkrmP?6PH$g?$}AxOV51*g3lk0
zwu@XB7P17N_vSN)Xzr3+cOA({mWIEg$#01Rxt2{Bd;Jof#K3!vrZQK0;YJ<1yg^)}
z5eMIZBAuwlDU)}p#NQkEC|IU-%oNL`uI`MaCSKrWDrbu~6W?_#-m?~e1k-UJCP$x)
zFHaL{FDu@)J-k3HYU3+*B<s<EMjNEo#U?~Lfm!8fM);^*o<E|EV}=r5*UALxMn%o^
zk#GHDAVt#3LMbT}9vKxE<KGL=lc)#Jk@8YuN)RoSBjw=ycn2eB2|kvs#H@~4Dvx4(
z41B`<<<x@JvTGi#km{Z<M87Mh`4zl(6c~cvg&S+H{Ls{|BfobuA+Z1iSxrfGp|clL
zm9JxpKPqYVsxdC6;EO{1*HAd%zs;A)D4y^|0}(5-<?$$=ur%lru>s>n*43QP0V%zC
z)JX2M(Fn2#Q8`sxegDf)LqCxwx@)^{z{^LNG2kgw2V0HF<?;f%S8Cf;=$>|>-{ld$
z=jiC(G^`c8e5V2*1N406aRrG7o|jnY42qCt0meqA=lHDPN#TZzqvsAK&hD~}Bmocj
z1Xx$`^rJ@gYDHPNPX&JX?*dX;jylJ;My)WY0{NIOAO^{wyWkF135$n14D<nJG@6|y
zSnHI;HhR)h?NH=(-HvF=$&6K#f(&-V@Q(lGxe$nm-FKdqVknvDWPB~lM`SFwfJd0%
zfqKNi%MI~2E9)!lLHtf(HyDtkp#CfM?Go5>8S>C*OJtPU*cl!k6tK+)*%5%|!nE}M
zbNY_DcX{Xcc~tDS>vIK}Ya7lmTPC^F9<LS+`{dsT2f^s=i$5mIu|J@cc~0<7JVt7=
zRkuf|ednUdtC;KYy=k-0Pqy~8B3og>LhKhvC2Pl-P&pz)+4dd`nJ9YUM1C8%{1PY%
zy?3Z*9$@RH9~lDr#$)f+tyUJmU>UFnZe*WqR;nvB=F>HdBxv99u_4#^H{F76o!hJ|
z+H_D)n=6Et#!<>b#nLMCNmx|KbsJm3A+hQA-oN<H953whE;XI+V_K)u0=<bsG4@{W
zi#qk$UDscKtg~dT78(zuLZxgL;3Ii-<xXkIN%V+rXBb=ia{9Af$IXi4nSyVocX$wp
z69^T)T%J?p%TYcz)<nAq#VJC3A;$!94DT<MRg*ki8m%^|O+2F7>ol<>SJIu+Jx{@$
zM}w3R&2fATOIKY|KSELj2E;LRn;~k2jhMqyPPdN`x*wqmgs6(m?%$F;Mw%Xtnilk8
zd}BmcP+){Uh2i!5S*WpJjpsi=>;{CKOZ3vxYQS?WQ2L_&+Yl9ECvtjn8|Dv0$jm*^
zm7MNUJ5=*FyQ`0p4k^J}KPll#JEhy+b2>Iik4QP<u9LHOmfNvklXIPVM$*ztXtKr`
z#uI`qkOr*sfH{ZW;0rwuDys6sW5T*#+?+5Sp2}lj3E;y~jq~k~)OIrmzNmNxV4*o9
z+M_c_I0n{h<wiyQT@Yvb@FTk|0J}-!tmP2xNtS<e*XSjAR;_0dhQ+-|I6uRMeZE8|
zC@$wUVs6ni?P`ks$3PkMVeTMr%IEVKi75nWx#z=AE~>x2CbK!eK};?Fn>NeBk7oep
zXz<_SE=xi|!Dwy<gP3lPO{=xl+q?r?exq?2WKp;JV}FBGw@2RmuGqK}7XeBq+S`dp
zu;1Xk5ypD@!M&=I6N9xpZOIV9++D5>GVF6t0fIzOz^lOfM7k-{#^D^j3u_ojK*f@O
zgP2Eqw81I}nkYf%^ZD}gQO_cd#6xK|^XVZdvJ>|9l*sl6JiLmJoB}c|%$&r5|0&H_
zW?cRF^W;co;<}m3{oL&^tZuVuPLi?+ewxrpigQ9OuXuNMwTVZa=^RPSQR~!AUFz2d
z7c?08rN3+Bz+cnP{?;rt^lYP22v5N1VQUnK<gT25Cv6_92$}~-V}x|!rpxfHasU7a
z6DTJ#8D~4)qeB6UAR8Uc%AM7^KLs&yzm;4HP;K-GB+0c*%rz)fEiD|NtmV@Ei}AqL
zc90Ixtad{8nIk!L<`0Ey7q>j}K3UH{t-X7&aD&!5?Gk@?-vCawB?2KCsB3Ql-0F7l
z%jS?**B{oMs>4QWTmH1(?SeiAf?(@%Fshpb?dCbV^h0I7kI4K@kEh#tXH57Nyr6a;
z;InO7FE757{5+s33TfpgUt6fcUBk?aB)=%bm}1Tcm~dU=VoAA~a-)oaGV}$@u+-iF
zc^i4sGyegL4;S{_F{bO3ANbIu>eV>=vl>JNq5aHIj;QKw%sCpoI7$}Gb(}TnbRA?7
z_6gEB+X*T#6f5&h6Bfm46ZwE0yy#(~TT+<;rgJAlMyig8FVUux-hWDl&-1f!vf|Wp
zx%Z!nB1jOR6fXf$H%&okVUGwb7rpt2v7thf(Xk3ae&vZ2VYTv8olg$+=ngJFco5qW
z1E<5E6im1GdNN{l1<Q94Apg*sMrA)AdvvfbY?wWyB91*B`h*J`1lc=l+ETxmoSYsI
zi*Q9P`c=ONgXt%e3*sy&O(qZ=>%Wo>Ul1{@WZUakq(KD(-QmCh%nm=4*s=&hc&e?h
zeV-`jtz~rkGl6*;u8L*Y?~jS#6`_z${O&xx*AH%$h(QnNJm5&*W>rn3{mvy(UjKGK
zIzho;a|viCnKW7wi97`2HtVM7($TPi@RuLb8ExUDpBj?nYcObUKIvbMZD|mBeesYo
z2&C){;FQ7W2kaw}Y*>Qvl(`=S6gO57S*m9nA{Tp%L%P4RT*FOt&iqHGW6S^}Lug`A
z-QH)<fTC)!E~oe>kaa1|{tQ+y*%7G027y^20J9y~;ogOrw?eX4q*D8~?@~!gNH9Fm
z==XJ0arZ6y*`KYG*vgOrPZ7rhHJf53sMP%onp%*6<v^7K8iNauGd!sn&LD{$48@KL
zjX~+XW6G9BAiseRKLPSrWaaIxKy^!q^rjhl%x%@~)z{}MUi2P|hMgtr@Mq=Q03X(-
zIY(bB&tguX2Aj!IH*gPY5@hg*+ZrIV`vp<;P}DC^0FuF5d>3-6m~K!x=e=EXRM4}T
zvW1z10fdefJy}-RN&-Su?P=qT@$Ec5y)0>>mZQ+{Jc;`xyy)q~yTMaWIqYUW28wnT
zpSiMpcyzB+uU#wI{h!Z7qVE)#i+@Rlg}$MRMme6uR-lh<dLuSl5Gk&}6Sd0kD0B4g
zC}=H}=dZ9uj;q$41T!|e`oV0G%%7%IL({e5?8sV&8qnfI`>2ttR0)ns&S26p7A^Qq
zOY#Ou@RTp)ZpA<!Iy0@RGxRKrLgo~b2>p9D>HlxF7Yv1X3)f3}@M!jOe~s|5>=qsQ
zyu#a(RJDonbtH!9_>G_FFJNx<Pci4mH8@q?02BDuKIzi=T%O#dgZ>B0D50I8rL3L}
zyAHDhF~yVRNg5wMP7Ve|f;my7xH~F_`Zi9>4>@W5^AKHS1q$|m>TZNF3U3qW6>ub5
z&b3zxOs{JYDX_>K`6L{P{^<b1jll+3O<F7`nqibHY{RRTk?-$oVLh4SU}L%wHl(x$
zyV8Czo05LXL71DgH>sFcU~M^JoI4EYhe?DUE0L3-tT#T<(#VzX5+%KX6!}j673H_z
zs!<+VK|K9tP#0i`A(6o3?Ka{#?sI)#r|u)GRqi08uxAJ-H{r7eq1i&hozN2*5#TDf
z@x}ezzZEK;H_%s!fsV*lK9YJyGy}7{i_~U+J%Av7J}<vh(R~9R=1m>r`RhA@EXsQF
z+X=aPUTV+2lY$vDmyS(VTVQS~bAgYcI@*a*YcX#EV$kT_b~iX1Obd@yqFrSItc9U)
z?1C{sDpLea#dIVdqV@xm(4W*C3d_HC#Bz}^B&!{idM|RA@>J>u=*901!`$@IKH9zm
zVqF-q?qaV2QHhc77_P4PfFghN`*Y-&l2ZUa*5u2CA#t!3G{G^WXJ0EF5ZUeBkFC$o
zDZG(!;B-xApK5R@rid=x3%Q}4fs>&%#2~&f*|dmWUZt%(7f-D(Z>r;)%aZR{@GBH@
z<V@baVFbj(>KG`jB}i4@dd+hHzY6NKd=K(n$AV=Y+(b*)Y5(LqEuWX;7gGHh*XAbZ
z+t4!^>{juMg(5l|&ep@oZd^tu1I+(e>+lMfzq_OPY^=o7Z>?@yF(fIn+tsWmWY@lZ
z(QJ|s=|~6i8<>Pnddg5q9+&yU^+Cy-8yy?G?YB_SJbz}ooAP@-2LrT6_sG|rqH%tV
zK*=*k78VyS!G-{y)bgV=&12d<J56IU@uo}MdAld4Kx>taAg_w%wqQ<LktG)rYu1|@
zWSh>hSNosjN|ZCEY2xG7&2*`jiZ|q7<~LPZAxi#i&<MfBpQ1wa`f*l<{T2$J6RN9*
z?ZTIV$@Zs@x)iMu+5eu^qHU0BG95q9mAhMbNyV{s>)<CM-Fj#c*dwR&VNDRKr}Xqb
z^*e;*!3pSlOE11vO`V+Y2RTNlG<>u|cUf&F>7d@Y3X?iSKln-)th^D7di4wMk>8Zh
zW(%am%XxrTPXsvX-5car@KS!XQ57xP(=>-@5fZUj1z5aCg~t_9xzov>xD3#$1C95-
zNHo{(znoyD+V`s)6x9=rlufjvH0;l!!W(T9EejiV3%OjABay-s*z=0Cb%!N&Cv=&e
z_TeVrRY)HW>j0kVd6a2dFDn%0X@;NfJ8Yq~KY6T?eNXURROhZ{9pYTSyx2jX{YaLB
zlbV$t8;*qpFe(&dP$Ih=nj>H%{a!V(3xzsQIY4!3BpJcRr5c=<ehjD>du)9t%)<N4
zuc>c|ZxVs&U13zjVFy^}`M>|h8A-J77TL|AVrkpjInE1;=`LjLm>t#d=}fCR^voPp
z#}iEx#x=~qyin$(Z%GA-zZsHvn1``S5aJM;4$My~e|Un1XCQcFiqD*R&%rC@(dpa|
zl5`>TRn>`3NI|hLS23dPSsBTk6mZ{0X0dvEbkLCM(aU=Iub(T~H(#<8o)sxg<5AQf
z+mgq_$I@$>KUgfAc!07~tZizz8xQqBv@8bTshd86vM3rv!^t2TEC#j&Cq5<)eW6F|
zw4FfJruAiwyDMwRTXqbd0KINcW7e=2hlD!#Y2nAh+#1tIT@0XYw&bA5QXIRgdinNx
zQ$84c9FxF3zDaA4K(p37O+Gp|s&_A_!TedDC%IH{WBC0=6WjPGdPSMy!UoOUGHEZF
zCO&iGrDo)&H5l@+)=AAM@;-@%U70iptCyiF-hv-;F#ZmCLT}h~mqQQq>P?Tnyd-l)
z1*%E)bYU1_c+ow=X=cNkSg(Sn>fB7}#atxiTWi9y<l*vf2<`MrzX+LXRgMXk;YFwJ
z{7?P0;U_zBH6G3G`HO9jE}_}c8U_v$8*Yb3xyLfRd&5zHg1G6BL&D%+8r3KTQkHE%
z30h%y+dA=A5ydxU)wPbqljoOy5dgjB6YipNq;RleVU*`?90%YuL$LmTY0Y|}ofY~M
zjvOblE){@e@k2Q<V!u{oWjGQ?{Vq9YP()~>rXmU-PY>v$Pi{87Un)4D%Ch>{=P~vb
zgA)@03x|zZ>OBYO{t8W)+h@&zK=Yg#Gair5(ONrvy|qJLkLv=C-MV5I2H9d^>PNao
zaf{uS{7jyO&y_3}dTJwHnF!k_D`RP+WE8~;R)X-q?bu5|x}EmHhf4I2w+4}Ki))77
zy<>e9&r>V{$!f6XS}oVU?FtTb*!K`Rec6W5uph8@^!eMq_OaGkBI{I|iP{8oFjEt;
zD)Q|{V|_Q_4V3X~n_PYMfgyTK1AgZ_IxrL@Iz>~zR1=DWl;jsz5V(lBsm8pd$EcN<
zb)RX*CtM#r?Uj9cMRbtYBo|mjxK9P89sh%5(?JSDH`+aN*3G8|XT;s#<TGHg0HD0p
z!Pidjbud9fw7;EG)#1&qI>|LzD~)=;UzO7`Yd{c190R;u6FP27^{{XNr;rsPiV7+g
zy+FVx(7iJE7EPxA)C9B_HXT%RM0DL33Ll-Y&x~5~TV}3ASpoz~;sWWy{Yy-6tS&D<
zt^P_{I?_(QOVm`4dHKAQX?39nZEJ1ZPVFSOe6@hjQ!o`O`dr&thlZz(_-hG?S&^2G
z0gKss!hAZW!N~4w5Yi#r?5IGxH4X;Nmhbi(DwW*H%r|DhR>TD;wH<Q?K)|clYACoW
zj1Q@w_GF(=EP(!WLO8Irf1Ccl(&6faryHD=<7DieQ_credBz5Tn(BE<c$KS$W5uJI
zSVMpS$Zl-OEaTfPmay#qVHVD>p3<dcg~EN-z!XxDNJ9aH(6wts24mwoKE>q+Xf)Yd
zCH}!bVf5FTClm4a@+e}hgoDOyg{=(R^HjyUe4*Mj{onC9V~GwIfbNuYcOJ7RU@5A?
zl7-Z?*R-aC^`eX~;!JyFe=}yH(^;e(-u-z=U>5Ewi}Bz1=iNLKNZe$goPVtmL(h&=
zFZ!)5)EOa>3imG&cpW_$YF_A-K?U~b=8df7HmW#CbmlgL1H%vkOY8#{>Z+2!2|I{x
z_S4m^pw<>Pj(psr6v;&aZad^`Qko_=D@Ep^-d8Q-eEq+F*6Av^f~?Dvfn|DIl*@jS
z5Kw6l8l_N~_1m9(f@8L=0wEO5x?D7lk(Pf`zVw5kBQ=<lS4B)$8jMxUfQj6g&q{;y
zmTJWPi}fM(=1={)!UD&8uAdEu0S}Dg(*nejFw@}{Pa&KuR<@U54yGWqlZ+8nlcGmf
zO=H#D$f;-9W`*g-y@y0A_XjQw(wf@##3Fw~_TzTe)MxScAgmN<@-?kCHG64PI9M0D
z{{;NZ;x+|)`4!@#WitQHeT(`h;Rp~J$D>Bk{PsvpQszdcn&0-(J)Gqm8Q9g$Pg&A<
zn3SG;A0O(HaKviN8m%&{O;wcdNX8Z*i7p4%CWo=FEPVtU&+tImtj|m68%f=sK0JMz
zJg0|Zv|J%_0URzOI5x`lL@&K>+Nyy25z!Jc<SxINs<3rH!<d$n^l$L!@N;2WIwXEy
z>6-=$YM&)Gn2A$+SaepDYr?I5lPE#ylOXyjToww^B3X$aN9yLHJ)%z4pp;ZCEvglq
zx`X5_K>}yW)_Bh@;BA%O(&T3_3YK~aIK=SD4_C-2f)jBPz9T%v^Cb<BI3&udnI;;B
zbH$}0)L`{dw?6KO-d7TNCfK-vKP;B2I(ci0^aR&q;?twIlF^6{UxxKiGF%Dlta1^3
z=}-@VYslGgO^uzM;%%op_41YsrnQte+K>KTm6tgTQY|l5D`@syWayqd2rE<C8@M(Y
z@_059A(}lenAFFBgsFgPWxN=2-#4y1AhAbQ>dfET80~2yWbvnc7B^h$qJ-`?_!h5V
zH>Db|;&kjx8o^DucSoW^d_^fg$OWuc(qjH)YwHiuoc@#oc<wY-Rl&9E<Lt-c6h~l!
zCHBmbS$bOkGbq;Te>rOC-j%lL#!n<Lp|#y4j*t+SG8EB2zoKGn`@>&)bcQT~ZiMeV
zt~voB&N`$7<AX7RSU{m_@!~V=ZRvx4Vi~5t9b&<BPB|(SrTb$w?POPX5K4hUO8S^e
z5IuRNtI62eJTZ1}q9zY^#(06X5HZ3_rOu8Jkdm!4A8&itsG3n7;ozqaQnYy_95#5x
zjqblC=Am{WvmgKCd3X)}gsaAwGPoKIm+{oNCKSlqum_&h+kI*zc%=$&MJ@Cdgta1G
zg&AwTLm-L%5`MBZZSuaKpooXsW91O6vw61@gi-op0M+JD7YHyAYPXCT!rMeOk;&;(
z7f^qcOwu%SQ`y;$r{Ih#)QiIJid|d!;m&Io07&yI3E93*1J$dfsSd8;iYVAy<Mvgs
z<s#!44F3-Z{Nd4{s>P3r`^JIrv1b<DMr(T5d&HMnhzWQR+KIFy1oC1;yD+z7*PYl#
zbjhwah`(oi^-q)gPj~3g8?{UVpOzzrA!CE}s?sFe2A=1aNcN#wHWg-R4<C#7Sultl
zRUqY<B^^i0CH#aQa>BE>1u?Sw{>aLKy8LyJoR<S;Er&}(Q!lI$U66^NXQ^73U~LdJ
z%=>=%1d9m=IED1Fhk%a5zS)|tc`EIP(ZW9;R1@HQ@=B?1U+|XBjg`MeNQL3j{8c~L
zE8rRQlTrT<#KRUN=s742S<g8zFUk@32Z0+L4eQU0q~p3i@nO}l8<y!X6=oDkA=i|~
zvTLHeeJ+4<U_~SyZVl3G{OdrXGxPAk%N#BK9kH^Zv?_Cb6Jc$}=qc*`@JJ$32sAfJ
zd1%-TN(C20e?Pkfi86z&=U<*NIHMJTVCQ7Xeigh3JNTRqo>s3p*B|KWPZV8jx<q8#
z?a#z`88wDGA!2D?n$W~&r98|4zVjSd5IlP5kR6sw^ul~J#;h$AiCh?2#HCk{d7g1z
zd5yT-AR}pfCnIfXVR=k}JboZ|`E{UERwuqxz=Ik1y-bT9A}B77?YCet2fS@AIYmA1
zoD@Bl?J-O?2@UQEZ)WHmL}NwtsX^}OWP6N(wY-TDr;#k_cUP%1IdnICnrf}ynu7P8
z6B7c&R^S}z)MwCE|LMdyV+K>-eOcYs%MRRwG{2^?@xzvhoE4UvS(2gX%)?6O#76F&
ztS%|V@Opa*D@zFl<b)I7J+_7M+gy$kpGW8qLG=xXqi1qm={%)*^N^$#&RVFac$?4I
zw*^!YbE20QwuMqkG(-j>51UoZ@9S+9t<0eD8zFFNbY$|>$f&=iy8r?kq}fwVO=SOe
zSH-+!1RIR#Muw4_NwyL{3>>LbX#G{o_o95whV%olzlwYb>zA<&S}G^?s0E~4Yg5{y
zfy3|q+EGbzj_?iRDKVd|N_(edj`WN!7P{^ra)`Y_4e3pj>aFylG5}#?0I`al#TYeB
z9VdHUC}QOW98G*;36xnzwk}xG#!|t}i}%;XPU{H=;SqKCvhf<yhG(<#bc%QCm`4gW
z^qI|8DMBchRC+JLUW0~Bl{|XkXWwxh+v=}wtO?B!w4cX09b}x|*=A0F)VWuV3|g%!
zpx%vza2m(jHaLOu{*eTF*1#jUvow@yr1(X5@V*>J)jW9kZVFMOSie_v<v8PM)Lx{Q
zB!?VHQ3;?8@iz|LuA$b2BE-5Cg$XBl%<Gb<v{unkW!owipS3ubsRq0e^lEFCbg%66
zQzBqv12IFoV|Q4%@!SK;GJGSp>1oLppHJMzk8b3R`NxT}W9ipN(|^eI@{wlp0;xnL
z0=3Y(spvJBDqr^5r*@F?ihu=uN*?&tntY+iwOT7?b<@(`qga5q9*H3j-36-d8jB$U
zg2G_l`YCZ7Tvbk3ee9v!`d85$ye-`?>oFlfn3WJr<pUUJ<xYi^P^}gK$xCmz7BZBd
ztJV@$L=-PIR(VA(1K!s&rl3uHS&}Il^$mpv5#?a_?<IbX?_u-)Ql)NIL!!lqn%Z;J
ze^g}eP7rX??{h945D659)%<^^_9ng2b9_))kAgV257j6(`5j<|)th#p12f>p;~@rB
z1gu5cRpZ-&{ekUvBuz80wVwE3#Sb3W#c0OLByQ2yIq8Y-9uiRx;^V;n&}5{PR$vkw
zqCg7@lkP}eGNnY_nvdsV>`HOf`sRv*3AE+*&k3N-GDC7fP<hi=tZA`rn>GLQ6gWZH
zIn>gUE$G#pACw&6Hc%V;1vMT(OWU6{9roMOYba4=<4ENN{b05v{Xmg4S~$*lvoZms
zmw<7E>n6T2btvJi{^j+<18f$Gt5lui^rFw7Z)w5xVk7Z8>Ppb>hMX%UITW$g{ZPuw
z)VpZXF0q$o2JT=j0!PVQi_JgV5yxf245*Uk-cbV>*0y+)O-ZF&?1G`}hJQ%!@pIye
z$q$tO^O9Zu4%V^S@vv$<Il9YAVm~dWBZ}^5U2yhg^p*$+^0=q4IMX>rGcgvdi*-8G
z`W)xA)nJs&L`v#YvzEsYKDOt1LEwLO3#DY>m?ESo8tdle!rxl6*hO(SIv9Mujxw<E
z;{3rVLTmd!&(FZp^3*edHZ4%Z(o$VzX{~gaXc?B+`WZOkSqf%8(Yr<ad*iB(QjuTb
zLp9EL`3dzdOIudTAgk$vc(_R>QXu9i9;BqU>+OlVC2TDw#Y%e7qCrxM?a+}_c?KYM
zxm|QD@MQ=S@i=n4Z%|w3PGY<TCSsdoR)PWgX*m8wK&nRH&4ZaWN+7dy9`&7i>TEXB
z5vy~g4|N^BCuZ*;&5m`r0O`2qc<;F{AAcH=w$09u?toJ=HAEv1?&H8<fJsq}j_avb
zHye3Zd(02vQQcZBDbD2aoLjN3Xn_?{$(-1)MTr4<{!<MoKilUFBDA8P@hpU3`U<W1
zg$w>B<>|~10{GV0V6H%;i@$&QF`$H@&N9WQQju~H;D)xoDU+0&-J-uz-B*|r;G&ZV
zBO_X1Q~QQtFsm?HTw3*<&c>|@;AF;L3AN5~VkCs?;|uslM-b!`G^`O1)r5($n}gX4
zW~S->S1#`be@Y|yd`QwqC~{1|bI;ZkHZOHsK;gd$o1|+;?EEw;dF*-8n)=J?T|f5(
z-Lj45$CT(;6;PG`P2TxUt;0?0MiXmcNr9C8f$y$qz>5F?4Ca)jSTK~me1J=}IcZD5
zoNBG*|1by$#e0dS@`cLZap0niz2U9k%usL-h96$!Toy00w2k3=>h3BApGaak&%!!;
znAM`Y8iW?+Hm?5=49DTHeWycPd7$J@s^b$uZXD7J$}kh>^0>!CMT1k2$cE{@zouB`
z3XFI_EYr}PqV^<wwhZ@EQEDf;6%KCp_Gy_&fE!{(E`V;#B~pz`054>gj7}`w2RznS
zTvGi(;9RU%xw}=pHcf)*2%w+;;c+rk+7uNmfaFRiYqJ>(XrOH0?bqG8gDF{UNIs;r
zT{FA2zR@M};tO_Yv3tSCqD^!<6%aKkGHC!Z1)ZF6ePalOCItZ7Q&4&?WD{165^Grx
znoufABUw=ac)e#=Z<$p8t|D^0pQ7o<E&1U<t_5*6l8w*-K_?^CDecnbriqH=THX&v
zxooW%|LflIlaXbGZqkI#bsBwXX3lWh{Pdnrk`g@^-O^fw^)P_98b#1N0=DnER2-8P
z$71PPPO6KO)5K;-7Lvf+##$P&rR(zO3;o<u9&a2+Gb-u;6gTzYIQ`J6u{R0d*l`>k
zxxl8oKQMP&y|5>~Ux8)JyqCokd=xkrxh_bsZG1CCBXs!M{b8OziKZ3gZ*^}KIrVRT
zH8M@M1oZ&4KTI<$O`H%GritJtyZdI(?f$ER_jrZGq?)w=PtFXxfiJygH6454r59;q
z3X%f{6^mV9$hW>nYg|gS$uPo(M^RKqO?V94y0z`i3)A%f;UMBp4ZgY=c4dT?!}~V4
zU1QS|hO%k*+U?Z?V8HMMffnR=FdX_Agiw%x1(&BVsZ_L40Z-sl4=EZ=6MV<c&ZELN
z_i<onzx3<{ONgvgbxg6q1g8vRSRxJfow+wm??5l8ej?9<%JxVMMt5oV7p;dgvegye
z+r2ve)RSFnbO{FkVni*+{ONC0{60M=KA|F!>mjE(?GzIA4%)xaK{j)SG1N@(&UoD1
zqspVpYf%Izi-jfa3%>ZSv3XG}J(C%78D{c8dDPK;u6IoTK3T?~9HR+OltxK0oB+{c
z4rrGl;(d$53xp<w{95_M-`8%WPWzpx%!2|r5h<c{b0!bmRh{#=Zm+9>%J2!~Y}d!-
zc|^&YY<8lqk+G-=0>)!**|~p;W7EKM4A;o%(zS`g#4;nNe1^Xa%8ab{qnKto;ecWs
z7Ty_ok*|20WCmweXRF#T2>}sdjDmnHNZSp4Y=(I?Zr~j!UMneJ40&16_yY7ZSyu(*
zZ^`y}cbdP5Zg2at_wBn8axZ}2MVxlcX?GSFFYflWFf!*7ds*x}ySQH3tV+BiwpzD_
zyXSM+9io|^#D2D{qboZ0=+rVfWF1wE96B!DzpFDg#qBnBa%J!R?sGu5*Q8h^Z(~!W
z`8aGV*4Y(8&T?>Igqc!e*RkWN-2PcEk`Mx#+SAUNQ5MV?`}e$p%k&biU|9E1Uq7Op
zX(emENp(&YJ4k*AW=4(aAj+BCHW2JuZ47|%5|jW6>pcZS0~0{#|LB9vm@cfQs{+L|
zeTiNGgqE)aLbvp=64#&|aYZoHVXZSVX>6$^0`Ht*`C8`Chy+xkllw8gjaG32{-|c(
z5EvG_ZTvJF<LT+KvoTRTqsxgTgIfX<>ItX=$OGn;Yj;Gh+%M<55kfX@wrMtn<2qQH
zKeJo^LcuHFVom8XHAZC4(dvQQN!e@z3F!I?PqP^8hyd-s)NOE-7}8p$2Tj)QikBKE
z4+P#&AUX^eGjT3HMs7re7WIo~XZC#JN1SCY5`1|sBlo}}q_aw2aD#Eprcz3z^?F&@
z%z$sCi!yzXB38)97rWkOe!`m5T`-4{VdLhCMakWC_7kk=6!vtj|AbU)VI#Iri`o8Q
zmh0iXQB#|q!-$Dc(jGwbCFFkOdtTRC?lNsgv!%|Mp6Ic?`ra0pQLr`4_fcuB`(WLw
z91o-3S$az9Ynj4Q$%+D8_a%;dVs*WuwujJ7iv%=B2r*-!rIrd>*-^^##dU{9v@%Pp
zJwAq|g6SX{6|K{H<jqShZ){3)U+JmtA~gZ?`_2YwCx_6B_Vo0^;5rP8@!$o)qJvrY
zclLngfABthT~73axlVI^6!+5<hIsws+=#C+{Jv67i#jLw1iRpJ=ia?x9~-i1lko1p
zD6&+F3a<r0bDH6N%hIXIMEbXBB&c~#XCqn#yau^{>)}O7zI{IhYFPMydS%rtPIYzh
zTs0x9UQHj`6>KMBK@h2M?}dscJA($U5HYUCC3SpW5h%z{J7<}%9*ZGc7@8iVj3Lsf
zUA8DBBOB7ikx9791%zEa0Sf19RK;FwqL8W{g9Qt}NSXAze<wm!sPua#0dXdW`iQ!F
zWrof6ah`w7gfvrD_2joPeo8MiY`MJZ2ZR}T(lN(xIw1|VE5qFY!kUYAvv{C-r#<2-
z!e4vfX?)9%WI)>l_RZrn*ZYLu2U}MT-zAaj71V$oY5%;!AaS*P?U?Kak&>@nAAC&K
zH}jy`WQWU(Z-zEi=g-NB_&tsc_D1!Rk4{0|;R|-cXPPprk<$*b<>LZ(tz$r@4JH1c
zQBk>Bc#T&;ycQ(HrJXjc^%R~Aie(=IXNXY%M?kp0+Ynw(EaS2IGp=9Jt?I(4)Zlir
zmTg_#fyZrMGQF}Bt)ZaOD%H(D0lpR^TUbfwUuv}N*8oJr?_MNv37K}`*q8PR)$G2Q
zU7HoWK&H+P?)lq8SCvfzW)`cYd!E{D=>-8=pJcO6>qEq_xzkf6rq&Fbjhv7oI`z|g
ztF4R!;3p4dk2TYRgVo6|q9(T+=ZfxNj&_oc{TdHQH3c6bm%MwrA)}|wbnOE$0%+d0
z{Qr0geCgm<c!a&01FLCF^gPw5tqSEQvYXaU&Lr5(iH(H2G26|}!PG4_&^&i+Jd^nu
zpCT+AxGEXU#!*ZK>`1<vsy$Ujtb*ZmfByaHYvsP;hShk1czw^&Y9T*9rEf@2-=^P3
z+dB5PCS<&=D@v*=Ein+g1SoPQkEQPXjJG3PY~g9Vv~KmD;lAtauTmBF<5j0u+=*&g
z-WcKTS{aVziA=E*u7EtB{-lzea2pAGWj`pUxDRC^rTYzO91c=A;DxF|*;tJTJ!)EJ
z2nFgSbndOReveRogT-0{ch~dcy#?hLZ)^;Tn!e;#Z6V6u%={K&0n1cr@V`;ol=2}p
zPFMXJlJT@FTCEVlNll_WsGHGhJ0A4+5rvj<tLJ%qyPaoIU3n>^6HJ?!V>l=~qm$1E
zVx=?${q!alD{T?WsK-P4O`DxTG^CMtm`O}4lj6`Aw>-7@+Gc0TABEJ4*okArKBPkE
z{ulLn|0tA&cS)3_dXOPhG%y)}P`(Zj`wP)0>i(~@6~3tc_<aZA0$Mhx_>_WSX!@CH
zBC%lCr@wURe7)eEyF5VO1=;yCYh&Y8!4_DshI5sqLv$f8yi0snat;Qu9(lykK8&$t
z;9co1V37~hLm=d4f^$oCe_t%NPLo>W%zKzbj=fO$(C)EphZT&8xAYDj&OawQ=t^_d
zr$<4EYDI%J`JOoQOhcqXzIt2i!h0_g;><;xLpIqQ@<(aZ#X?|L*Eu2%$)$%LgdBSB
z##k;-ZmF-{qRPQcmd!z>H;%`&353dtI#JtT3QaT4pkw<emkL&}ji}6BWAZfY5I5%v
zQ5U(qDa2dyUury;m`Ww9=a6%mKRI3{lx}TVN=t}AYAU^xjj*96A%LV5@4xXkw#1ED
zfv(hr`J6m+URw60VNts4(6GlNaoJ_P*S%r!3FDwsCO*)U1+f3#oj<h19H^Nky1ohX
zp!!CchlMZu`ca4XeP^FBeZW=yntNE#eBs6#71`Wb%8J3lk0k#<(}hI!m|Q-2M9iKG
zPQ_Pd3{c%Td*`spuroz_R<>X)0G<Ht=>pk;+NE4{+gZatr?1{zENV!VU*pf{sI{1f
zV=O<ZC%_#jU2s2V2;gX0z(mp;Oq~X09>nq3M#0R(=$j;McNzns7Y{g>0X5OrIrmXa
z5l49dF$fIYn%u8%5&OZN&%O{^EwjgtzN4zwy5@)kaC6CzW2O>}<p((){JRd0>F0ht
zAjgyW%_bYyjWNO&!TSdy9;gKRsb=8+B4N|W(<2c5B_6Vk+G7a;05QS}hP0<tsBrp?
zvOM8;<xfa^3SIhzL=mq?8_FE9j$8^i<4bPs?@Uk4(6nCdu$9bF9+X<bFPI+(Iv}cP
zJ7x$qR7uDzptJj4Go%D{n&9fiEcp@4x3Oyko9DoVbfBJ}Y6Eiq#UO-Zw*~@&g^eto
zu_OZ89lh=0OHS4LqD8AcASD--L0pbY!z(&}ID+YqNtvEhSh@zEdD;XtmRkh?006C-
zNtukfV*Sp#Ksq@v67bnk%vq9A4EF$@L-SBk)mT%yP_{fQLJp`UxoQpk!%azG5rRLB
z2z7yLwv7f*H7qG{wRl^~6~3+g$nWU1WpokVr5IGydgvXcEI~&HoN}9weUkUh3Nm`+
zeSL(#2(anEJ`Rlj+je}Ht;>kjG0>r0gjr{w8Er_Gt0H(;uWlNokE(w?S9~tL_lbD#
z-au+IA#4$kvCvi*NTJiQgkW2dj~5zIZ%`mf-wsGOavxkI)Q1n67FZ+vgTYUko@*p)
zn-fL>g9OuzD#U`x+_S@Fi|Fjb=SKVcHjRie6ZY&~nXL%F3jlvtA9eLOLIlAK2_6Fg
z=X`%i6ZV1(P&|c9M%y101Wvl9f1@Y6vv$9vf<M*nR^2T37r=5)5*$ej*Bg?oArL}T
zeb}T7R?#flNuMpL!Mqxan#sU?yUnPCI9kf~E$_C^a#*1~yoKUoHzA1Pd^8ZK!KKg(
zzc=RC`wK)+eJB$JJjq^K`SAFQ)mj`+o)X}r8g$uh2eA+_J;OKBRLT`E_hNXxiA-yk
z9G&`lT|^_&`-;7(VlFKJnuG~-k)o5P93>SC+kDh~4+J0E&dHG>R&O1vS`5q>rCc_&
zistrL$V`v6E>+9W+bn3QTJFQ+d>c-T30lnOPWTv+JpahKd7+H}dF7tg0Hx-V%h<#e
zGT%`XE`#cu{oAX!9R8MZ0fuWkiF37!2wrTGrtijnVP7~nPT+EokmOuEj6gLke=ePT
zK*r>SieLj_gvr88<ND*hzW~)C&!?I$z=aOO;@Tt(u**XyrB}7jguTT57a~+{77M97
z!yZpc4>`c|cw!c6b9Psujo<B4Fq)h!I26=jFT`MvFwr1ffZvu5$7}5?u%n+%@&Ao@
zu3QA!7tjk!86c_sY*4Xr=ww!Lhzk*i8dv9y3l!ig-s$qWd+T#yHQqG)DzO^_@&OVs
zhge?Z^q3oiGs+JVE0s!9GJa>lK2l#OV+P5Pe>V?CR*ChmbM(DDU1XMnP=jRAV|74f
ze2r{oePU^OhZHyg>Q>*OVMeAHV{ey*pze?#dKy9psdzHZpwh!kZ25f(viWeb<Uj=!
zzUyEqUYplgUGKup0Uv44lG3EzCNC0w>zz_<JA}EfZ95-;BoLaX8nOrgZrKS4(m20V
z;|Sp)-7b0B54cuE{$&$YSiqw566S3NB|+&sdsY~A2VBGS_suCk=x>->k~M=Tf(eSt
zrsMX=k0n`Z!^}XKE#>SA4gI=#G3FWo9L7ks;@kSVz9hNq(@m?X2!FyCEl{R@ZOC_f
zp4J3OE5B@B`wEoecl5k?Ck#>n;$C;Y^?mw#_BQRF_xi0EVn{xk8KWVf%%C0`p6>B*
zeMd<84M#|QJHzz%k;gRR7A+0R_%Gvq)lvu{!?@@d$7C==h?z^M8~Xw-ea-cn%+uSV
zw-aTHXHD+uP9+oe)@LnEMzyI5AqtJC02(!y1JCi#ZgMY;LN-GyuCkMm%Zed9fyQxe
zc>~;bmcxk3Gs9Jeo$MiwsPc;mH_x@ef&wE@UVTL`H)8)$vLw%vVw{miOG*8@9o;dN
z9Y;i;bLxHemJMoyftx~#t{kp&>CF2a>L9FOoGt@MC!q`D!?j*w!uTey_;|_5mt4+E
zZqkR%^4DI2Q^q>dgxf*g7t9XrUwX;0TAd+pYwj4?S}858lQJ>@3z7>nPXLUy(^M>o
zirTb0iB_MfL`VzP4Ti@adBBU(Tdj8jt)VcCK5wt*<<g=nE2Is%+tfHgL95R=N+((Q
zktM~3IgYs7w2jU4yKB4ivLTzzvKR8S1XZYrHp3%z<`6J{rn{vr`0jlc8n5Zya%`bY
zwbtG?5P!6@$sc1}9PD*~58g?LS;RV(wD5FQX!mS7?vJd&*<VAbM44CeIB=GRuwRO-
zbJ=NEh9j0N!|<rZt3ssPJir$$k9!Ivz-+IgXN{282rkC8S-XLxTEVi$dyeudJC_b%
z5S~-35qdfnV)Oyt3Izt(4OM=T!B5;=JrIoA*sej@enxd!9=Rn7Yh#6H4M|!2h=1v^
zBR86WCPpQFj#F0HG!Qr@jlXqvjt6b4HnK5?5W9~C3bh$AedtlIR!2FSakjpzinBDr
z^>-B?ErmPo{HB{6fX_Y6<Z$#D`G@E%2t0lrWK%7C5X8qegNiSBoL1oW_MS2B-A64Z
z6c;mxJRvKz{NK&+-kL46sLc-|)4v9e-Mr4luv{05*9WNS1X3QB??8}kO2f-~;tZUk
zsgp=z@)U6hTY>uZM#*-7Y!IY;&DecOWJo)V!yTiHE*5a#NzAt4rk}PaX>nELWO~mQ
z0q&nd1tAv_y5(-wk~m?Nz+>+z$D#nnvAS)k=&uldziDrr{=+bdM*0wG3_S}+RDx#?
zoJvRSCK06fD6B_8D*8iN6~E4wXFk)q01U1lm^D9a85zIj(FwMK_y#3}kHOWf*f+ig
zzVUYQ`zx35mI&eK5jSFpUZdxU8P`)$PCsA9rdRL$s1~YBjU{$^DM^_h*<{C;uwzm*
zKEMYfS{UUat8q#^_KkaXKKti!;FXo-UikYLpknbKpip>9LBis40J>Gel?@0-R&U#i
z@b$?S&`U?8+U{bVh0N@dBooSfX<5@}GNWz061iP!o^V=M;9(TA8~*dsl7K#@Oexfw
zx<SXfk%wO0E_)Yl;Iup%RhCM|6}VpF66tp2d6z3IOjnF!$sA#nF)e}t24%Z@n1(a-
ze5d>{l4#_H>~Y0$7Bwq+g!8HzS7Jp}h-=Dl8JkBV-5nebl(tYVqYh@%d5GWkUaT+P
z(Ki8j!&@%n`Mu;Nv1YvjESVruG`m%I{sMn&pxiIh<EMtW`i_i&RKMxxq{(u2?x^kW
z@Q?&yvD?maOPf_e!v)~51;23|g9&d9o+A7-AfX9a7XytMXrX7`db)^a?a)ypH{q!X
zuh<}1=YIB+qQipAC_4+T5=$Xt=*r+^NgcEXPOz624O5F_5lJXQqT%Y|Nd~&PsbF{Z
z?P-~@H6{L><X}I8NPYV;nOHh}1B8bw%`vJ@xETEW90_|^6q_(^%KJVjVx)&THs9Ep
zHW+~J>Gk)3cElWSr>7{ZHkGE<T{E$<@dprDSFEm{9+_wN;Cl6_=}zEh=*UlVeB**T
zEFmjX*jN4Kc=e`>+x8`HsuNHKSz&FBropS0QURD}#T%J{?KqSDs1U72&j4(Mv1Sth
z08Q6c7MFkV6!l(hNP&iD`1JU26*Q7#LPx*YXE2d>%Ko?jn(~f(L&0Q*m`xT{&#oLd
zp*7ixDu{`p1@AL`pcZ8|+Q2O?s0{hBw~K_i=44b&x3dgq(4tskkj&WRg9ym2**G6@
z0V*|JpWFk7LBmPb@fMR!R=PLHQ%#4LZXG7d`N5b1Im-}R?zZ6e9Jo$}DqE|zS`LIy
z8wjqxd?%K8$kGd_6+LfsU%|t!OX#&w3UMBirLMI8;xZ4LmzpD?8sYk}l3tNdDrbY1
zj3;Fv2^sCZS%*5C3HkSh7NtO0Zk;6wV8X_q45cNli<u>ts}T>_IUJx$ax{0s;pZtf
zpg(BW#Kl@GBL?d8O-$9%6BcXg;aNlZ+eCQ-YUfKpW2kE{s_@3Rj+gpanCmHV{cDBI
zRRvAwH=d5XK;?8uQyV7*3yr4Y{$g?nUsKl&e&?F>5A<-bx_z&+!{x>Y4RE6UFaY|L
zSijSbMaDm#=idSgq_R#ao`gjsUkANJXbzKC7Y(j{MbXUfk&EyC>G8xZD6lPe_Zx~q
z4?0af*mhByxtTYa`O8&G5CtR1IqDLYVYV^nE;4;&@>mD%aaMITB)}1_C8fgvXo87Z
z68<7?k`|W_V>kfLVaX_?)4z)@{rX^op39x|Myu&JnQ0oFl@UblXoXKG4O@uO_0|+a
zpJ`Fj+KZqBcv3J|ifEa=MXWGq(h2E*Px<qpc}$9;#;IX>a}YewPM?q0UA)+m_<A<R
zZvd0+`)U5{nH%jmv?Idj4iwX^yO1t>7f&MoOAx*jA)5r87<F~0E_vyXnB%>f=hMad
zam;(S#($;m2mk<w&MkcIMO2^w0J7YRVL$wKAfzB|Ox$LF`iviR8Sa?dnZ_Y2QMrZt
zyE5_vPldarX@bmw4RcoA#u(IM5!%YKztq~{OhJdHyzl2#==FW!2;qf8oP89<`)SG3
z^^NanIsz-9`Gog8^xdKbrQ-8=BK)Yo^%OYqi7td-iNSOh3wdk=$Pv7eD?bVeDDUm_
z+6T<($RzT_Ucf+kP|OOGYo={MDy$t^i#S3OZdk{qAdMR%2pc87*Geo#y{C^0As@<(
zXuPm#_i`LsjJ_n5@;!LRfhQgh;^XrWJmrH#B3r84A%S5oI5D;`j%z@by<!+|4hKY%
z<U0F^GpPtn07H?*wp+4H-j`f}&gSjh^LvjEyYf2*ZCXBU&YE~HeL`v_wFQG>qH|&X
ztMP<XvfDWWDTyG2hxt~Wn1po;;q8#EdI_~aL{{&tXa-QQkLOr-2G^5ukg_&*rR-aa
zP^tK0ZC&^kF_A{P&z_))q9cp|5S@Xh55t*k3b$GgiT6bPJM)iIC=tyHOOo(DHTBe8
zLcaQmJ;bO5BDA^@03Ip0Rct=!&fu;!1do2t_6C^2t1<HWmL6;gHn5POKco9Z`$i&z
z#&*xuqX9csQ0D1}(3(3=j=OQTn3lUr-HN52Cv}8*?q|gys=QH)7BpD|NgX*wP>%(;
z#PcxkK{eAr!D3}Kt2ap*l((w-h@18;Go%LIDqj{3r-8;zO$Mv-JWI+#ZgcoGYc~on
zCuhQYb9gEJakJkSj{irl<?+al^-bo;QL*B#EL~x*^XV7_iSf*-EER1Qs3B~>J1MIG
z#FV~E5P!cmV(X%Nt47sG=r0UKE_>(2P=rJt2PeT^m=Qx=4cPFR21n|;A|Lc7K+%M8
z0wz-?Dr=ZgfbUc&(H6>I!o~uESF3kM!3khMf!(RqS3P~INghOfRTuy~JOB*}vNiI8
z7tg~R_i5YJ<v4+Lo@y$={S33xP+F|x1vna1u{(ymfiYUI2p~AdXZ4s{ARm<?UWWvJ
z>nT@Zjv<qZ+btQyjA@X*Ikd7X+E+>Rk(H5UiTlIdj9rB45C^sIKpq30SERWYL<9un
z+r&s40;ZAe7v~W27a@&il=av{dy7~0l@qpx_bAHsIWFrTU>ICjq(IA{e@F-KIS`=!
z^#HQ{U4^}vr}HU<Efo4cV5Di>(B?%D4C@-Jo&$W*&Oi(VOUv?x{Z8^Cpdi0m;^_?^
z8N8aDJmrBdWy6P9uJ@zs*0E1-dOs$MOur)=sr|KAmDyyt4R4Ps8&C=a>jD-o3*&zI
zY<TKO@o)Kz?EQV3N@jY5d6U2GK_cVOpi^hxx31K>aITm&1y0ocO-i~;gKM3K);kp(
z>tg%(%v=22i+tvzS>CCSF)cYx`uFh#lh6a;)Y&Hpbwg>*ZpWYv51cecE>jO{mFxdg
z2m&Xm>q4x$#{ew~nBVJDM3kBNlNnLzuO63z-tf}FD6?l-&>X=rzFN~v;sCV0c?tm)
z0DYm1DTE3?5)z&VFai%HQ^Z;i=tiJ@^KIaa8-7+Rw0TcSjs7W5id%*YW9^y3=V*96
zT?g`%lKB0Rp>!-b*EAcV-uZN+YJ@5a9Ao~~4P!d6cq$sHN<f4MP><5n8&h@{mXY#d
z&!eun#}Y!72d)m)&a~&l>sdF+wvfxyz93drbS6opwzCF0S%o=3XC-Nq?wN;HF7w4w
zS{%|?&;PM@Gp27N*v?nnJB+@0?&+~ANOCgU_jluiO(2tFdm=))r<=%{3f@^o3<Dt?
zX;fa`2&lQnNgy5HaRt6qP#-2L#f1(hPLeu0v>Kv{VDH7rCy&DH)a^QEm)tC9uZ9UW
z^ZwGaPfMOWmM$z}h(z*!EWHAPY^<h8qhB=Qa@~h}7A!fAH|JX`P`4hT316_m!akUm
zxfPKSSSHv2+q4`i|EVXY9pNdHg9gCIy{u%@RDtTJRjLB#Er(Mp@9aScd5CvepV_6~
zTL?`b7{kDcVumn^cdW82nvd&T_|<TNU^7z-IIIFrez2ZGqzQW+JB`ym$Gi%Pl%|Lr
zotS{H%;36H`|xG%X!p^+SH3zQoyzT}DwL%vlXD9rqxPUnrgk#+du>yLjRKX_`Xxw+
zU^(}$@L(5u+_U7hO-&Q>1u2&4BSZO8g&Ho+=CfgBR9u2)yoaNYmhStd{>VdszkA9V
z1^}elEY0ox;_T`=K6ksUh)_X-sMOLoCZOHd-0A-y)Xdkzbyp$3G^|iBtHEH-Dy#>d
z`(8W;U3XWNM-jL*W<CV`{!F)XC*$M;LL?EHVA@bEz#IiE7>AboDfGyJUw69^zN@1B
z$9tW#F^?Bn7qZ5YQ|UAMc%yeYQf^{C$s}rSvgXH!J1}ERRu(AkkR3(DF>JXaMBUWx
zRY%03d+BzXaH;TF@28?Pxqu?gHzPiQgk=INM30v@ZU(K?xK4WwuyL=rC=uY`M{BF(
zA<!UpaexD(o#v2TkUXfNIw3xj3*hp{&jiFo$nM6sR9Zf-sMyFUwTH4o&T-qtE%#Q9
z?lJ4=Gy=%T>hL8u88-&Vy)`G>Aus-+QIG~?GGHdi(C@Wx^EcN>I|1SH{%;>g#_p}+
z^CjIiCa9UZQS#j_pN;wu*H%0PX=`y1j=HMAXvLP~7RTJof$BJJ5i<~x${)u&V`7ok
z#AEXZKULk(OC&(M6*@02QS~&_GXi^9YdZfpv3KCxNW(5yT2A;y;9)CS78W7o9Jj-#
zAw-O`Ohkh;Y2cb9%<J*)=mbw_hE|(>2jDN`a?W@J<|19R0RSgSHr$0z2kwfS;a~Wj
zLaeab{ht7wYq(x*Ec11^kd#FrcZZ*HVo5P~OaWn5njv4{PNt$n*fk<L^s^RYV*fEz
z7~Q$j%y0H0A#Y(jXUJf10O(_Tvj8uOSa|QMouN|`IO2-%mEf1oX+YMIuF0olaJi55
zNRQF5(1pxmpS50=bFP<!N_|LR)X$JPz@!o@#0T!H<fF3wpGu;iQ$^`udf1EdefkD%
zPBQQ(YUfu^%v@$DW|R2>ka#z}mA-%-EmP+Y{X-Upym!9m$UTfH|Kb4Kghwuh!F&8B
zC8arh=W0);=O|;wpL)aT%M>%+tP?K)$Ap@4^ytpEPs7U3#Ub=}M}5dI$WpjCZ$5WP
zRmZ#F`$w489#u0AQkP?N;N!9UibdcKp;S(F&jxCC-ICq2FmX72b=XDiMtf+3q-S}f
zHSu@YlkJQn5iAK#R(X_@1MOp{$hOUIYK&Oys60p8D$W#V{~Gyp@g<t?0xGNr%Gt2_
za37b7*t=izl?*a6<Qhk{O2a&AsV-;EdhzFbCQc?E>`;a5m$3>+p+egEN@;b)OrhA=
z8LO1!cx!isdH6hLSz3WxY3|e0?M)F7v42=6Y#(kj+m@)YS4oaqtG=9NsgI*XsH!4&
zRHYE4w+fg8jsqh^7^hD{YhU`mV8KgMu|$AzA<GnMF-i3Q?RA%1Ri8Y1ODGI<Lktpg
zK+7ps>gL)TwIO8X?u#%Ya~^z~0?mZGnTiB<>fp1o`_QeV@rA=-_bX{&;$(x9tTI68
zH=Z~ku3jiwa~cU*Y%bR_ZsBx#XqGK8jLL)4<CTYF$byLl4<QNH;g@`I3$gOnWCg~i
zaem&^^2)xY@TO}QA@gwS*$nR8Rwd!(s_MqA|1t0KK@695GIT3yy^>Nv)G=_9?WauF
z3Rn^kF#>nLP21VGKR2-VNV?K9f22Gp8<zwBZ<p}Ypp@sX`~jYs7-6_c47nbQF2}gs
ziRge*dary%{*U`L5E5NWD&y2CF;A)d9O-6s*cLvOA5?{!_&zZ51d-evBvkOr_4MJ4
zyd$2fJM9I=xGh^>#KqswXqw4memza`o_!clrz9`n|D@iGrpMGEwYF+8b+%|vlK#J4
zQ&bth20|6Sde}CM74XjVV0UJLPvHzVYub-=g@10tdqYXkM?4!og#4tU<yT@2E%|K!
z2XpotZ|?@WV8u0WjCmkGICprhJgAIlVZ<k<iIyIwYNJ54kP!$F-)kdIZShdO811Bt
zmkya<JvbpeuVqu;O58S*@69VNG7I68b1^3$6GJrjy@DB<XCK=;p1d29E__mhEn^Ch
zC-Y)}vHYVu{Le>OOrSB(IB@^~52KdJXQ&FWVR`70M0MA(v0~0E5<vI`I3kBA<SfgP
z<1nik3!C=Ns%hLMZ=a`aUxwFL<@IkWWZTPEGVj=HS@zQ)(Dg!^ggSjfc^)|H8OKA@
zC8PNL2T+OGNR<DMHwBz3k!JZa!$=D4A{t$Q?01UN@|6jz_ZD`41y}6R&9%=Vv+-7T
z+bFYcQ4o!gm5%Jq;_J<EiYAiK2#w<G;$>j7ryz7cM-P0}2+`y6N$XXzd1^O=X4a&s
zMHoitH;~5xK=N6jhb<sjLniyp_egqV#JpzAkSHm~ANkwfQhe6cE*M)!?iaY|x@L|c
zw94r`P0}=RUyp&m*@Q6)DQaL-*0gf>ae(!ksiQ&Vyw|R-Z@(>)YLxcu!9%>admH#2
zn6$kwBD@>;AEy;olz$U|swBq`p%P_Re)zI}58@Km;P-vFzS%!CM+OEG=CXjzThL0x
zcX>m-4&I1Fx>82b5*YCAK5HukB`ig7U_`YRY-IqF_Os$bQ@WqEOq%K7^caWLWvwh}
zM;{blmwdugr31+F=^Oh$plT8ZxGsK_WdU;*bTDb8(9#|v+#JS!L%(>Q?QyE^ch*Q%
zcVN^<mq#m(8AUU<=bRld1J>#^Jg+Jd)q5~?-=h3Bv_{A&^0c6&!uMGZ@pGun#sj>p
zI_-Mp#3ASMmb@0Cc{n63*wg6(;BD`>vf)!pQf7|mx*tY(=Kv5NxTDbrYrPLT`%m8Z
zH=I!v{eA<=E#6gbfClnfcrj*+F_R>}T(S1T)}$3Lc%ss2s!z(;T`|S}ixJ%HI%+}m
z%<yy>F7nYiGDvu;U|G*d?(~(F-c!RbYq&-np^-uepkFg?J56MDWk=eF;`)KRshY@?
z`D`)^A<7@5$(CN{6TatfK)JfAe+Bq8Lgg7ZeX<iiNkY^6oqqR9CwxkNbc>%+`G*co
zZEgIHf<8tep)c~C{~XYQn5<|#A5}y6dGH=3%lVL8q#vHhGGA&6U!F`FY?F>p;6E$9
z5=374)T$51X%gLZHZ1&DJDLlQY`TO&sP7+{kaA{&>O#n6w-Yo;Uz+$1tRMsxa*qK-
zQ3%n_(_s_&x2V&F>VHjn40TfN2pi^c4J`8d5__?%zLqHyItDN7?2RgHl3Se!+(C?#
zP1ZfhavN!VV!u$DJ}cJ#EejBC%Aa}Y%<Qfs)8`suQh#NTsG+!JhogyE@}7TYBbH2v
zy~U)XOYu=GiNZ9}M_unMn8W5v=GPn2*{)7VZ)*eEb9Z`HBu)BE5gfqbmek{i2cD3g
zWlJxr_O>b(SRWVr&vekhh)6EY`@lBWe_xds70Op2m1TG9xWdYtmh#ZF&_zCB>hV>Q
zE!73O$&H!x5g@7^Nr=_va)_wZ#x=2EsT~{bkxZo7c#g}vr<n4E9)RT}TT~5VT@IMF
z@JBP1oO3tpwwr}nXxN`gB3Y=U$jSIQH*a6#@Pi=pEu2{!1Wg5?y-f74UicrtJ3kov
zmVqcX5*Qk3<=g}A*()fLn;|6ub8qKzv2|Uo$%jS+CqZa+{5)!aHKPg~VH=|TMudgB
z(qJ1XlB>?w0yxY6S-YZgL@1dj6&Y}6bgr5Szf#Dms~%K?rzv17Kr}~STjE7KOX_o(
z)h+*FE(?tNuX_^c&NkXM^jcNb@WZ^VRZl*{=%&Wy%+e*nP^0eoM35&V%wF;J<V&Bh
zR}szO&uNvn9Uc#aVWadRZoTJg<HP7zkl~K%`A;hJrM0ZE33P~e6Ew>>^qQLYGKK(W
z<mcy<py`>$c?miJe(??2!tpT?x)mE+k7{+{I8`xbh^q$16fpDVsk{7~xCEWE2ck9?
zZNlds84fI~cl3{M=)e6O9AJ}~uE7X1K0Fx1-{5=9x4e&>22WAf)`_o*We8B$=?vA0
z-1{}ArDhcCX*>MkSFLdrM(M3H$<Cj8o!nkim=z%>tv?Q;jfm`LYFwNYoe|8eQ388M
zkkkVe?rXi_8l8+mQfcO(D#iU6GL)*3{xpioLPC*Y>-{d^c8Q;(t1_)FYPa)4V*PG7
zuGMf6l@}d3r@8SX8pa~%wIxXgOYLrx!Ml$q^Z$(koo?Ju*nNlw*&<3^tC=cV;iEGo
z5>O<9s;pPCym#D}ZzA52_#_VR$Bkf+{At;Gm|0iG5&hh-b_DxdG%q(P5%Imn`hcw$
z?Vt}^y&E$;ot_x$w0(QD$gs;S)va46q(((rX&>;M*i_z02x<gNQA|-t`LZyX5N3he
z%>eq<+fH&qt3^Wz4gS;bk6Q#w=@2i`QlvkNYGk>v&h6XTwOV?+vaqSrUc=v3^Jl0`
z=ywF<^ngwx>sQ^g;P0|TsXSS>I37XbhXMI%uAzZn`>3Bmw3oSRj8M*>=XhlY7<jQ1
z9^Kji&zzciL(YBEydj(#EnFMKA>*leIuvvE<K-9vVIz04TULWO(K4|%tmA6jB`Xth
z$0#bn&yiJoiA3Sd^tb^XcC|8v|0ygM9IQfVeLlGlhYS%fzlecOo56ac0x(jF(c(JX
zGk!(0c0EmhX_2N!Pz;#!r3`_bt~Cr$cAUjBVXbS`X;NkGYnb`l!))%yJBn25yJ6E_
zV7OP58w83`HW$?FwKb<$2uFx8RG@GiW+Jz;5rdo5r6wN9mY&9WAXY=ihRePWQ0(-@
zbLnYo*EjM}6uhxA?DROW=?iw&H_Hy$Vqi~tWVJ>Alvc?pO-5c&8y@5-;$}wexqW5v
zw6HtslxqOJ*?kDB7$qgRNZk>Ir`P)Yas_0+9Mk978;mZ#SO~3kcqlRuR;MR`-kQ4W
zoIc>4TK~L%POt#c+CuXey0u-e+Ezb|=SNoj4SH&hf6rtCUuT1j$8}C%tUF9Q-u03(
z<ksjLfjDG6$IlL0cf=>Ojf0sW!YOS<fU4X8N!)isYqNaXvd8hW<55TFe$l<oTBAS?
zcrHcsXc2(%jvLmb<E*s;8vsxhj6mY?VEJ^fX5qt;Q5!EG^4a>1g5LL@%|@&)6@IiO
zORCPTo7zCx+X)7UV=0xmNr?^*0BwJ^dF4i*usCAgp!WYJW6K7=nM6ZDw;JYBWpq_t
zr>k&a0&nD&r9rLTBq?8y{%`Ao!67_AkG`x$ow!!ID{dN2x(}?4{8*#<6Hd&#6ZZkP
z>$PL<Uft`eG>k}B$-*U!6qH$OR#<0qaKm5Y`C&i>cB*l~|79;u#Y%WQ01izhyDg%~
zLB6hMCm$~d{sq~p--KO#T4hKYgqN~|)B}%-PUKRZDzc4DulYo2<2bCaB)d_C6Tw&X
zAa-&l5LaJ{oCuu}*;iC|6fx0JrGpR7^f1tu15O<6EqY~X8H;@^n`;mdyv@=aSPzdf
zJLFX29{$|8vHd=r<xMf5(+;2x>sza5cX9R=x`4!)xoW3R@9#oQtd3;aOtl}i4b@xO
z4wPZy%=G=-w3@7j2WB|RyCXXSMmQh(md7+S^=Gt4;aDQVQH@7xlK9L$FJro2$MeZ=
zmWhm8J=`dyOW{~(5$&?CayY|tt(Q;e?!xUJ4W<hR6H+4V3vO-cvWT!KH|`Uh*d*<f
ziA{yFc`x^=nj_yujz&Dg@CtMO0A=AC1l;3lOH&Lzb=SE36VgZ1mVV7n{^isc`HO9i
zub=*Fnx*{<MfO(vU9%P{NhEO#N-0gPzfXn9VeOjl-iwKvrqOlP^X{`b9<xz}ilNTp
zf*@L^^VQb?WrvNSG4yK?NU#|ym)+oTZXgS0t=ByPP}1@XKaP_-H;RyY5XWt{b~m%5
z!i%DoA`gmZ@g`u{Wx*}e$XqtdS-15#m8Q}%&I_S8r$wz_kr6PHi<oRGQwU9SqNp-_
zS2QP)%t7!z#(9*1__MfUaNhdP*#}_VlpqbZ@-Wm$fjfHb*L*U$X=Jw_bB{CS6{ymJ
zUvfn^iaw`1{T7TlH({d3^8r63+f~S){koY4FckH<wY@Sah&&(9>m;bEZ)ABWUx@3#
zYGyl;)0=SzD2&7)eUx=M;9J4>ZHwc+S0QY)A%b%?T*T)w_cLx4qO4=}px!sn*|x8`
zb87OWeYt8=*cwBh|1HcnLjf%AV$Fz7eK60HE;JL!*<%R#Fq@z?el4P|zl0}Jm1Wmd
zsSNB8jGb2}SDotxU3Gk=9Lxu<48kZRhYU3TKTz7y4>3r_;6~l99=2bu><$fE<ufn<
z00b5R|A=!3EtklaJ*sM53GAU`>Mo^pg_%3e(gD3Qip*f!52-Z2FPuz;8HgOuYY*_K
zN82@#gaPV&=KSJ5{c&TLTP^=sIH6=Ec3_|cknnzFAR)Orc*E*8#Mp<gItpfC@gghx
zjuxtDu08TdFNxc21${xf1o$NyiXAt+jwc6!ULsH&)A!aQd6@^vc+sMX#WUd3?UX2t
zihxm7=cSryWZ=}<i68K}mCX!P@#A-x7mMm$p89iLSN&+!3BZL5VJ$eek)eVH!MgJ=
zw~4L>-L*#s?QX|WZb8z=`>Cl>R5qIX3~)tKiTTw%<6s54WRLQsR9KG}XpYlIdw`H;
zL*eH%uKXB;;}E8kiA*%xw+uA>PrKt55a!~kR;Gmyjmb7j0-?*A1y8wOl!p`&uwU}Z
zCK`Augd^289SX0m#3GifofeK4BWwZiRd!c~_R$6l9`h7R)5!O{@)W+p9zSvWE*x#B
ztS5Vw*O4Hu2k1#*ZDO_E*;b=(*oP8k`BCE0)6KwCZ0FQ5S{S#*=}~tz;5IT^TOF$q
zxha`&y6Q7xSDJQZ86Fut^=`<9V;GbdoH(6sZ*{k%nQ!=^-vpP*;?7N;aGt?1!*=?W
z+V6fl+Dfq+ScHwt9P64+^ep-%Fhka|POSMx`JXK4l+F<Zah!-&#@C8=uo$PG(7UvA
zG4yM90b*!EGZbH{eDuLn{@dFDmM1`*R6Dh=(JGRQ0Lu~*0janC_d*$1DnZ3k=>MY<
z23cN8L(a2$ox2J_T&786FFkU>AF{;U`u6L7mmJ%FPer2?8*{}>6^CaH)SW8N?f}cm
zbR6W-pkHl9C`$Js$MRxtkxsh7v|~pM3j@bn01+634u4D4VwrcpGXHKFrBC$OyQOzx
zi&#IkiK`=~kZ$=&dC<0sSs&EGiT;ziB_?zWT?r`-eNaD_H@JNa__Dm4tjOkl)+qZD
zT{DyDMgt)`o)F%2<c&Ugo#I(x{^*`*ACDAosn(z)r#gilI$jIP;ONks?%dbD2*9;}
zb#U3zhI*7}X_$QNZ|4B|14Gg8K6)}=vz1x4*Y+^DQ`B*lrbfQFnLV^r0Zk2O`(*sn
zGqz}NXvhXcT)c0LC*&~62lxsOaJUwk-)3QwuBccsqJL#wyRyUJmfzj_yvW&iO}5&w
zhrbYzerR!E^Yvp0U=ebv27|T|Xgd~0&asxk{S!cgDEalmOqFh|8rKYZmTKC)<Ve(^
zntF4)!>B%StIZiJ0q3@3pG|TAp#0~Z_Y;W0=I;oDjwBpYjt0QG2(RnWy*cAi8&Y)(
zCkB*wvLB*|Wqr}^WR8U@8EJ*JP8~5v;=eNwVniy037}3;)Se=d$8^xF8I)0p0lH!;
z8%=?_%-sf;hZeFLhy5BWmHZo7I*GhJIeKrD)E|pKH#KM?cL6XFhA?z03D9aG<*oG}
zz00*QDQ39ygj@7_`(1O*O$WQRhlwNt!rB^pJ1;-2Gg=0lA~EnaLx9Zaf<QU7vD8+^
z+jGRN1`lzf2aNT{y`=i3Dj;*S29~Ax00lsU{WF}P74WA9c`R+;Gq>a~k4m$Oz1vBd
z1zzw_srZF}IbJY$_AFkgLEGv9hqb;Hyd%Naf5E|N1OshUGu361ofJe$K+#ZVR&Nnl
z-#fUL74orXi!s$^cQ?cM)L&0Cr=LY5K;*uWc_ape?R5O0*AnN2>w`YY&sinGsp@o$
z{Ps22e|REf*uoGU><fIZs`_@$Gbb^OTy5{+(<iR5MxUOxFt4=aw^y<Qfitr=StjD{
zc<+Nw_!5eAq;r9A(NucXb6V|THOep1X@K_}NZ&by+`-%2t0En<!V;%LyT+Q(r6eGj
zh9)rx>yxK3g41X@WmGE$#IT9v`an$6(b2Sr4<D|k>o7%}7RmX_QOlr-O+c@6!|Fc8
zg0tQ+_PPua$Ukl^WJwX3)zm;gNCzIGzPo-hT@3|5hLbY3D9yrC*rc`uC_o5px(jdo
zJm6<;S%#Qy)Ms%j2@1ct4B7`vc3(n7-wR4~>evMI@1l52GqeOvaZwQzD2x~5kuYo3
zmC>C#xXu35cFV{hu2Em0mO(edJ(9s))6wQR8P-p*YV_=q*r2>B8j-O|C)9+5e$79M
zNKQL^{F=h9ZlZ-8`}%veP5V$r?$3z0?PNds-7nbULx#Kuoq)>ToaF8!HUk?eLzI$h
z5oAxw->XPw)amI)!*K3p22R$HCZr&d`shMWa%vQg7fZTt>dY%V`G>Jh%(1&}QeG*F
zGHyJ$D5kiir~PKA$VQ#3$Ferb4zM)o6LYsMg<;cl<?*=hv}Rt6Y=@9eUmoW{QEW+(
zSk?b<6iAFy#aCDwVP22pBnDo$K7L!y17u#SI}{|*NIYSEu!`*>T`t7*f?;GJ^*~ra
zg|VJFMVU)QAWga1v8BaU_=}u<z*iTwIgf=V?ii=PqILr&muQ4OceB42t5Kk})fgZ`
zb@c+1mo|F(SL{n0R91@VbRyAzM29~g7G8_ivSA)R({>3CDJ=p4^tg$6iiU7T0~eV`
zy?0EpSJ0_ccR6eOxXl_0gsBH0(%Rk9lT0ll1KR}Xxz<YM?>j7jwqJ>-LI6@^)**l*
z2Hs5YQHzq8pI@5Vyd&4oqb6B`;DCys?O7IAfuJX=nwcmGhBY#7>2(x)_3+?=XiK^d
zM=Y&`7$j(FM=o&DZ5`BDZnF8Ex{=d6Z>#jU+9nI)^p<5JngG#gd>y$Qt8xZtjD>a$
z)rG)dW7@J^kROFiE<Wwy7X~==I!de0wNy-7J<rRVA7^OmNRubqy3fF&E=KJjTQzmO
zSlNaPLPks!6uer@@Oo#Rp>ErC)Xopkyv5&iPq1jpZ`=QwHhp#&b4>q{F*;5H;d!>x
znTZT5DCf^EcffLi#Xs_0xwnvxciJ@i@+qVFGD0c<IpX25)7Dzo4naJ(1lZhBA0kDO
zi%+RJ-$M&WSFq-7NW_L1^3~M%8>Mo|s=o`N22X~}H1KPg6w($s{QUpf6H!+NO>z;<
zgmjE5LuKfOKS+}Z7x$yCv-AB%z=+)|@X*ib<T8@obt7jM!2JzB`6G)Z*>3xf|3!8!
zq7<~@uUDvpTrh{OOD!rm?_tM1_N^Wx;=t&z<QpL@1fr&byiA^?*S^q;P$^J4Vk^4q
zo311ceS13+9O}K+yuY2<x5>_K%40^NkplgC5^dYW>143=U`R@a5etHqv0vaIIut)M
z#%DbGO!F)T(LD3IqM#k8OV@{bBE7H655+{!LYp=~G%bqWb=j3y^_*u2@k(NI0mx}J
zP>LIZmxyl(D$5T%F8mzdm;5;+G)2vuW_5sNlTyEfmF#!yG7jpJS0kP{n8&V*VKESQ
z>qP)Qe&_>WK)a@;$?Y_ja(#y~q<nwtNjJ~Xi5xuA4Pp~TBhdsa4&>2S%lopM&RhfS
zkWzr1N7S03-}b&>rSU;g$c%Ih;?;m7&A$_TR!Z7}#ZXW}bG$>^hF1}R$cWf8*^C}2
zvbQgROP~T2`;+Q;l_T2^5iouYYD~<*4ZysG-x<|?F?mE7ojwbg+sE#Pf>)Q`C1=n|
zh3#H}-z>_!kds=|o(n1r%*A=K(@xrC8-C}?EB!dFW7E5BlQ>3wm4je%&)K=IP@U`i
zpFyYP-~4v*Qe2T_+W>6Fm02ZQ5t}q^q!L2IL*Rqo0M#l$Bh(Y**u{+t^lwF*oS>JA
zfm+X+R5{z5W95d2L{_a%yAu;9b97Nb19;$Zl~WMn@<zjMO`sd{#Mik6&u`ZFX9K98
zw}zo-<Cw}08>D3MU<pav${X}h<?>9$RLhDkRQCBI43^a`UL>|6*=GvqPLu62A!>jB
zfJ8|h%YT|BoaInCA<mNPE~tHY{qi6hx+S$c!EtN-rp(Z{$tJ59BXu|8i{capA2%c4
z)-wOK^h|G6p)SNT_O>kbo}H1F_Qm3YR(v~uHze&it%LibTS_V|vNBx2koP#b2zmG5
zpYqYnBeo`NW_OD)NAM--A73hDd0r-N&rg*zNL6Gj{Cio!tr=Z*nh)8cETG2Bwz1{O
zPUtylRo8*ASjE>QbQ8=g-3VgrZ~y=S&LoB}5CXxS941o{F3eRTxq>TNw}x*P7l^m|
z&&=4YbF5WE#Q7RF0`n!}1vO2|nI)zBnXE><0u+gX;*k{Sv==fj#JiVv7wa9{Kh>X`
z7540K+5)Y2{)5YEs48TPv>6Duc~jv!ABXs4^W5Nu!=CesG7J318v}Jw<A}ms+;$lo
z;%l3Z2&7)}A^|+!3j$Ktqxxa#X`~ZVo6R17^BePyyzPPYeM3Hxxi^w*fJ~vhI0s;A
zqf?p-$@7|UPay4INU!S8r+X#Si7zr9doXHmL?r<9J-y+>*=ac$rG8QBNo|`b$ok>9
zf1+M+{m<fKVGFcQt;yF>iQtzw&{jzrp|gB>*|%z)7I!<(0`ML*kNIj^uhH=vS@*mV
z?-Bh7r2(?sZpe>mKEe#jxrJz#Es$1Zn%>0eW;|p3V6`|^++i`!YdKTK8bi8L`7N77
znh~t!Yo%nJt{?n@mHNmw);;;}f??ge6NdUby~<;G=@HEXy6^M4l;NDU{^P!1NoFGO
zsU>w_!+vAFIz;Aj7W@DC46{QkX=O%Do{e`|{4^S3Y?pJt4kC3G!#T_^1qv$Y4{AL7
z1TCjZN^A}|&r#tOCzC7b8|K8((oV~RuDd7xaPHkdDw&3U?4d}=hEv%v<<!x_=k;><
zH6o!|MQMh_2VGo}+UOZR;$p!z8tW|jgz~#Eq3Mbc-I2BU(uf#Xo4^IB8?SBG%8o4J
z^h-!?u6yZ`!jhu2<7k_R7yP8FHk@IGfH-nKKZ;@B{eeslt5dOM`|B(sI>a9}-53kQ
z%v-6N=r(2f!?&xvp>X3HN0}<X8<|1&tP1M(5|KZk%_*u+MVvOy_tP+%%s7U77_gfJ
zH{PBnE6W(XdLADab?uu>Jv3-nwbF)6n1L_KwIx8C&#db;v&<QGFmOVJDJ-v~J%b0%
z+gGs$>i0=3{WIz0!W<f`qlq2&+-L5ru8XzWsbfLZ$jNlpD$5EWKt>Nw9UpR5N}xfC
zJP<Hmnt4KbE&gygGy&z?c*1LkGXrl_BwW`K(E`nwB4UKA#BkFkYMAM>R0VcrcnR=|
zinu#^um2lVB_JFbW3R1i=66H<(WXINqvNqzV&0)`I+<_`zro~m%MhdlI88osM@9Ay
z8xsS-m18CQ_t}`JtC|7Gj`1>0pjJtdO~H6x^6A3kz0t42P0SQ;F$q9JYB%d4&YLt)
z&d(bOjzypXkXXL&2xSX&D=HB5mfCSl=kwK=XJP>XwGB*YyMbt7q?po3a`gwTMVZMF
zM1Og0p78C0p4BF+EAbYHHaS*KX0mwJ^gQ9EagPKwLqgfSaUOH~MfT+JbTaX<4`;#^
zaPb$?kbdH^NRL265UUcM7~zcU=tSw-wv=Gj<e8}DE+fb8cI2n8if^I;UUW3A2i+*o
zu6W%O7Q?tg6VGbrv!Zx)qB!}AOUY|*aMM3~)N>cDzk2&LciyyBC<hnrB)*x8J(dTw
zPh8N)cX)awitX!|a2I7;Fw9olRK`zk6J7pEp-I>e-zt`yl90@QFbI@c|0B_eh}I@i
z63*nhe^jYs%zUS5+?{X$i}_*PhDNO#B$QcQftcqY#d0U83z-eRVj{4!fDBKJ=U!t2
z0jez8Do{iiH8e%X(Ri&qvZnnq5yxWaJQSv;sW#08aL4sL-J7LkFDeN|?j3$jx!8?5
zULDqRA-JAmluvX}mwIRyZKbfGtEzyMKrpvm4df-uhd*+0FdPI4=42;4$IFRh)>6m@
zZIBO%-3guVzYwyuR5}^3Pu7W$&#koZBSBlCp@n-cZ3AWfNfW#)rVMI<^LMoYd_Kcz
z49I1AU*@&v$s;11rf&Rr+E-77o7^EXr)Mdvg<!MhvBypjZ}=w9E7OD!Q&G(3vQ&Ms
z$bc;Xt^qRg*CI0o+*%2pr&ehu!{7ih@FX`w|Er)VsYxfKZ6W0w^WjY1fLkO(uOL^o
zbcCeZ&!b%a^$6!__~)wbg;U(#{nt^%Z2i;lhT`2G^M|(TICUO@^ZW>&V(Qtux?z@D
z;xySi8_f=UG@1s|YMV5-KJ@2^>c&UA(l5k?C*T1ut*7EHsmXOD4R52gfCCMTW0*Aj
z2|>~uswGLYF=rp>U1j={1;;88Z&kG}5f%Db#x$ZR!VZzdUP8B%xp=S&A64+66;m2~
zmjCGazEDeRY(`W|KxX}m9kte}WYlWtd^IXds+MXgpn)+PmIh6)&x<W3SogImwpVvY
zJ?+82s4vj+*$!KB9iv!pP3?Y9wlAcdyJD@TlZ;+wQV6C>9Dc1cLZ|{6a(MXHaH7hg
zq<K3f>Uh7GG0pYq*x_n9rCm}81lqRm{Uoc$>5nfpImc{P?)M$MBc7fn7o?aej-Np*
z>my40)qFzAqLosV1Xq_V=s52N!w#IFQy;p9y9~Yo?;zx^xsWj{DX>-Xa`9n~M)+`C
z*V(x0BvS9w9;ej21v?5v9s5X-j$486{SHHkM9GccL7`fH4L%MGs%Rk6P5&%dc9Ze|
zcAInu;2){?jdt;zE7rZw*#N$g4WraV1fy+iF8ylK9ZMtlxrTs+w0$Cxb;cjHCL#}z
zzAn6i9k7ojmA#7RqB2r<h@U|}co7FlUm9I0W2FMh#u$KcTIwdfzBcj4ZpaO_?|{Ph
ziUy=$p#(7x3*~Q>wOcqWUB%YY0U43iFYlhWDL|E@HZnoT8MS|%g9AO@rP2CjZ?-0b
zBoAst-+Ev3mT|#EBEAl^T_(KJngj)`$g^RW(2ic=q!y_HpdUhD68bD@pMG_Uf%M-~
z-%&)RpgOfD$o}A(u8hkb9$HCt)f8ddiWWp?_BH~<Gc9(FW4f{{Nw^QsI&{8HR#IUr
zuIyJn?#QRKZQf?Tm4oAh49V5S5CeYgL^`ONjPQ5?moR`aJ4XIfIHYsP2?3hgDYU1O
zL^R9RXL7Fn86?Zqwj|wE*kNC8(cHlaDgH;ztei;kmQU2pJ%X><>Nsnh;S8`Cw|tZf
zD=!f!y?S5<@LTmJYmd<>s!oT>{W?EsUNLF^4XB7WF?0nolq9m0>|s`0nZd(NuOY;p
z4eVfm*y%8Zns}6Dk}s#K`|hUyj30>$I}7BT{}i><-wd{Zu*D7AILgRrV0&FQ_l4mm
zJ)!gStr>_a{lqeP6o+_P!g|UhcQ(L6f+Nxy6N-H4f_N%)Hgw^9x7IbSu{pGF(%L^H
z8|5sW-m9H*dh5dbt*dEKD>^S#<k)OSCp}K*18mW^Gl+rvZlA;#x$s$gvICnVifo&5
zhf3&WgnX?<@KQ;|Ihog0GzXOJBn0xhmW^0bCVsYps&{Ie#f3N~9HzImRUY`Dus9<)
zh|s_MsXul@6HS5FGO3rbpmI`cQ|goJ?eb|I<cMK<@y7M7d9W-q7I8gLBvAMiFB#t!
zc32X8_`Nz`9Wo6DL$j-(^PX&tNvkAqSE#^PV<1zp$Q=;YgjcWfe2XCPmaihult;{(
z+@HOUHVmJaks<J-NxK%nHGDc1?SfkWHC~Bwt5VRm;8A*eALa&vhjeOol1z=@#p^jN
zQWn4fQ9!Q006vj|l7TP`qg`4mm8t`S6#BhdteF!P!d5^cM>;;%GDg5FyS(bS=PVz8
zQ?nD_Iw4{Z*&$07P=KO}Wvq08#BSj~(b)Bhcdd~0t}BD^RODVwAaS+?<tS5stn4);
z8d1rK^8wR6_skqf;<8N?@uLW;Qk%}fTr)3c0HG!pk;>yK)P%k1E~|J%Z3>!&d#1|$
z<@;3$lNoXCn?kH18_Z||tq5GkkW<_}qu1Pj#HdORcF2YhjOnYbLg=2&aK>tMPXdnd
z9rf#RzjcrOcwbyS;1#r=8D<dLK+<&9>JQoqQkR-U!zvzAF9P=p<V~mi={#G*+5)cX
z5(0l=7Lp{JLA!jb<uj9e2lS9OJmy)1^?^F1Dj#4}Zy1}hwpxoeAzdVcDyGa><CG-d
zyY==&2@GDr=5$i>wbH-9-K0Nm%_exH{~R?xmk|No<eP5CpV4$ih1NXy19L-(wd<N_
zVnJfygc<F?gz05reTVdq>q0%Qm*e9xgM39JW-j_pxX@$j>z$Wdm}$$~(3l@6naUA4
zJLOLMy`xnD-%yW9Wfo-V#(<ZF;q@<iW^n}R^|ax2MRkl<uvE;oiSTQf3_MW&FZ;?e
zB_AvMXnB*xf^U;OI0KkvlUFa}mT3-Ei$gHOfb{$U64Zvv0wnR9Vg>6mKK?pVl=eJx
zg5$`{$n5{mv3&LKqIhQfp6vgfC=7y+9~VlO$`;XHj4%daa!>#O0BX|koWlrmP^|xj
zf}jN^4%fSoyp@1awz<c6@iQK1X{}gBIxBx+guffFa-1P~QMv!fz-TD>Zzl!j)p$`l
z4Ifa%)MahYx(ESJ<eHh--jc4APmO!UqSb!Mrx4LzhwF$C^(aGVQoQCkUelkh%&=85
z(=~9!Q3DmO@9X!efGum(KA(P{AZS@yM}|0fpb!e)ZdHYq+CsPPKORz8AVc_GU02XW
zO+-EmYyoOgy~iVi+M#=Z?V{-zF}lf8>zFA7)tJ}E1PC9f%iZe|tSfU#YG3-Tvs@Tx
z`o{?yMbi884HjhCH9nir;P4Ue5dSAHZoZjU(w1v#H2D>tLJlg{8hobtR1ard_ao`c
ziP|A3s|@Hi&=TAKKRG(hJ*XF<UQh$t3mP_YCRQ9ZledDV9XIObalPgaoo}fVVL(fa
zZN8m=Za*GD7PaPqAZnq$k4xl5{eXT8xt)?A#kxuh^17w9?iHhz>T9<r>p~kb+Hs<(
zOn^E_`X*@%(#rbMl6@kyA+{*3C-kuOpHSO4oHuj$hry9YN##)v*|-TKX8We~7f_RJ
zTO>#7U*};$^4u;$JGX=1^yo+G3$_Ppm_3)K4o-Zso?ukr>GWZWL&_ZO9Ti2RPC}t1
zWhT>&_Pa|m>(>+doBr;R2z$h;N=8F#e<BH+B)n7_&_kz)BkjzrTI$7VKUKe;pTwML
zeDO~z#9afUz5*)>K}WXQdiFq7Zw|51xfPUP_+3x83C=<t+1aT1-MJwTR^F;A?q(bD
z>_b|ozDUBGVAr%m?-aUXh8reXHp8PT%jKWSf~1~MP)r`gfib88m#0Njdy&A&CQj1`
zKx8#=@ZRT(MwCn*Oh^kp8=*6Y^P+T$a|>O<tuV+^)XbYrAffFR9oKdY^?G-Evo~Z%
z)D1y&^KoD6$}T-cFkqPUygfc1{orx`gyAraT@s?^Hr!t8{dgO4p$-5)oU528=ik9`
ziobE3c=XlfUe!e}T*Xzy@iLiAAPcpY&OXdn6D6Bw^z|yPw@`RaGFK_lgLyYVud**D
zE2BF^e;tkHh2nZ03I#<@<W1J8HI-r3Up;}4F3gUxU_!a2{M@dG<N^<nd!g>cmT+p9
zyXz$yfi+meE8h|4Fp-{_Xqh8Yh%d2=MZ-PM)gTA$E;;kJe4#U)RQ+Q`6uE1(g>;CX
zgoI_Hwi@L#S<CJ73stC%3My8?g4jZzxAFvqB2AsY6!!)yA%j)*F1;PH4-<eYFCv>L
z&P)3sTQf>{2n@A7iwY_>jdn1gK1C|_l%5wWW^DqnY_$5TKMoj<7{m_$bMzi0WPudx
zw4{pLSAZaa(r<zz8CHkijIV2UDbWtC=bV`uBZz>$$&Ls0%%ejVw(%b!Tf1(!rQ2A#
zEABYjvpoS>p92#Co07tLg~XmX-{QQ3RbH}(mG((AqIiv!X_pMNQ803Ni+%_$mFFGj
z5g07%0$VDU`Iz6vEfI<#1Avk{x+$O8QGd*7aCfH2V7gjU?1QW~_yOb_JE0{5!VWao
zL~V}dHX48mPfpSKlpR*L#$YGWjzEJW?XngvffdhoK~21kkXk{rp<pn*+rMdG7ekmi
zQx8Uxtc}Xp4Ifa~gkNo`ZU{#Q9R{!#%(0#Qu{1uFcka%ly9Z+R_eJ{*W6AuM>4_~{
zmVs>*_#IfItBR8kGql+Z(A_av0RA3Ob($S_49*Gd+pb!{ZdLiEK&ys7R8&GTfbw7F
zFswtVgDuk9g6r;+6E9sAXvX{K-+nf++B7+E<`vvM-L{;NS`46f!_5f1qSa47&M-xM
zBu)5iKXx8-Zy?4^S}m}X8AcBs+#V6#i?Xj_)88x^Lp+-yP~*Lzp4Onjv52i>aFCoN
zw+dEg9q3x^Fk_u$_pk<#+^Fe&-fI@ee#!LcoBq{0wPe>JZA<=RiAr{A4uH;uee2^>
z<rGCsWRorrDu`6PGP2`*_I?#wTR7@DWPy#4ECf83bNhat>UOI8{;mq{z$hy<!u;`O
zt?Sg)t%_F@0)KX%KJXtK1Ab|-_i>jv(T(wVop<IqePayk)t-*z_iR3!+#iK$8qn^#
zRBPdpb+eN_hy9uM?l2xuF<Bh?;;c!fxfzAao-c5`5E(#bFfkv;B;T9kRb*~15A_2&
zu;c38?`S>=@)Wgg<z&xbGU^hnh=eg8hb<CLEFT=Y8AwubVIX}u<>6XkrMq$bIT}z{
zUnv}Qf<Zw-3e)?r0TM}7gj?uD54?)DpIm-@4U?c=l`@*$QHdE_KMgJa$|*D6IV{`2
zsIJdM#tX-UhN?|$W~lh?i2!BRX=hNe&YOpumn~b_7dx;3B^?vmRFQl8Y$ETyhEdLf
zmToIMDC+&dFqw0lPaL0~u1O-Hc%YJseU$qmMP}yet!JBbc^k=7APA#@iYD5(CnS5K
zlNF}sW>d2PAi2dh7^e_KGX*3!FJs&YHPNuc^p!U0eg_b(OrS-dPGN%o`{S1(2u92p
zA%Dnx<U9iL3S2QmX&XoWrg`qdgYLB@7XdHy$Xx$wz6Xtbsnjb<Nfh5vNf0FGh1Erh
zne&o$iK2zmn2G9;XT!qvS|yV%U)eYn16|R3s$k}Mi4|xHqo=8|1M?(Fy`M28rVC-|
zg04C;U2J)1y{Le(kqNO|IvJifmL^Iqb~ocq$V0UL&ZxlL8Te_IB7uIY4&$mwc<5<l
zZS{~?UfC6STWtbfayB`as-}qYiNXUOAJE<hH*5UjDXEW@<LvZdB;^Ry|B&{b;xaZN
zcpGut83u-r_Z-IIrK~*?aa~8^!?EsS2K;<%B3EOsH|fFMD8^?5JUAY_ISse-H$QKV
z-JnI8@C@;U2BC*UA5JPdu%pq@CDO7i=IY}<DR^&j;gp<HZW%{N^Lt$sLy&Es<WNkW
z!yk`nZ=Pb|(%a+gv%V(N*LAUoWrr$|or|d|2|A;h=`EsROciV|0~o~FbUMmJ{^PI^
z|G>+PDWSmWy31#%Q-*QbKxW%*P!a6?6D(<P8Iy4ER7qMQi~FHh{q*AD)rjX)AYD{%
z8mgy4-`BtHgn`J=v-1_(5x~v|`gy_EGx5q)R<~BqvupaYiC)*HhWBrW4pFT3`@27j
z<)vtK{)Q)n@fVYE5LR#R5vM)E430&PKZzRSnN>nP1T6YkT3sp{j)dR~XPQU-tQR(V
zU3)c!tcS?JmYR{U%Hsf-+;_4336XNyV;bH&qxq_zg1ev8Hj6yUG3-0o36ywXBR$-6
zi@i3H{%ve6t`vF)(*GKGX(lZ3DAs2PRL+&=7S&}|GsLih+4h1;(GlLrmQ`sCPzZL+
zSq(njY_<)rE*5k^uP`x<qulo1?v->DOJs7Ce3G|#!wr)0UO~C%uVIE<M#u|baepJo
zS{wkjtOo}e6WF6a7?K_4Le$+(AFd-YXX*=b^gy5m4Z`YjviuuY!6=k*DbGfHE%6?l
z@Tgf~D-Tx;Hy>E5W@;nPfXqRND|jZ(Z5zB^o3oUgZ$m5EZ5j|92`$1`g{_TMAdWbM
zjSsir+W7HI6;ggvx}zPymj3?M*)M;Pw1^tgh}D<-+xFpX)sPj_g$$h}5tl{f>5=r8
zN8Jr_x<CsZ-C+_aZKSuPnjPT$X+|;|0eYvGyB9jr8=0gh0q-~$4N0cn_gIUZwGV5h
zr<>M-lX<7sxxTEuqYwTCGRRJEctzSaj&kQ-SL*sp=ck8~CNI2@!TgY0I9I$Q;psIq
zevb)CF5094TRrS$a{XXryEesD;G^8^Z2#9(MxmExI6rNJfhIe&upSb>Cb|C=VpOHS
zILKL6`#v0!lC;~?$eJ8ssTS-M0#EmmW?xaWJ}irU!J{WH&E+~z8=`@VLwNjhYq;bH
zS-yR!n)c5<etpc!RUUswI|NXyEO{?)sgiAH)a%c`f;7L*?IiyQn6dgKlo9g@l)7;4
zuy7o&;KIepuD|Hl!56}rsm|{9xq~j@x0M6Weic1BKOB*6leE2}LFwwM<+VfCBj&Q(
z?pwtM1ces`^~Rx)fDp670d?qJ-jf5P1`f-~Gq?X8@-Tu|U&H!S8MY0(fi++!#}M#!
zxxU#pB#AK3Kc7-2n`E4O90S+Mt_GRJ>Bc@n4o-pHtCS>x*HG{NYybcO($cEgu<s-F
zjbdf+i|uA?G8lyeJv1n&vHEVVkfec)X0%1(W$7mdB9_T&SBy~d>t)&^BV3u2RnSq@
zI4Xmr52R3iC<`v6JH&c(242hqk&1w<2aX9Y{^6QvJK<$GU&vHan`Wm6(X!E79_L(q
zB9+Q}^fm!&gUqP^>L+JZBWnJ1YK>3z<MV`bR?n`FQ!bdD3K*;poa6*=()z3znG_$U
zo0aU30ptxd)S~@iMV*;;@?cjN6`(6@<_cv*$<C-?&41MMimgQ@RuZ$vy~=(SvsKhU
z_j-NU{VMt;_~8yL9DZ>=+A|>2L@^+%qzfGlBBtt8V3SnVt>_7xA^5X#%OH$*3N;0@
z2x5ZopYfB`!Wl2*Yq)-qZ&j+D*pXE*2DW0G?VH;S6om>$zR22Y{&fSskl}uj9tot{
z+Bkw|bt$CcOV<CBJim{*k3i7JGge*y+p=Le_`s1xIqaP`?*(D(JEgn<bZ|uefiy8`
zZ2Qi}rfe4_3k%;2h37iuQwl+Px}6Yh8c8;AEdJuf>^sPwL3erDT`5~PAXiqRRhl-Z
zgd%AeDO^6C=4*o>2du?jPYf>bWj!WPF(rJOBfOWdH`_;y3npzTF9H8#mPO^c&KR*Q
zwQD9rQ@(VqMe=h+?@xTyBwzOQUJT$<UVezi3BMUbPd6G+zW`N}kui*LPh)UTqq--@
zu_yZ#|Ku<doCs99+0@0<PIo2A9;k!N7%;=fN1?O*PCKcNTo22PU5=0;W?-FKC3Jr{
zk5ArsG?neg)!}-pVds>^&2ns=UG0PZ2`K3Zc~LK3ZK>&Rq?XXRK#Jr`t6sEmZU|?C
zvKkj;)kJ=LqXD3Jb=uX5E_e8Qd{@K3k(**{c2IEun4~og(f~F1H2&)5BnRiD`HEMx
z)qd_4>MQf=!HyL98eDxjd*iai_RhxajREp@=4z!STMN;`8^r+Ic68T0O@X`%sh2jY
z@X$c&K9k}fZu3rXADD<Vu*x)mYt3YI%}d3*%Mftuv$}N0-*DT_s56M@l&q6@rOP)a
zT(B8rpt+f<g`}5kED>{E*Y-DOM1f6BdmJ|RwTacjO$RA%17Xq@=S>s%lZt*kW5&5w
z@W@7I*RQt!)V`9;yzji0(h!CPAlb$?7u~+%i<v-Lc>}qHuh_ii2Ou6VR^XSu#Xj>7
ze=OYKJ?g_BmaF5{l)%$?dPKd}{|FVQ_z!bEWK@(f>r^tW0GH*|yqVn3*20P{RgqFm
zUcG4Wuccmxx<UHOt8o44pj^N^hQPr&kQO6~iuO-Kw;)frTp_OZZrp)47TPUXB^N%c
zZHYEF{3FDMFL)wc6)e?oE2)S1{{>qp<kam$f$PS&WYg@N?|JBm(~Em4v|}nOFDSs>
z(TNr<Fo@RNbe*>qy?JC*h$#E1Rj@EC<_@yLB5$4*{y7Gsmj`?H1je%tDh(IgW<Sw(
zyuiWaNb5<Z>EPWlF6^uExVu?Y__YA_@b@%)-lz$;;<A(7)KO8`_}b5TflDJNLh!e1
z+nnGj{J}Pz^rAj}Cm9oD7+8HaIy;T1x~Xnv&UuSIU!Jp9A#Ep>al$&AS5KFM(SyDj
z+4L{tLU${Ca>CMt&53=Giza-6c4}l@IHM$4RZnm$xm~4U>B${-)p0|;-v|hAI;6>p
z6hT7+yR$^{-4jKhKEe8xf4-9p{7rT0>E*njNrF)m@@rpHzL1+-5eXlV3UZVL<49Mm
zj9<0vF^%#v(AoFdVM`;kiyI`!|JSIFK;v4GVk$6zo*JN+D>HOYm$&CY5+H3n_8;}W
z)nG_NmKq)vMfCbnmk8Y*S0e$#FXfmA+=B!F%hzI2MFG6bqTOvXJ-<p)Rcv_mU6O{M
z|B>@Ty3hIUaH3%qe_Hc;(X7Hvdv{sO4v1lOK6)o~Q`G=1YJYtNf16Em)|9=;=|h?Y
zr6e_AqJ4(XjS|hY0A_~G-bd>(qv1W=HwtyJ%C$+@S!QUNX=)?GS9eI1otQxD^$6>N
zo;{f*Ai%+mrKt4Sat*y;C+14%piAMf;}H}445Em{drQmQt#kZb$r4{tXFcet+W^JU
z{#M-b3eTgF`MACFzQqSEaR-=ZbA>X<o_)5%bccGPPdM#+&o;e-8%TRY-13wEvOp5F
zE+l<#dcWr5k!cGPY81rRll^KMjoo^pM)zEda>#-i;7E?jON*(|5ezhCdD9zb{^Gk(
zV3>rG#@PfIOYAYzxcYxZp1g*Ni@bu{(75455F%?Iw;iS%lKB)-t%oLdN_Rm@3gV7w
z3aVgnx|-V+*We%Jb-KzL!6;ZqT>^;7D%3_M*iUbm6pppG*tY;{xUl3(5k`hqHKE`l
z*JDhTM;!Jfm@^=hDSzeBc-D`^xQIlWw7iE(l7rGoLy7%?Tpd&9IsEb)RQ?5k_n{%I
z3ruF8>p5l(^m?f*?9CcbwDhCSx0t~IFEpPWPf6P65S=#9c14jS#hw|!NzM!k3KhMU
z%obQmCGrz-?0BMrtw<3Z>oZ;&7A=z%*lfXm*|(_0z)&z*X-$;ewXSU%9j_?36q2C_
z@kk*vv>XY{17i5}4!wz!1+;}F`Kx);-e4hM7}UL+Vg=8lEA0eg$#<bH8M;fj$de3<
zv#r;Dq&h<YN-NkZl$KBDN(YPx0)!0$_e1TRJ3Qykm*{T?0(onz)ae#PiuGqsMK8EQ
z0_L{;VpV&7#1T#$KwK3B^ZeI;CQ}h)sx*|0A@Y;hT6fJB7MCxd+6AFrd*<yy`ju0f
zk>DYZjmU$&z7sR1g82>7*PetC@JL(DGDVWz@o!_^gzuO(J;_qDD|pMf`6-(jz3f-?
z0^q%7U%8T1dguXHM%1%H*#x$LBpwrds3n-s!D0#Xa=_fBkWi?7Nc41KFc?jNtn7!-
zl6*Zk#r>jIS8Z}|+^Gzdeg`6Sd-0QZU`)qQ5dNbVlj@2gHAA5z_};Ztjt#&E?4I+0
zWK8i?@ybmJ^=h>-1IX`MIF{<Ys=&ym?Cas^1t|oGFX_j}32r24MDA~&YbI)0tf}}G
zQRttSH2*GNcwPbi6y@Mu60xR6oI`qsy;to)`ikU|#;@?(8*FCK<3lo6CyHrs11cZ;
zqcTFOJ%1n{|Lt&q$sQVGf;n5JV)FKOl2DSdAHWPbg0M66fnYLLm}BQm(@gBAC28W0
zD%vkOyY)5xUnWO-OJC@?w69P?C5&aa&AXp+NDaitB|V(5x7s*LW{Lb8dpyl1kmD%R
z9a_4fH$jc*JTv<C%vQL03r7lNnQ&15a()T>o`;`>;ODFY8-K&&6-|u{oE&J^evxZA
zl8cDg+6X-?65+2#GRc4;&6vwuIS*6fR5}*qSc1+(m5+F-VD;5@U6Mg8k~<><1a-Y5
zs~z3TE22bC8bRNBc>gD}6bImm!yw;HUh=T~<uq^gh=a!IkJ#u2g+a0>l6d}ZlIs?E
zSNl&F><KON6)p$eAp7#uhhqXrp8-94C08<aeX+-wkM?pdh0*l2{jxg=<P;tp^+*tq
zA%cL`_)^258@(q4=!KDGqmZ{ZVTYs^U|FBD<Us*dDx91&`>XP7TFbdv6LJt+Ds(XZ
zu|{@FgiFUVyPcAt#W<|*2I8te_;q4`hRxvcDux>c?%AQ5q7NRFxVE2%1d6$4U9%u#
zCoH8G$dg%Ie`$ED<kT~|g1U7NI{ug?<d1>78hb>GY)D<x;KIrW%ioTYRK|pyIASz8
zgf)vf30{xlRZ<vU){FRo$;#E@Rw#-=9|XFWCE#8*(4ZRK*t>(2Ooz^&2RdyW{H~s4
zMVf!9$eJ}O5x358h=QewMGiRUthM3;RSH={1)<r@_e3>p?_-{<f^57j^OB95yl9$w
z^^SMq7yRND+*T`A4pE1C+Fa{quGK<oQyK_Zhwm{u1G*2oQK@twkkLwXK{=43r!;D)
z9*cy373?57ZdLf=v>huM79zVmJJ5356WRs(_C5caru+nVol^olBd+bPU{fSex^+RF
zw6Vi7bsJh7>!VpMd8!OYUWe@SYjhOe;fN~YZk!CUU08eWC|pM|1=n%(oN?3bn~7du
zd48u&`{I>?B6M}yAMF*g&d*LZ;PYI(;tQhCQ34gYYht;Sv{f;{000U=V!1dTp%)$@
z>FQno+hw=@i7g-=x6mowpRPOsby_%UtggRSw;uGIogl8SbW<owz=k(e&_ES;$X*Vr
zMcq3>DJzES_gn?I?=|shuSRrt9(Qmm+%>H|(gRq~1^Vl3eL#ulRaI&<^WZH{+3pkW
zehJ;g!2;)9PZHvAO!M4k+iE}I-D>3q+Agfczzh@)3#=)Yp0bwe@^Qv_{;ub<Z?%w*
zlU7;1atW)rn-%~c+~Rg3P)Q;!2EsFmj-2%7g9qJs`37!%@6j9QG}pz(?coHa_?QNQ
z*^iUKE%CL$Mm<an7KZl$pwn0qP+oPnUAd4uq|z+n?jkjbRw!0X^1Npx6zlm7S}qh+
ztF%$0jHZ(5C{rF<JWlC2&n;JWrXL6vQ;ITKJqH}mc3Ob+P(g-l&CXPwKr|a6THc*k
z$1Eb&u}1Nl5t(lf;iSx11=~-XBn^^ooRIzbRld<k6=wrxGEl?nqTeZ$m91zlWLLT>
zv*6oo>ZX(yewo4hZJEs)9Ny62!G8(JhRwhG))6AVq=z2fvAP{WPzy1X7Q1;3FnHiH
zBQK0QW?7z`z2A(cZ6M(V{t)zdELsg*A|gkT8Nar611EMmk^O6OVpvo(Sbq0>V+ZG|
z4nJ!DS?|i+t9w`ttU{?Ux(2^j=)JbS$nU9w9?T_v`?B-GSb4FqC=9cqbP99}Jr=4a
z3L2I~2h>uQ;V)ypx9;<^D0YbLa;2)+pmEh7m-6(RqoSB$o;1>4Gl1{RXzM#WD?BNg
zJQ+B{xBb5Cvu+xcVj`_yd$2cwlUKPyQt}c{T`ugY_DgQb7bhFE&Z_(-T6MW?o!x+P
z7@n4@-;+u2SMoQowCkzpAS>H;N(*R*J{huE<D9vK4-8ZTGCBG-bN5JoEt43t%7k=4
znpBH74iRX<<A&GpR7{!kd@G&gfbEhomO@)-0KJHq#lL6N_Hg`rOxlv#z?VvQj{&Zl
zub;Zl3D;IGZk=M}$O@L#@*XrtkhCLk_lefwq$B#Fu-}pOYR6!W(!1+w1pd~yY8{Ac
z_;~M$$F}P>UYOf|1dWp|jX~99EZEy5vE={-kSVI0d?2eMIH~`P*T2Z%N7j6{i1@tH
zrwnxu6|Vw)F<42lpP1IogO=C^QkNn`N@txNq20DKdl}3r)h#I^VzS^=WlYun)~i8l
zi(?HKKny1QniMC6&d7mUN_W0IB}bfSI@5W=l;KqQFUU#V4%_F%`rpX;xgX{`DjQjT
zoWuzvmGu=RCzBY`4_jjbM~KvT+&%`j5#j+{o+0p<Hf6gBR<owK53bWkKQ-|9p`VG_
zk!Bp^oNl`_A-Yufcb9&IZm`NsehhPC9lEerk@NWd)hGiH(TD8bo?1IIO&(5VE0v@z
zf~|<A_m0ujpeh9cPPl|vhALH*igYk0yq$1B^9;4o*R&xRTtsK(nfDv5-QH{wAte9+
z09sR9#pJ!c7=!t{30P_iO6@F9#IXcTZl{!AX};a+8W;NSHYB1bDVZhmfVd%Tb_6SP
zU8FdVtKgmmj9fq;OJeH`-Vc#Z>8ec9G!pk5DU*b;r&EZ@4RwF8b+si;pq<C3v@^YX
zq4+vc#+vHpJ*K$0L#teRd##^p0`9v#*)qLKVKQcsA(2}YENjgL<K*9vR}?FnrcC7e
zXE^k<``_cXCzjre$NFcsy4jeYr)E8~GjGt6g|**9hIY-m@{yuTGWdtV&ys_6+KLz_
zX$K9k?!gnEdgNs6A>0dFr=w8jVnf1N`N6A`$D$NP#SB7(nS|yg=pGSA#NIa!bHZtV
zY+17FfbWyA9>A>KsVv<wV1rvBM(;}47C!+@KTTO}h~liy@Xiw^CX#|Dt>?nSlPTV>
z`Muv~s$_A`i^2_>Mlx^aGU?}mT#lPedoYBRWW;bjr6{(hieTybOV>LxFaEf-!=QD-
zt#f!V&(_kA{N`r#$B1-OdgHK&(FQbOWg?PVj+$Es9TPnKRwnFD)qLc*Pxm4go=chP
zK{skYr|a|nATbqf=cxDEUD1coV5uA55^=nimruwm|LxJYIi*HYcB9DK*)y6LRqgN$
z3_|S|F2hUg<$l~MpjVMJOrUG&w*e@VB)?}R%6qQx*N>+wY-aVkPJ2`FG;4*!jDh{T
z-g#w|%^}_q8Mvna#g9`=IoM50(#+*8Q^&0Tse(XP0Wm^EqZ7Ahxomo}&o<AymqS8T
zmNW)!>5W2fyiKGIXr@f_S?q(PKrj#`{*LpN70MXLOlP3HVtn#=@_B`|-`*6``Npp{
ze_=QphFh|$W9^xiUeDq@?VHccmZ6=?67WVZlCDWtZAh8Ruj`5Wua-_<=CFE$Zo$E`
zlQF?P^rqiH5y@j5WucrSwb)S;EH7OeLS1Jv$9p$Mj9BY~45f@Q2c+HjYoW(RDAu?@
zekGTsf+jOwra%;2<eq8Dkj8zusse&i0HN$V6+Q_+t6A8>cAV9iKWf^@0PZ=^r0A$2
zYx2Rcp8F1!N!$Z{<`M&6cU*8blEK;8@QcJX+E1VY2yC!}W~dqLE}dv=1PU@{9Rzr(
zvge#<nf(rF!tPQ8dQqkePIz`K3?}uGm`QSt5y=Pjh<X#vLuKU~a}*FaWzSET4Z%Ld
zspa}rBgn<a7nKC2lh?GKr8I489bPN$eb-DdWQ8x(X4yY)T&MBDo!d4ld^w-<tHxJC
z_T`uzWYj%0FS6N?npNHGg-P{Y)M?X_Rz7kPs=~P==po(eE$h#j4ak*prEF{L@!UdZ
z(>3zbD=#@o^w@XNhl``=(UbsQ$0lgNtUTW*{*dcnsp$i|cA)d<1@C>@z^gj?djrOt
zJ{N2u!c~z`jqgo!Y-5yftmV47K2fCtPu+bd2c#nY)q9(Ukwq{WR(;$Jgj(;n{O3R-
zr=UU2095;XAZ+@A7(Iq2<6JS05^A_*f44o>A#(eHOOsNQX8)NI0Tqe?)&z{LPo*X@
zyh^EW=645OS~DhdFof)C|5^{cCxwh_dMQ?52CEYrr7;kXg!nX?;R&_z>f#+1JdETj
zwc#`hZbtoYreM*iYS2L#**{Z@bi!h<l&%Vm+B-efqIvfC^k%l9Qupg{1acKOiQNVj
z6*8&7{u+SNcGSyD?=PC+<@LCtfFW8puG}fx2_0`I2eHBMFk-upz3nnaM-orfm1dMN
z1M<^<dd|v&KXe{%g2%_Kp2uFPf!;%_q@>UymQ;T1dY(9`h3bbWJzskZLsB789PWQh
zhD6@Jfne`0?{V?Wa#Y)Bj}`(mg%cU?G#}A*!#bj!+-ZtIIW|x;wke(lJVN}WLZx=D
z<u_-sbv_4c_E!6nz6p3WkAhn&n9$2ujFl7YE`cO*<1V<5n&Iv=2vdxW*_ObLUa9N}
z`Mx)lF7w+7yPMxNRrT!X?^9(%)q!?j!EL-%3)SSqG8ko9Dpzgn^%p|l(noNwduC+z
zKXq^lq$}+dZs%Rrjf+4UPqG1#T@t7HiA0y@#`HD=$VX>ktxK0rkZNUQe?L>&qSADs
zmVBjXNC`l;)~C$MXqrZ`qLt`k+N>hax6a=F3A{^|zt?rLB?umIJ~3*d;BFh(%lK_F
zN%+|x;qpTIx3MBVyIT~Uea1!FK!Yy9n0orQlFxEMn1*ieJa<H7NcxoFflQ-yBtIi)
z$R+c<>7kdq1>&wGU98kFGe&_oA_$*bxl%)dAC)ls{nV`?zP5{0;&p}ELicJ>m)-=*
z-BPZwc7ENHeYQt7bbqXlOlGMqyEWWmRVcNT7^~_h9;}NPr}iJJOdPnMRoe=})^O|s
zmSpRE&4Y85np_G?xu(zA(KwzDa@i(VQWT;(8oL*Rb=6}IHDjw`9E{i5XJ<p|h{I^z
zj3uYPSVh09Ismq~$k$_ppSTa^bd&dBd>}d5IPsQOi#h*s$JMJ#AaEVGzYd29i6|aQ
zJ*(GRQG+U2gPX|S$`yIeXg&ezclF?cyU;{`E0sXuX279q2D{Q+nN%6w+Pj=WJ9?05
zcV1i2NNeNaE*_t@rlus2g@cmFSPPaI2(x$~+Q3!*xAhi`ewFyH=t5hqk~(VpOJj*m
z_pqs`O%CcCl%!l#%cgA^wE~vpYyk>@cNhbTuIB`I9h}g~tgiGtTH{UoE3dx<6tP{T
z<<gW!fdytcm|NPq#5T}~`8MZqc}mVI>tTJyVCv-B*F^#PldXq&G7%~))Y(@7hO}Oz
z%PW!x3c?UT==A_?ilgr&Ni7i&V(^9Pl>Qqr;4-3~)(A-sumU1&HHu4#hahv+L%zX6
zw()~odutbVeH8^R5=Rd}FW=prV<^k2FSp2bKkc@#$92NV@=oSHK-ErY$A?~-O3^qe
z8CK5p4zs+$2V`N`<v<*}Q?Lp@OeDmaF7uPUdwjoo#0df>>ie6elFP}Wc=$NF%s^7|
zp|mNg0g}poXjmbmjdzeAliC7Lb!gUsJYrRW6*|n5o<T|BHHtiB+UKL~A)zIeq+yf<
zo;{?gh9`cyLZXeJ)Xk#DOM~+v2?|rJr4t0I3QU|Pao?X|eizdD1jXLCBD^vTD=nQ8
zPMG+;GMBjzdBy8%t!>Z*i;C;Pcb+p(A!|-$jr0~cGn1(-9&B=#kXdD>XyPkavr`a3
zjlaw*{=Z%?-hvo~Ez;b54GgyGVGxA~z46BO!%Xx&8kntAvrM{obr-m_eso_n*3o+D
zN-jVXz3!Znx0lYSum}DZ5BRv?&oj*>^OsTXoqvCbU0ZQue{XHjXnu80<)Pr|{`dLe
zuuH~G&GP@Mk<t{MRX2JA<(%^=c1mNugb;Cq2?q$mM#!52qk!4nqsV}LQB=7-LiDx)
zJTz7KR~m0Fhh~WxWOw~IE{C*c{_3H0`rf)8?<_<`P!B#G7OuMjlB{GK?+@U*lX=nG
zk3p>|6tgU?zO*Bmk?nciIWZ{uu(MTHR*AXZv+d1!PQnl|BBkRz=%+5!21h>%+k9G-
z^=^f3bj`X%iQF9You)_9UUR+IH&0g+s%Wt@Ld4!8j4u;8?N3o_Ii@fNZpE-+-r-OX
z>#P(nr2y@q%Y5!PYzzs#6p?8Lr^GRyVP~XQTku9j@QfS*2M^7zYr??pJXwTriY;}V
zjwb2(4()r7<;<_OZ8LPxtFjrw{{*Yp1zkX|(0K?NNGi`@a~&*U+hEvbjf{P(4n<x%
zhran&)eB=Dr{iMv!7_B}m#jMS7mFxP)4k>pCp~TCRn*qPds-|valSdCek1~@WveE`
zHC;}!kLs7MZIs~Sp*0wRqBIzc;Ec-i>$A;`w8(~FcW;=+q6XRh%nc{C`qKaWvwz*P
z%=8xZo1<`}VWJb-ouM&~XpDoiCQ!d>x@+?nUaDO00H+G`Qh!S_@;oGw9z_055U8OM
zVeO}D$1?+5rl|S(oVGAZciHFCg;7J6ztzg3t5>-*$f`b5(><N4GPym~fdNE54fm70
z*S)*3a&>iX$(s6QE~6K#o9ZRk^{N8Z+RTM6Fnj6&d<*1O2d4Q~C3cX@5{h_i<Ib?a
zX&7j;B5#bK>pQ!;Y&cQXF9~uPTV|K-p7(F!VMclPNM52^)S)0)K`3@!20s^-MU4tx
z%1FziQ)kFB<whJRxJvMn+W3ERC*XXIU#UGFo(*VuB_M?9Q4rpunT>5;o66mxBK7<A
zJ%}nSB1}cNX|qCfZN64DPWfja|5z8o)UxSanY3F}^`4kX8zF%Ut3(vC*cHS>395=A
zo8hTb+GUmc0okQlxxaK?9B^$x1~R=X>Z5^kjCdT`8mK@KXe4SOyxP7IM;a@s9pKLp
z%oRQ{aLWJy01b0dg%8Jk$FN-Knaj?5`c<U&jUcuaH*ZUsb%Co9Z?s-%rkm0>j0_W6
z#~pM6pgd@VDE;?>Gu$nQSUG^KIl~CdHPhilSo<pfGId}qf;z4qB&p{XppCw(M>nR*
z1$w`IA;Q)qI#&PJ4voge7O=99fNwust1AdD04TZL;pvpXTQZ<3URpC0v0#oiwymIJ
zu*7FU<q;3v+GqfS*v9$J!BiT2Z}RIx$3Jmp03#ET)20|IU}F~t==|T;da&+<IbulQ
zxYU%hkJrOheIR<`e#+*a&V+n*q4pbi@R95fV@`^VK$zA3EOc`8kR#>&YeTtaF8b<s
zgpx|dtVVWA-dk*tMP^<vrg=YzvQuGimRxtlZI9s7@~>XQA0mY0nE))5g!AFTs_8pM
zRI>j~#)oC$wCWk8%G*7!eOSvea;e<;iy!gbA}HkFA$sq}W~;nliIq(R_69N^eSxDQ
zn`hPeQFbNJ01JBj&aL#YsM?py`Hf@xNg5173s?SH8I-P^jtG>Zu4Qm8{7GdD5)d)7
z*t$125z<s%FiuPL7{93SO2+)g#<&(&P<!1|_nI*6tI_ip>^iNsZ&@vOm`-^Bn<aXj
z!Jk3iShLfm#KBv_=;dC*z>d+nth5r+F$W$t%G4uD+|1QBzdt$Xoi#@}B@a;Dpd9j5
zlyzgLjUoSe)5@r%@i-2BNfk^^rg%yOMy`S+t>~ASo84`o7UO&YzNq<7*)*W7v%>vA
zhYjEnj`Vw?@Wm3}ka-8*w*6++53q(Nb8#kTm5<_+gTox;E`&(?aBc6|pG>zZAR2|&
zuS6h@S#(~4$7f(ZTq`?At-U_W`8BDr3LeQ{#{)?yAOywp_K$f}Z)ymha{g6RJ|9X+
zIYNmv*SF32B*33fME^<9qyM4aK@ZBmaSD14^0OT+D$j$-PmNjMOR07c8M`kUr*QMU
zf|{YRmON<AmK!X4h}au~p$k{Ef8p8G^R$)KX}iP}m);HPpJE(oj^!F_$GqFOZ^Q}k
z{T6-Tl+;cJ&D<0YnDEk)QkZ!t26eR|k6%|uyxD)Ni0E>~g<9MR&YWbDL1fAgBTz@*
z{j{z@Gr?r$2*!Eyy~<f(2ruQxVjHUUopLM3H|AO#ZwE_~gY)Zvd1!(aJ-s6Up7^~l
z4tEd2q}<7vTv8vP%*1+}(auvVyF~ZzwGT-qi205<K>gCc*rxW*z;+?8#d@FaM1nW9
zBL9wSWRlTMnJn!@_KUw}y$z@O(1TG+D_~>5(G)&ZT3VIa)1Pj8TE9|^khbFC2k3&q
zFpY4@`jb<=xC&qpY0o`SwZ>^MAEOmTT5J5gab*FYeOSIHcwldwBuKdz8;Cy#E2OGu
zcEWXEJ#N0ZDdycwYf}$}#SI~V|GU(g_S9j9ffp2?J(}1tQRfdjB^YWO%68)-?|Fti
ziwoL+KzJm!zG>hDV|w;y;3D&w@ztRb%0U9A9-A<wPTByUA1<X4nW8QwX_i$d$b7^`
zY{v9h!Rh_#1%ZL4%qlqZ1$c5Gh}iQf@5RC;5x?453Z*7s$kT*}i>Bz@R~!!5Fr<k(
z(~GE%JoF9n4@bs5%Eu-B)w}o|y9_=wkJ3{)8X(3IfqyqrVjCIGDoqmvlIa&U9K*g)
zT@eif&Je<_x;*2y39UL7Dw@Nt=`Zk2iKjc&c*bB}R=e+s$TfhW*hB<OWJ$3>j+vk6
z<OxAxF@fycy86lDyMooZxJqtFfSDYQh<Gf_Z2Vkd0)-fx7YWV3YcBQ8>4FTXa&V&S
z^eIyT^eVFab1L?!JdB0P8?YAL<6bKnav)x=_jR;~MlvPNM$o;jh7}l414_|K60@EO
zbT~^P;;G>jk|0N0&{X;FoSQAWS@mU^V3AH(Zm}?pq`w5wkJ1_GtT;*+@-T^i&L^ML
zhLC&|@|r+e<C#sbL76OfbJNq#bM4agE}!kyEs-r5bCIz@Fw)t?p7tE~d;xFPQ0k_x
z(!kN&DH~WVISLnDU#XJU)!hx6R9^5$;R0Egni<VZ@7RwpP@ECiR*(LIU#Fw*RG;G&
zH=WXlKFMu{5^f3+a2^j-sApdX*DAKLzGOOcg4LsaZ`N7J7Sx8s-^hJJAAk!`tsDpY
zQeFz(L(<zmqQn#HDej|5ZuzR3kS7M|iqp%p-{GYp+BGBJ4@$HD=%?Ph3wW!}J~Mq@
z`O~f~Kf79dt<QfVaahK_@9kSh?dtj{ijPA%1(X}<(Mq8Pyuwg7b>MbLCKU1K+2c)y
zN<2DXk1k7o8`pHle5al_C9EXEs~Mv>MgA4gRdjjO8k^ezX~!1|vQ2nY#HdLeG66DG
zJi$&$de$-J0GPcY;k;rg`{FHxK7b_7$^wUA6)`Sy;w{3LAY7aoX%-4vKIe$hFE2<m
z{PK}hseL1+GTEiDx<{E<nPtkKaJKF*12q~Mk+N&{t(E;1_O|v349mzBU>$9#3m^4y
zk<y|MXa9BApai;AXc&25cl;mO$--EeWm!|sa^8)2j+mHn0nugHPkigsGzWir7JeVR
z@^3xYs4yG@Xza^T9V^VNl63DxELz$}9SY6l_Z;#feEGy~3tUM-TXls%%+Lq`6~0qS
z6#HB3pHIFxWV`phcfi62(}=ET811g*tC=G;J#%7F2=F47M~g^)qE6LEfV*iJFO_0c
zXWYg<^{%(r42NG9!O{!bYzjJC0nmd^f&T_q^CiXl;Jnv4v=r-vRxdYRc%6R5IgmyJ
zY0Pk+Y`xeJ73gRi5c=i1eFE=W?DEz<I}H>D!&iS#Z>-LW12htGwA9%&h^uyy(HWd&
zDX!6!{O8l-qt;L?OTyXsAVcV>zw?pXk%i-(xK@`y%EVjG?!eBv%qL8N>4QnHP03fY
zdZ$kEQNVb*WdmH}1~A0E&+;O8mn~3+bkuZ*^%mJD1S#8p7dsMNp^N0ut$xe`?@58g
z&dmThX~?#v|I8HWtv=lnP*zQn=%pP;nMNH(LH};c=Y+HP1YHcsh2iI`GdsyZ9Q_Ka
zRO*RV{+SewMB%9bI6d#QG?l?+IM)1hWk3hYgSx8zl|O+EbCjyuQZF!VISI)Vv}N{N
zvTkSTY`iE(jXcDvh60;o70k3p9V;FQF3gMz+FTk12ojSYRuw}cG^;a%5ELVQP(}P3
zX1xc}&5so!ZVyZ!D=ZoG5!8sDLio@St<lctJBAtNZQ9UxL`VgVo$V)GznP)S`M2)-
zu&PY`J7=OZyJt^6i(o358-%bk|3Ia~cY{#WmwHY5KF-?U8yb1uIS(){0(kAB+lmVX
zN+5pE>uewi(*X4Nm`Ue)9qRBv;vH^DTZjlR_%@!=Anx~LDZC$$7dC7n<jwvJ9jtNg
zbN89vtPr=)wYg2VHnj}i*asR{CTGiOcy&YARD-t|c;+T@5}9G{c7DKN5QhaVc|x@q
z0^|1)!~*b7Gz0P(y+qkI#BBBfOJtj+%J!{@W!e^PuUXlTJqD%c!W)RQenc7Tf@!^m
zli8x4&HOnE0^`#CcMldw4-5nX{Au0W9!X>jS_mc1JF|zDG&3k+{fU+Vt_TG75h8+*
z<`t~?IrutXGtDnxkzPTT<8ut<i!(k#mRl5h!haW3T9R?ttyycGl-XrpA#DAm!x`_3
zv-zGRy)}(JZ)e>wzRggr8aixDUBXOo(7yWgcWpt3l`Fn5qlO1V;dXxu(JlRp&>twE
zi?iv*NSOx17*xdd=Bgb?AI$k$dIWvciF9#pn-aP-DHO|lZ;w7s=(aVAP!i&+f+V%g
zm-*8=#kHQ>=#xSP8(RhpIIOBA&ss)Q(BJdh*O`9=w(g75z~07@74_q<=v%)(fbv6I
zV-X<PM5cmKn8y*-k=sPrR2eWhbkNFJ3G(r2QN!eO2M`!Ad&`xN>u+7&1Nc^doljww
zT0ueH+3`6qh9w>Aom)+EgLlT?l%wpE)$Qh(8&PrZbST4r?y#m?VbYgDRq7WaDOdhE
zt?Q(iK=OZvAFRlKug89k_0Uax_g`XM?mVf3rWvUjK95D))ugl}8IW~mve%;Wh)G>q
zTfW-!nVXA5V;$O@5$U>r&<WA&wWzJ0-cki)tp62wKl*Kw#DW=^q85Ejs(^LO|5yhe
zqmu3DdoFERbjyRqKHG_0Xni|bw91x_Jy6wVDmM+v?mtpU8m7G$(jQZGG!TUEZE!%r
z-=S*(>9VQ_Jt5lUj$gvNDTSp9Rz68?vN><RHi$RVOFr%P(Hwo;!4R8S)@f;{C($aq
zWb1f+kJ>gC)VpuI7cIt&m!24Kc-rPj^wa<VOB)F9ygcb0g5}*a2I2@;x?SxJ?&q5(
z1J!Dod*>VM6;ho@L<J#Vw9?92|A!5s&4DDE<`>#zm}!H);gv_FdflAr$&(e#CaNaZ
zcP*M)!4w%WXp!dR%arJ5)rO;md8qflg839Fb~Rn<V&~&`^7wxwsf~3swC}zE$uGV8
z6b-`KD|~Ks0W5;gerWT9CZ_*D(?i-SF9W#gK5X$?pZEngZNyu<cxPe}(Y2Xw68>{4
zF!1FKUBu32N6;qZI!Ps|V_%}Mf^qW|^o`M&bY3#io6sYK-ZG0&5|2bU#-iGU=OF;B
zF;DAuqIT@w8B2~V*Q@4uu&`4W?s{U{F`gR*HZ3J1we8>egjgx231VfqUr7{C=Ago7
z&3c`^!nVbeMjlUTHxs%B;w~$;T-j`2!~Qt7MS?C(<AqvGjniFFZ-|$~59MC-lomym
zBop4iI`5Wx{gZ9DYM1Flfn#4}*Rdlna5s<ZPM6|X>;kCkftMLB(su|lesWKjN;O_1
zqy8_o8sWJYOl(8JupvgyO6>qqbi=)Tn^AF?dlX`14J}DOPEf2*QQWRD+8*B+!+AkJ
zR79QEYC&-WsM|}DVl$BtVT>+kB0Sf*yH|!aRFt^!-9UZ;p8cFdc)HKI#oG{Gwv7kQ
zX7_|WKrW3{-#+2%^)?jPUZ{00g@<pa?Py=X@k9=D{GLOUFssq3efH4X^*7CKlTHyV
zA&&5n_KCkI^0@uj8K~pA4BK9&oY_6+tK4SLsP)3`A1>lMfOkWvVr5wHp-B-nVy!Lk
z{rt<{sb}FQWLL~Clhul_YIpRX(0rmvo@y#E;X;SWv4Wv($5ij1>4_+kN1taTpI0C0
z9KoEnkmtYh8ffFt7jc0EmjqdtIiQn2m~cU>ve>ChY}e^o@L6%of^+#1I$?X$_IWmY
zkCu&H%0f_A&UV*Pw4Qn68g^f2KOerhl=d;?<R0iPtYx2t6*mc0g=Q6tT4C}5iZ<nD
z7^{yL<h8tA<^JYOCktxr4cH-RO;$V!Bago*$yI(h4%=sHdt0rlIXBZrtCYzO1g7?!
z)i3G}^AdwJ#>yzCqF=#SqE$4@$_`PTd~RVll;`yCou_|AZz<UNsQB^IJO-UGKN75J
zfRSO&ZMOzvF__dje(vLE^U{a&Um?!_>#PyLu}BQ9Qci_I+j)|M77i*{Ra<l&Nk{~c
zh~j#~PuwGEUc)?TR6VU%RI@AE0(bv=K!L})G-ne($BR6W&)M1C4`}RF2xOva5n!rX
z=CcheI=3ea#u#jew+Q~-W2AS7VnN%8-{?MQ*l6E)qbH!mn}f2MByZ+66hg%9e#@TY
zPLDey)5i)0jcQS*?&wzz4YNFc@tmG57-7e1)MeIG&2%0~FF`N~*5&l=nh!Nbx*iL&
z$T<}d2)?R^$oU*Fx-9lGvU;Bpx=3A&Oo<SM1R7=7gPjW?tAq=9z>q4aQ5f|^fB~<H
z^&lGk%a%ggkM7fnA_KMcnun}isU9IEyL?!HyoLbIk5*6rOu`~-9g<Hs)RlcL6+V*?
z!NPd&g)X+AI%qGSE)okcak^D0F54<YZ&>jU>dxBmF2p2bctsfGcZWf{kaNbcHY0V{
zP%u1M<Dk;{uHwJxMzorTYeRv#D__Tio%yP<wji^;KHi$+H@#;-PNJAH(yp{Hh6m=8
zXu3XuT!OL_D5^v!>+&2C5>q^;JZMz@4W6E)0D1_Py{uEfYJvqnJLOMyZOdMa8&@Pg
z_7#YcW4hb>^&-}a++kRgzLSTps8}q6XuhEro-iX`0kWY?9<cHOJK)IrZFE-=6s)UX
zoH$wOwvtxTZ=Pw2l1R2e?%Mw&KA*D1IcwL0<!WjJ&5)KNvKp)8Z2Oeu`(&Q7%T&DB
zXALD8VIVXfgd8|xXruBn0~OJQTF)8RTGz4OE>UMeZ!%1Uj)t>Wph_t0=T;+Y?OB(z
z9IrVfS@_PJSFDLSs8j=MX6Q+`5^|QhWL+lfavQlWv5!?6q&~v~Yf*R_e$42r)++_<
zM4^uaK6jLW!~IbQ0?sGVChivq1gR0fn(=IB(TdL*hiF^y$72QrkfeG2AScyVH=ev%
zX+;q;c`cU1{|P|DhG-sT!T1CAKf&J-*B1NRkikmE+1CCFg~~k~&ZXLK-T4A6`JJiC
zRE9+HTcL}RHYl_EOMoHO*+9i2p65W9C|HWcS1c}L>hJ^pl9Qg@r<87`b~B!Yk34o5
z%8jlUbYw$n<eCgoDb1g&k{YV4n}Ya4HtP#U>c)O{E;9LGk7K6J!Rh4l^+5ztu0q!L
z#9k87(tM15Oy?KQyI@EZj`RJ)(SI7}duv>A+$*$q=PjS2xzg*$uX!}_w1@RnE9o<1
zg*fmG-Qm^8XgiY^@koh6Vj^y%R8U{?c9{j(fAM!$j%{#2&Cq=InEhqrcb-qRres0X
z*|fg`R6)@mO*Y8Y`u!(_%*xm(-J!kzG7_pLG^{1R5Q0u4P%7f#=G?E;p?|K0ab08S
zk9p`>BsecKY~3G`+}?JEiVqkJLLl7d9Fo+&#$2IJJA<gj`1GKk2q?7%`S%((yc`CK
zh9%{GZ+*Vi_g?HMqip#G>sN!jQ;$5^`K14||6!NfrnkMNDyg+a$7@yQj|PVd7EMqy
z;eYZ`SzU6QWPB*^K~(f=3vJ~ZFqS)e2On3t3MguaQ|l^ZK~7v65CAPe(!b(VF6se*
z*Q)1LReLRVb>Gh_OeT@1W6aPcN8e%F($rSS<sdAIsUww2H<!|9h*?RrJ)6z5GLD;>
zr@LP$V*;19tkJ5V$>5?x&Mt26g&kPmclb1s?j!`GZed6li5hOeNa!X2iChwe;3)Cb
zGh!!b{GTsoG0|bsyg$a5^SPkjZTS92fa9V@a%dF1xm3Nh_Ta@6@ZuUrA9V$rB;dHb
zk~)1?2+RY)cUDC1anzIC|Iqlj5)kwraiqOH54FIoN=q%hX_e$j$9~g_G_@5oa><9K
zI9n&q9->q#qcCG<{>4vKy(NJ+wB|!glF?hAPO<NQOFFIx<m2q@#wLcg=XdhXifKow
z7Fnxu$Flj0xTI%jIN>eVys)@A#r`xEj;J`;4_8eRV3UX|ayY#UzV5imJbi?qLe{6C
z?;B(~0QpeAiYPbgmUf6~R>H8kHej(bd^wTc19>z|g-xC>ub!q4cb4<Al!Oq3wN_H}
zxgDuojQBpg298l`Uw9GPFafiv58qJ%6)ARwvfP|4{e-H%$+;^+31rM2pCnEONfm}G
zNF?#*f-p3)CpQxV2@zyWt+f8YF|nQBYLit-dr0wg&mb?e89Dg9Y3iXFSnf5PkC0%Z
z+;qxXBAk7eI6t+26URaxxwG4*sVciF2l01nODDB{P)R$Tw}cn)CRmU+_K)#ex+q`F
zDfF4}z2f(Qn3-5rBO4F*K&lhhm7FsDpS^w~1-L%#@_@UuJ1a1YWk?+DHf2?#+Plrj
z(Zu$&VoF}Bk$?ijH5o8ru=tQ43QaDJD`?QCQ#?7VyR)f+XedZK1S~q#`CG)A^^E()
zrA;x|tMMM|6e$SM=^uTlcxm%o!kI{rqU7-^Zr=mZ-wwYb8fk1k=Bb`wY+zx&im+-)
zZW^Bdy&5S1bl2(I2uYF0C@dE14gPH|^tB3O9U_SMc}fS_3N5`C$<u%b)RZ%O0P@ye
zw&O>jPS0SLv<R?t%6tc&Y2NL6G=AGd9AxGr;RZ=v-W)>`LS{HSr!u~^r}P9#shRH*
z{ioZA`#?gte$?6to{%oXm8PlM_#J}?BFnbMqtewtfwiwB7REbY!}P`MS_5EJpDSpq
zyJ>q~?Di!8dx;hslUyQMux4&~C&rgAdiA|5E$7Oy&lZ$tML9yQBRoO{H)0o93PX@E
z%<odfUv(#yud-!lfDEn8M;I$zsyj63QbPl;TVbKT>J53+$yN~-@|N`ltuU$1W##bH
zHVr@Po!<cd{QbVGtv<~Q(4O;N1G0{!PA8OX2rqethB`DbgXyJk=}SJ`i%Jg&=b&7S
zEL0>2x92n3*P30+!;%Xp@$Fu6@v{$l$M#SJp<Exl$s7MgE8-3hG@tgqO}YfM;87R#
zJ{bv(pdcIAsS*mgk(W9ZL+vxI&~@3-dgW(pNw(pEHxw9}_u#V8i<{2}+4Is=;|&^^
zLRWbfM8T>L+9o{S7BXbV2X&vcGEDkeg87GHE$Tp$TauNvkQdz~lisUe_L|isE;f-w
zD|dGc+1wMlu$Plphk;6$71S?RUvY_~%M<T}5s%S9(Lvf;iCv8UK<YUOB5;fIf5rdG
zef~}-$|l{y=z#(iAY3+w$l4t2zF`;M*k$|esP2Sh*7)WzfYp!a$)mF9)UiXcWjo2%
zaP{*S{r~_mZ)C_hIg$p4PVwlEw<RQ`H+FMILd7JCogmodR4yGQFPNRAn%7A-d)znw
zjgDRygCK1jE#+(^fOnKoQ;;Dr%@VuUuA^CCOGk2_Ll2%1`m}^VcqvK7gfPkn^_7;5
zi!Ey^c2skr4BFh)lLYuz(+C&_xWcmS0E5P8dI2r8)tWs$(^!JDK6{i9&FV7;-Uj#;
zsjQ?)s+>MiKVN?0JC0B8<34Y90cwTv*)vHP5k4~En9H>y>kK!_ovhlhP~uo4o9?&k
z{{1okhWJn-__t&l+~aOtBi4OrN#XeY?!07maj9nFA%phaKMRXAL%{NAX<PrQrLEO+
zan1DTU0ItDi~Sl&M&asQ9RSwD6m)zc+Z|C`!U_k%mX)u-{57=#6*?8k)r#(-@bj0}
z4Nqj~#~E!~M8!O-9T@%w`^kWNx_OV*8y($-)=vzWD~>COPt^uf!nP*&tHPgfV%bWW
zL9Xzq@YF)EG!nKEd^g|a_hH#rInjp#0JVP@G}FGA^M#mx8A?AXNAk`G>Gpk8lmckM
zU|1nPS+g8PG9;P(x`AaW<f(mk>PF)>_WiuScsL6vFlJa#wvle6<dE4+(Td$EAowja
ztOsyhdVC7FS!{2Z^ZwJqsO6vnh#y_{>_~W(Mo%6rnzyT|!3~pmeXe!u;=>P}Bma;=
zv8(M~ak9q`UzzV4g7rUtl>BGK;4yGg8bbe=Kg2+2WLdd31el$g-o3y=^fp=>-2%qQ
z`iAU-d&P8?-oz}HsW!gOURnwol{F!bwGsd#JxN`Ti8Dk(Y|XIA3hw$(sefcu2(>dh
z<F6=r|M%2Ip78hww)bh}cx3pt>Le}iOo_!~nhZczUk+yQJxP-$YfB)DleuW*1V)i*
zQkxv)d{IxN267nX?jB9iVPK4l_%pUcM+Iah)_;H2*y0A7F(3Fy|0K5jK|WVSoq_nw
zgJFfmjzA9m<LKb@tD4&P=oym<aHrnIjRliWSOrhf2DJ`ZTRV0oJlNVioP0|;!Qi9w
zf8H%$R+_dBSK&za6BwjaDXltDh<~?Tn%-%hO(VKt4+ilby^<MN9xPH^Pm3+CJX}+H
z6&sdDc--C{?Vn!RW>57Wdo3fr;nVyo;3lQ-u@D9Ten1Q~_`gNp$w*i|a-y81{b-73
z{nOxv4L1{YkUxP6n9Ag@p2&Y%m-hqSP6*^almJ~z7Y&@hI+3oe$+=eBbY)2Ij|t^4
zuC?4%P!(f3`O&Nly#`&*$2LkBDX|jHSG^X}l)X1o?JJq`%3|4_d#4~fBZ<URm3%)I
zrT`y@Nup$Wq60Iy8aJL?qk(|7=$F-z&Kl0w4?Gh<J4K%y13L066H`9C3@H}oCu~=}
z(eG&Bkg>5nUsKcy_XXv&d3Y-E@L{y_Lt%6~-z|#^-g5bfjRCRE+3FE-7|LPyItB>}
z@=R&T>k?-I+^c$akxlN5`8WOfZM#*oGfX~1C8QzNF2`%-UW7k?8XlmOaO1*18x3~l
zIZ6R57m4n^+rjbLJ#877N9{^5zuYR+W+JVRdd`lP6yf-)k$||_;Tv~3oL5+_5<*Np
z*U1OI%$KL(E;-pgl6+N82T2a0es^;7oKsbq_1Yx6A4sZDce1zBcs+|dPv=CsyK9jp
z@y{)vw4Xn!v^Qi8mw0rZhWTZPMKVG<qr9nbPlj)2@TKX|I8E>)kfoQG*@maNjtd9R
z>?E#|&7_6b;GT=iv36v**Rg!X)9L^2GY4JHp4GRginxmEWya*yZt7Sqm_hL43vi@_
z@7$>MkvpA5W?WXvj~cVq$*e>SSQ!|}i{&YRVb8wK5g8Tzq_teJ<0G!z8pv%4FiJ2l
ze(u?r`pNdd^2e?Wh2iD6vTZH%fC?HE?|ZV8Z2-Y;Ots#Og#*|Zdszl1l{l>E@e1!G
z%wmFpL84iMPhS!cwHrrb#5SK1iz9WGQrvE7M;zWVUsIoNV}Uqz_4CK@=nxGkly2qW
zAq|AeZ{zWx9=tA!#kaWdTzC~=(ia*(>#Pc-r>Pi9a#;ayj{_GoH0&^MUGn~Ez3o<y
zN+ZkRWpZx$3pKCa*GC|1OzLQrCNIz+TMMxNMV<&FB-o(-m!<`^uU2|SQ=~x?o5h+g
zU&cX#P_g=*y}z}8WeW@w6UH4qWf!QUntE^Y-u^H+kz(#pI#;We7Jyo@Fn+xknDJ%?
zNoP?)!!m{>hq5(y)(_QU+u7MFkXM2);&?}QFY!YUTSsPMKy3f%kFDn!f`DNYe$biq
zmB%a-Wd0|aup)7{%4VfEPp*r~A#kQsOX$nm16V(@<T53{mS~0{K6qz#?Ua7EFJb+5
zu(Vi{62~}$Z#$2`7R$@P)*Z(%pQE}qKOHfCe6h6Q%AWDT^*`thOdF|}su)6{-gf%(
zAx)89tcfg$-yYy@_K)Eyx5HW#tqfc3Qie<qhX_%eD2DVt<C2lGXIH8vR8&iBdc*~h
zm8j0{O8Ey-kMj&xkCI)?=Y0H`pN=~^<XuTyW&&crF4y88QA)K5$CSUiAsR*W{r1=a
zzHaATpWU9mtD`;R?F^N=_d-4RvNGMCFK#z6HTB*>n;5{hA>wOO@z2A@T*;DO*88h<
zX*g*TVa`zpgY>8kmg8h3&%NVszz=k5a!Soc0zebTUrkJ6nskUnyhH3)maJOlN^CAF
zHdWyv>bJ+jq-}Lld&m3<r44SB*HsFtHQ#-u1Iq=)?SJq!snkO0t~Lm}IMUAMxIUNZ
zIe~a*UvNw00##hqJPX+GJqO(!Yaej#b!*Z2)4RHxM5O1VkNl68>q#_r<8U|QAjH2K
zD9;u}=nf5m#qh|(?@|7d^b%9#00i6xUH?vIO@4DS9IBYw9Vz1NBQ#{Br!TasMf1A3
zR$;qW(>(@081-Et^P=F<N^zOvrSaJWi3TuAFA~Fwk@yCX=PP|s{xHf<21bw9#AO%0
zhhh9Dc@EB2;TEdCpu`{hx%S(K^ZSmHcq1#}XPVK<q%qm0_j=s2B$dZqNCUAa_b}DD
zpQFKw)P58*2Snn!x|}#-tLAQd_EzQ(t%+AL|J#aJ^_5L_QZeo^Jk|HL%j_(4fbUQK
zZ7Y7Hl&M|VnW&wc@rbsWw2>y)TbFTJeHV=*U8diL;h-%^`Z(ptJn(jAaQfX%+^W|B
zUek>cTMvdETTDsr(EiSM+I1}v#T^IJX+Y{RpeBXL2#DR;o)|bl2}7oaiBTBu_hFdc
zHnZyLbR*Y2rrn+>#b;_qi;1F8U0!pM^f?+^wW`~$lZfYgzkc;%dQR&4#@W%|;y}Wg
z;4_7XLBzEBc^N!qJ)~ywbl*G=r+14oePSp1LIP`2@9{-;vhx`PL~a{2**Ta0hRb_{
zx-$oMDZo+37wi(jTjv1!kNk+&R!8IxrH4@RPju!QirNJ)*5X41e78pP-WX~Opy=82
znN@^RBT6cMZ^^hJaxoRbRNjZ2LCZnBi)940^zJ1}4Gx#GoLqH5wEc19>~=LY>=ZT7
zO^AKVL`e0!h>1)fYQXj5B!$?o7K1@u=8K;tt*W6`wh=3G<_NXX)7I4m5xyF|Hf*Ss
zM?2cRH(8AqtqG#s=4usm3O{!OTkODG&+nJ16+!#F#|nS|LqF7LvYDzr#?d=(eWg9<
zGzO#nPqHAaC~din7DQg}w(4aFdT2+=N(xG$<o*jO{kCj_!U2_75ZCjGwb;a5s2Z&m
zeHrQL31&d0Jp@|hTz}m}oj$jTJUjhIULVlLEho#DYEh-5=k^of*wgh<U9o51c<)@p
zOMt5O2>Gtxel}I7|HZpp>$xy*L{>()E*B1b)=Gat9*L&JH=gNl7oywT5sH31MhQ}R
z_)O|_F27q$Str6_S4F$%g`Ih@Aez<EiqkcLn&F4uK?5616drvi!N_sS?tk=nVyL7X
zq8*kSELVFYHDGG;Q|V^$ztFwzr+?b-^k?(w5wvnv4vPFgK>gizDMJLIKJvFr-)d;f
zQ6v}JP_V54aVOKLHSuR@;8!(qkO)PE`pI)*qU`aXeU7~HdjkIk62W)%JgTCAjTkHP
zKpY}jvqxLCTck)irUHtin(cue_{yc85Y07`VX0yu&C-ijaEgTv#_d}CQfMM_l8B5b
zyy0e#_4}$@wg%<@1v(ke<Uyl_eU}}8bMMJ64;l*~<5Ev7xWmzhKTJUvoP3tzoN14O
zSc2?7I2?DW9oE!90$P*FWXS*$(^ot>U*pzFs!y`6kP5N|cVc@}w*3gO6zC*}Y?aAV
z0LH*po6z`YM$SPvHvV3&JhkCnAc_isY4ILZ@nIR`sh}Wvvcp*kg3<t;un%fj00|Z2
z$uRGV2lwnr-h4M1j03DV|3=tKq4uSH&X4Ltf&;~Svi#vneLCx_*gLNe!Bw2LZhBB%
z3X#+TT7)951|4#cd@N$44&Zo|UYr1KFHH63Gq}Yg2vETQPCX8+JT2Yv1uXM!(Lh|(
zLe&6Cw;?bHg#;Z7lyXGQ$ol6c#yWrN&?xHH$CN!rt17A(P#jV`GHmf`UW{>ckwm6z
zni`O*14b%Gr(A&aBJxS<JaGY_W&Db=eF&Y#NC5ovlu{XF=G|iVs>PfW&^yp;EBP#d
z5~7|F=nQNoz$m5EsH%r5Qy`oQhip}Y9yS*8GSdb|Q+?}G6PWxZ3a2Qkks+_g5Vk<N
ziYfkRj}6|v@AXbAx@Fa7g^QqVl#H`RzV~%l$Wir345g;$w?Zg7ri*sumJD8}ydQzA
ziy0qCXMeju%&13{xHb#W)MoeA?fV@{2b@KxY%L)XaQA7XQc_13(9ZwgV&A8oZBq)F
zx&^jE`Emx=GT1e~R_;cYFPhks$c?i3hQ1_otz<Xt=-)ep)m18N&_OEYIWjP&Y5Q`C
zYF$6TeQQgE|7OouiWgdiiSR3umzycRmV{95ykIt51pvA*;=I~icyCA+gs%k8Z0xWD
zB=%ri8I4|5)lf+VN2i`^?|1OTzyeC@rtJ50THwL5YFB7+pt4FM=3HH0=V}><UY4W<
zM7ji$z;M=b3Eq09mZpk_;{W7gYiAIq#8_8@XT|wDhnDjutL#M;u>f0cu*CKi;43`c
zGl|jJdlLDBml~%>$VHw8n=Yh7UP$G?mMQSugFdm|=e9q2xj)VzXJGcmDgr>(O$xs|
zlrQb3s;^%_tIJMK^)jhGq+*!LEaJKqEXVv0rJbZhEits<$*_45<UUi$U-dP;XkUVz
z`VCFr!ycK_%IqOm$xUP`FQN6(<WFF{`{3aYzHI$Xs9cs~@lrWz9T7mud(0c#9~t-W
za;mi}jAXQOiglvy9XKKL?Zpl?5r(EX+l~~kGNFA0lNSWhM_R+lK57T<pfCl-0E-O&
zV;~5;Z_zF-tPE{K%nQ@7@gRPg=ThhV@{oP3If;kcDU4&#nbKO}1GYz>oz9>1Zxz>X
zlg;kO0=&@hr*UgePp|pDxvFusnnMoIB4^%;b)Wo3&dB=$16WIS3pX4m2|Mw8Iup`x
zebvZUjB(D#dNWWF|L^YsrY!|^p-eN)tAtk(8_~}bnEjb~Vp(`>`ORpeMC;tPjD8US
z|A=91@x}rxCfeD$+Bi7eXnisY{)l>0@S;&a*;5y6r+Pt66W_b>80v!Ul$tv=ZmJqQ
znW-ecUrDN^`|a{bf9m*f^_~GaP!}_?3l?65-l7E4)Bpi~iy>OFc&l3E0g@ES#ZLAF
z1{N%peg)|;_!g=!*d$3MK*l?Zz-X4A680qVCb+TW(!3VO7Zke0)gAg8i^8~@#g(f(
zT=%MmxrrfM`<Jn1Q3poEI_61$Aq>%@qK}sj6#aR9`_0YXmcXN=6T=@7W{#y)`^4-+
zio0EHN<o~9F=%heE0urf%elaIgO=6`<all{$G{uC%j^<R$w*Iv(FHA0!@5gRDK#2b
zg7K^qm_>>VXBYVR+g=&xyQu=4eBZyTB?i`A!m7YlT?icqKDpOtPaG@z3sVort$k5f
zEv4CeN&t7O=at#XC1fVXGiyIBG`SZ8b>k8t01(fdH2l#LRVxBk>huN`x5X?Zj{I7N
z&RXQ4;@^V2>Gydy<o>A<*uL2#->~i@*)m`OLfj;j&3@PF_0J;To`B0&T}GF|2%tlx
zE2(bX^^LWJ6>CW7HChmoxtw?Rk!yh2-}doo*ERjhuHMf%h~+B(1F@wXO?Cf?c2KGC
zVt26W0`8C1osX8=NMJ>|FSR`o>7Xyf67qZ8(UK~c*xobITIRns*(rK`<I72N@w(rk
zD2;v0f1Cc>j=P81IZu~(nr@>-1+g8(L$YSZPk*X4tda<kgJJ|hduo`>7mMyO9na`9
zsVHB94*v92uXHOgvz-vOH+dj6Z-L_^+v)tXkAcp}JDj*z^FhB0zEadcFoZs@@CNbW
z@8r(b{t*F{D^My4ooMZ;!H3LO31R0V>8<|y&{fj9_C+~G%ie{Mpka1Y@E&+BwnazN
z*;R?iy`Y&*9Oj`nv)8BG>&`w@xYjENS<Ip;LN8fdM~L&E7NJw}DXXa*#vxs`W56ak
zbb2?8odI~qCJRPzvx>K8-oq$!1)5*JS#>WB>U$H>0&-89!_I~-i^|NE3gS_Dd5@vG
zZVt9e<mr-zRZ8q0TGpImR!&T)V^W5-zkL%I<rZhCvpI*v9`tIjkBsEjAz1>OJ6QZP
zHd$r`viDB1WdT71LNn1RqQaY>kE)|ULcn9zE18Z#T&yhc(T^pR5!3fAFmY{i+RDig
z@Km9?oYb?9rcGViJ*DJKwMv<47#WA*L!%qClW2C6IdXB)hN>?LaCyC~k-)VX%cA%y
z)r+X*92EADbE|J@Pq70!p}{cc$~bB6Gu{b)7or6RC5#d4M0Jz<3A!LrIRKIfZ;~2J
zFYEe<kA<%n&&$hxCJlA}v{UvOeofL7swOE8lVr()#2g&e$BTS`@(0vIw0UsRCb#v(
z=VA16BPDzI`J)ri*<(F<5$m5miu$=U<PNgA9-R>#D+?ttePUl{hsfsmSxQ&Ed_=@B
z&gm;1*U%d{f6Jw-UsRfeJ`#odb*2LPstB7rhUgr7>@%#Cps@}ioZL7ieTU0~;BI!G
z0++vJikyJn{qfn0^`lC*2@tkQB*%KmlG-wGv|*0u&Oh{iBv@09O`Wi^cbMkTsF0h3
zOBn3}GWVH*$yJ(g=2w|2ZruM{J|Ndkm3<Hu$-F`5b*Hfy!BYq<W0#ONZl0I6W7i5g
z9*VQYd)4wThsorX8J9YzRv*bakHFO`G=Wql@Oj{)&MU{*AP@dI7Z@&Q<Mjmla_?x=
zFX#{U(of}`hnwt@6#F@<Q&Z<w)=&)pph;M+(HJtyJH<H~?hb{VCBV6wWEgN<MmCsH
z0s@JyM||hyhN`lVZzKZ<wb>^U(*K_4k#Dh^Aj?zE7ot~kf<g?@l>VhOsP@&|VCcR-
zTA0^Okqyh$gnSoCs$}@@vZSghm#nh?Bj0_sBaz}2;dM=_2H7EO_QdgUX7VdMmXe@*
za=`Vx5gyj9OZNWDOo&?R0~d(E*}t0jrgy>Shek`#tXjb}cIriXIAf1fp^GK;t~(ao
zPcRpk9(V?lRvgE2;`kf+CaP@HBx6_(iGb?UzMa&njP<Z04B<{Y{z4;lQu#f^#E>1c
zq%Vk`i`}~F(Ai8t*dWH4>@a6gLuNs2b^kR1zqYub&#Z%F?K;V*r{1EqeBFLJ74+ng
zE4z(N!JMtFkd?cv<s@pQ;!KY@MF{h}4G%8`khi(eu1M`pn%NNQ!gUr%q~>#WxPl+u
z>wZ;()ompJh0nV=!!-;N4yp1)&o}KB{Eeob(at?HQ8VTdY${Syzbh6Sz~w!HD!G6+
zPTr6Oqv~x7cm&yCz%|HI30Q1H8o}YZjji222wDQB$yMNPH1(!y>~V)390lUZDm+hC
z@;eNWqIlUitKX~4oKB~1hw5H_;qKsyb`D7kte<nL)DNL?Hg((GX+Ese28h;n?+J<(
z{YtadGlRnb<fH}*qaG~{k6BqC;C^>gYFv_M<f8v!LF&^Ez@>=T6S*7jT=Gqhj<PCr
z$guf5eg}50<<~sQL=r1`8cz?F3i|3AgDoTxAhSbdnXkK%0HGu6d5E77w#}x9AJ+`3
zUPe4C=l&5e=~>V$pJ5O|tmdiU;MyhQY$m)Onh5R~{_7H?icx5>tT#?;Q=gUAr<7TE
z1Atl*G_=8~jAav>xPJLh08rbW#kM!AS?F#oMqh_`2QZ-wBee6-k+==ULpI$X5PU$z
z4((e&LTx{95z{!UCq(ZYH=1SB3*=tsXw$Fm!wx+fvQeCn&~KiLKF{`Xv6|06f%mwE
zZXKG31qm_m(*NCcVl8|Aro)g&3fx$wHh5NTD%TxLs!Vv~`;nx?wl${<^z$knC{6sG
zg9QB#LvEQ$^=i|VTjIsxnc`-cEs_!`n*@SCGp)odal-w!c56{#=k%7GAqdnhH^{}^
zl_X%v8(zE);x0Brf9VGY1vfYYnOiyS1gpHLy{^YJFZ|OW_FU~r8BNXxTh|l-fz$c~
zqRJg-n)r*oyao1YJH(rAv1NvpJIlU46;ry|BZK(a_#0#W>~nK5upw~AjFx*tDn2o2
zX+yab15p$dXy)J#61Cm%6G{s%@e@oTQhdO+R_%jCa|a8d?joXM7@_RoK$GAA0B~?$
zel2>B%Im3g7iA{U@kcdy;{3I|(kfk|t^Y+s8y5p3C_6`C?0w3UnZ8b?s^}R4D#0%F
zSG?xGw42>NOq&t*KQ>9pnr{Fy)&uRyhY;#_3BWtzQfvVejp!${`^Lony+1D4<nnAP
z?l+_|RMCiw*~z*|cJWJF^Uo_b$M@k!idAVPji&TI%M@(f@o`CC730#l9hcTiK0{`v
z%k0Y!j{nU7N=vDfCl<Lj+5?Udl3y(A`&wb91?AVs1T~#0g%#!g+ff_y@c-6YUnz5O
z?&Gtpeg3|jOo@<_6vWYp=P`Io-oO#fCnU*`0!*zkzvC{w`lCsZb+kX;!h4m~&74qC
zmUWWdEvQZUO8y6mUw(8a0vXZNYD7HHlZS~|ONQO`-w+I3^X0|lW?SBR#d6&eNy^{I
zaZx1&ZYyA2-r~$3i$JiH6EY}!(L)&QEitzBDK$odocpO&UtL`Epxqw3kNsuW3!%s%
zm}VZQN?zQmGAJL3OcBYDlQKA)vIP`GpqR~5@HB7O9#*+?5^5aI|4}@&$vjuP{?-|=
zou-B2<sDt}Hh(IgNukm<z7yO8md>1eqa+cz{gzt*6K#?W{jDW05y~=;{2g-Qm{A-v
z``<Ub+yahGn`DR9|GsV5b{<6$(gK6QL3RWeu@Fes-eI=F=^l1>vFv*VQqzm|?AJEq
zq-Jd{Q*ah-II9|^Pg4f5!f-s<e4OVX;b^#EzrUWgD=T~oCy;GMf4y~0;Ww<~_$bod
zZzrA_J{{8o-hIY#4HiH97ox8ea%aTC{9<K3t<7}}GqZu@AYh&i3)5vaBWux%bUIU<
zj{ZKD`C@8yj;HSs&?OFtXZ{rn5vyvl(Sz!ARQ|GqCRW~8YVdY0kD<7oG=yRO7m~@W
zW21RCs;#5*z~;f(q(>dg82`O|%9MEx$mV{D&_r;Dn<8SO7mvp?!Cs!-n9lyj-vuL-
zN^4D1T*NojxM9Fw$)!JAE!W)oWbFjmnafhEv}(~JzKkestsK*}h&0Z4_Xh`uViFDJ
zRGk{PQZEP-pU2dy*kYTh6gZLNbP+P$_PQ{ha?y_WC%vX}>h^WVD}(<^J!BaOJ3zt+
zZ(z-rA+i%k{9~p{T=un!1!pcS-LCb0%>XcW5hbESiFhV{6lA4wtPupa07zX4PJsr{
z2H`2c8SxcazDbtzl==lG90$6sw^038nFcMD*rrIL!RD8N68;zq7Z$%xr2%RY&9zOQ
zY@o88{`FpJ=TVhIt`h%yh+Rvy+Y+;(-X>*#%wH+@W@6=EP5m4}hA1;G$fTtTs$IYf
zolI+iNA)|8EHsbIE56Cf@r?!g;aQy9P2-Ey>9tVc=h3?@Sl+_MpMR?_$DR)6)3h)z
z(iV5p{xGOt0*>pNZog1n5K*Yx+ueTeCFe+q{fKw`&|4882kVLGm^iL1eScJdC=@li
zQsr~9+xEqrN6pQyzi${^Vy`yPrzb+Kq)Y26uF%pi5Md0$$}{$sko|PScTjTVQ5BT|
z`CJGHQiv+r5bNV2ai{%yuqr3I+RNZ(*W@`%TsEl5&^^m3!+?u=Z_9*)BHPm_G<EN0
ztx{~pK+m(OV9e>$$9Wdl%2J8)Tu)}BBWzKejVJ|V)A(kxhuPT-qAj49a8{m<iCvdb
z3>Ozy5UdSP)Eb!yhcO9Zr(3qzz}(r3$n@C|8W+T?Vz~nnWTjLk>v;sFG!CKD_2ol^
zvOVDqf3-=fA=<@<>~J{%AQ~0kF;s<4;n!od3WHD9Sb7R8&fYx7aJQd3m{}S-CQ9Rj
z1mn+IViD4wqJKv2e$K7<bfl`yc*Nszh-WJn#B;TGCY`q?_oE%7p}q1&7GargUX)Tj
zaQ}k@QDiv!v}*`uN4=uOc6ve(Gf6o3d6}2c({St+kQmT<-w?qq`T&>x(Hl=btLt=f
zm0-TOJ(I?uDm_|`zP`R@#aIr((Z-w$Xlw<32Ay$=oW@rKaJMclZ=%q*hl2)iIGuGj
zFx3XQVI7PVg0y4$J;VQ+(gXMaQG$CVrMh~=Vp}kYnl*a{oU$!z)E3xTO{Uh}(xKhJ
zR{^p}yE?VI&u6E^i_EJouFd486buIryIx}Ry>sL1E!Q{jsA7C(5F<0}?rW~=D1<94
ziVimr*YBeZUQ=U?ywu^r3bYf@iN36MjvXk<ImSQ2m{IzoAa)HnY-1yH>Bfe8$A6c8
z9NE`WvJ_c#JBZ(3G&o}5-`EDIbkv{H72^QsX`L3vxY~8``YQ*{k<v#w%(p@aNg9f&
zG{G15j|CZ?{G)v0$4FFC)-e<E_LQ@)o;@yClSVGcHV?Y8RlaNDJ;(aB11g~+#au6}
zGzdt6!~;B2(j>EuNeBB&npESa1Ro@!fqrp&`kdPbnO)%L*arKxtl|%`CGYD8fB{4Z
z5D4M)r$}zBsgRN|ptG%8!b#)xJ>guXC0I$yx?#PkiF2I)cKRP4sKytMM{Ou*SB<Nu
z&QceNWDKZhEtoTQ&bsa$f81}YKovYiDc9uxNJ|eU017L5#fw>T5^t0em;Qxu`>$Q}
zCqLCBxPI<-_kks6_xW*?I^%)U;KU_2*NuLyz@Re13e8NM`q7n1)HR>|Hv&jAV`1W5
z8SeW3($o&2r!Q|u9RN;=!QVfppmJ&i>vf~dGw(oS6uNY=d1d?{yO9nYz4J<={H}=X
zi{bU9ankm|2{B}pl~FK>-Lb?+%g1icr2#xv%zSnQ6a1g8cXx~^uD!`kK2VNYqYq+w
zj;CRO-k$)eQ9i>(7UnnJ0jX2!jLTTYHJLNZJHx|@5ucCiV8OlX)arm;Yp%UGvZTqS
zCsSf1_s4(S@G%7h29l{mMWUe6mk)RLJa-x;I&`fdb;%rfNjWwSPqy#d?7GVyh`DRT
z!QtQPp=MX$<SjV?n~6o9x|0V$x_oKuT}aIwYYeye(l98(ifA&;)k~~gr1Y$-P1~Q7
z(9FXp9CIORm{-<dh1k=(M6A@*7Sye8-q9PB^e)=7mt+HDg80zF=#a9M_=!3Vduenx
zcW+v&#x|wMP96G~5DDUCApr&pUfiILzuPR338N39OQV~*UvfWJTK8StLs*P67mA^Y
z3|Ua_mFN;ak(XmO*h*7`I7+D<l^>MD%v@_MAuJ(DZJmHYjw6?VJ<`MD5>d3R1p&(}
z<5)wN-fFf3zChGH!``C(Ih6xGag7h>PAv~#&UPrO+m?yhee?ir?e@A~N4Ue=Ccils
z81GGt#d}A$*2)sAe_@jn{7Lk?Gvs@_=!SCEJltgR!a{C@QBnbK)M}?xB*G`TL}!G-
zTnH70%l>!bg5TgZ>eveNZzr+H{fVLC!YD+AHvm4nP<$K8%tpK6vAT>?eSDxB$-65|
zQ>qJGAQAXVoyI~V#D~{z#*I20w&fR0wpu8nU{2FBZO34qY=~f@cuvuF`iNP2<zAh?
zR&y}#1+z0Q7>T5K17%<L1fi5}QV*aFSJ}Np0AS;?86SiPNqvH^Xwi=S(E`06Ic`LG
zPVn#!j`B|~x!X}_NIn7lxsH9w(3nXoKlvWHW-4hh%yKs!e1j)Je)J8)+3cO8R60}A
zuiGH!n-)l7%k*RqHaUCeD^V|lXI10wnt?|$1GS%~Gd%(HFzx%-nM4ZL*zFXyzPC9V
zbDWsg2gj=;#<aJ(X?xcV#L-F)uM-2~P&Kub@>^%O3Mi4qz>{((mO%4-my5U3m*!hd
z^7z{fJv82#gcKNbLCNzG^Mvifo^~WTZqE0jsa6ynxGfIjpl!8iAQGO1cA+Qxfy)%K
z<L6HTFCd}3QkTj>m!*@T3IR(h(e>fQMPWo#$4ikH!jD~9AS*-npw^;+W8;yH5HN6~
z#9TP!y%K;%r)$|Ov4xbo;r}8+IWb3D&X(|spuJmrrqLbtaABGBO*#<fTvdp%YnXs~
zn+-9KRBvqaQM_28l&BwJd3f*{A%uw&u79UqKV+=Dnp=^DG-J<<5@udpaAumctZFv`
z{}_TxweL*5jZ;1o=2D=P!ev9&pFYk`Zt+m@rsWYP`ry_)AfzCKZjC<TX9I=~l%WNv
zX{e)&;u1l~x{MtGOkh)bMt6CYl;Tg_O{h1&f!n`)!T(5VHFp%@Zj$WNT)I{K7TGFQ
z?Vm%+4<_GCACgXU%*VFu5=NCtVF94(tPeZ@wZ1+0^fnQ;=W_&F>|cNzNl@AoY)pPg
zp20~zW?yVtY1NnD08!7|ye6w(=AyFZ!S^)I)WeTaG+KWFjIqJA%*xfqD_z4?c}~V*
zqw+5J)!NU*+Ce@NFmntOn5S1_1Fv{D2M8Wi8)to^Gm$p#YvJMLk1r*7vTIU0rsPjM
zY2{-pRLRql;mEqv5+&7RRWtzP4<IHsN1`9?e(Nkix%WlMVTu9tH+RlqX+ZGffCFkw
zAuA4b=ea%;T<X<~=<5{RLVt+MOA$!yD~gC_26i#fHN=8C*lZq7r-5fXwz7083JnbS
z^9q%o&orVq&kfRFvvL<2q)X^}A2LQ)z>@ayC&lGBndju2^&)jDEE5dX<{1Sz<isW-
z7&sDQf6l2tIm^~uvry20+wRly9a{cN{`$OT$`6pbT4sGN(<(^PO%0%XcU*coR?nhV
z1?iZAPr~K_gJp#U)*PZI0QoVH^bDlv*|+-d*n4}E5n6_L-ZGRKSY}nY2A^v{lU^Cr
zo|9Jqlq{lpZxd)7<yT#nahh!pVP$v&vSQ_`jy>)(0N^g1dr<BQVl)2<C+vgOZPl<=
z=w-VS8>tJ)eTJm7Vm?x+mke1{C6*E=Nbbwm)x_))3E=E=y7ZCgi&!?NC4Sb~Hds(@
zCImz!oOu{w6_&=ah}qf2#c@q8&|u#Q5~Tv?%A#|~Z51Fh3B}1N-<tL$!r;#n`atAy
zvA+vSZqfl#_nRQFq}Dd2xhv7V<W1YY(dmAqs@+}_;>zH?IIcd^-b`D|tNLS(i7Blg
zk`3%b%_$T`k?xL~4MlDWJJ}F7VRN`1KR*VEPQRT6>cS4`#?Yk;P7bsD;6*NK>4rB0
zsx5r$ZL-IBInlJ>m5hDRQ9!-<epUwz44N;8QI2xO+ZIyLp%6@+nzpu)_|xg8+}wl<
zve~IeNjJ?;vY@F{UJfI11weZc2<2?6tQ{h{FThGd%IJ+;Y`q+)B8f})-DY)+EPt*U
z4vL;A6hybJ2Jrc-96`hsDqOjbKCMDnH=C#nmv1y`k$~vifctmxCieqt`tlAUC`+oz
zxu#PZ6c`gfN)d>+;qzujrWp%91-`M8S_>@F0ez3`{N72WQ>M#;7^Xa**eTFT2#-W|
z285rY-2)+%Ny}?e<~#%T^B_2|0O&r4cVM`YK$!Y5%4R|Wy$p_Aq-h!F>!~`2r^A04
z4bUA5P8C*m+JXi5j{(_Pe#+47Y;i`tAfjHu=kb)%%+gtQIC)EP^Ms~d(q)8pe*aD+
z!PZ3nQtY_DTcKJc6V1(S<fs2)Z4)_e(B%jLaX3L7fDuxyAJivoCQlKmLf31A0!YFj
zfdj`TyEy4zN{dH<=}C2xBQ%w&q@muR_t@d90x}fFCjs~t9|znEQnv~%*O#0oCOBbU
z{8RtdFK+h(oDv=7B^1v)c7&6Nl=t;SK{XiSgCUx4_adlY84T&p(u2rhUSqTbZ;$Nr
zF6#spp<~AX$r)M=qSCguMMo#ZjSQggL#(^-)s(b;e3~5-S@9~dxHR*yWVk(UMSd~A
z84)0ZI9cm=ZMrrVf@G-FOdhlC)w#8g@~r^S<T}s$c<z)<ENn_fWanCqjpUDKh)PRT
zRy;38&g*~?n?tdZ5LK3eob-uWDv!Nkcq^kI=0NxADF~%%essldGfzWD{4}D`#O;*h
zMKO76T|_V%p}1g>S-#i2ORQYTk_%W4HK~7|`&Yp0n;;;-4|sa6&UjeP8}0`tcTIqH
zsCVy&HwYbZsLM(QaM^TM!Q}J+&7afOeieY!eE`UKf6CdMNJaiJbgRZH@rt`7Lv}UX
z<zMsA4O*{wypD|7#3A++hG-7|c%}T}&o;AdN+z@4$hVCH6f|U$RHe;FV}0|Nl08YO
z;;uS%O1~r}P<23c3rxoPT8r<H@JJ{5NNMd?FE-U36?bh^aUUb_5P;-XMcl&Md)^Vg
z!}|i>ND!@ZG!8`=-rx(++~}FEigvD8iQ(KObn(~}2GQq&PzY?YbGd(qY>ga5@&@U|
zWk?%iPPBO1&N($e{8^d$&)0w1Uw;uF*}66N1FLH=V30n=1K0@jX0<M5SY1D`*u;J$
zkj9*O3p4d(rXfMegF`l+a^Dg_vgO3A+&MG-o&e>@6(lC1?Be<t(m#YHDb_4l9q_vd
zl$@o|L<|~eQ5qfHE($_MD2`h3=`rHg8ZSv*g*0Ui5{x6#1~WT>>?gidv$sJe%RNOJ
z?>ogG;WuQG{Kf997qK<_o>20fbaf*=f)pwmb&9<7s)fq+V^X>^P;o#t2k$#%KkjzD
zqDU}y$UOZK{^b@Z;uv|@c==a$G<tiSKMU+n{f|he@!ayinby&?*D2A|m6q(qS!?1o
zxKD8uweEjazQOqf{kb`tI9P{(w!y`=TC3?M8pX4Ac*~E{ZlWzQcul3f`UyncMzf*%
z$^gbvP|SVhYz(S|^of(0H=th`^2rB}Or6^w%O=lCA4=sw`{HHmjnIKVi}i>C#=>V4
z%PlgjL~;&8l78e&MB}gf?X`mylk}g1Ld{{%P*P*LrkAbecM)ag2Po98!&RKyHp+5D
zMf*a*ImOSkS6C9Nhm5E!)k|AgM@{YvKk#xi?}LA8d#{2A4)s{Au7i{)_8fL)a}NUN
zlbxGWc{tEQ(lkbxm{`XFGKY_H+2bU$!(sxsVVGT)pf0!&TkaWKm`H&H)=GpG-q}^!
zU1w9P{I!ip=6UiGi@)Jl&dxazooH&(6BJqxSLIc5GftdLM4qUwC9K^}bx^$_;Sd(e
zBqvofM=m0pE=}14Sx0xqL@eT-g)btUO&MK%M-;8O{tC&Ohb5TB*;4$nk5%Agc9U5n
z@QSPCe@Wlr#k#`o3g3p+1;L$aIA&4mlm5SRq=Pm%4yj!aZ&F36SmF_@d*4|z&+#H9
zD|)Kwi}TE**xFQluqAw#zj>Ui-lP{a(07z@_Yf<zBMN<Pr!rdRfuQV7F(^<*Gh|q=
zPGNiY8xWsbkEI0<YK<J>1c)%nLZ%{l)8A%x8^I>}L!ST)8cs%)CCU;5zm&4%dR+`4
zA*e9T`Iw)0p4*dlz9qz^bwUrxxV7LYNmqfiFx$+|Wq<QA_>zI&M!`N_u8ItYcOfm-
zB1r>nt&>r|DcQH>-h}NBB$KyWo8~1Uot9kZ$Eof+)Y>Ks)4EC*N3HCcy4b+0jpLlk
zcz$P>tiv1LYmVWo--oC`r_8Of;>CzmYS0z*H0)J_7`vwViX6C`btpCHb~H2b=KY?6
z&~iG$!tXCxA#im6Cua)i{@!IJM}HRHm?smlS>tL_g*Riy1i7I5)^XcWbK}uO@(!F=
z6TS)aqfKJi)nZ=s2u_Z;Pt5^7h_~3=5l_9TK8nE)Q;Y7|=1mvP<!Y!~Up|0Es|B=Q
z$}ylHuUvQd`Z2PX_knFb!>aSbJe1L#QT53v5-W1+j`2#|TI7#pW#qgP*u{^^rM4NP
zHAt!guKes`m%?%f@N@UiMlK>pkrm#`XIiS2M{U##=l*~n<@z7S-qV@QtJ=e+;Qyx3
z<WPd^+<pzw55kkViEh2j_R36O*ag<DfQTXO0)%4GFVLz6Yl+kbIwGpt2buZnt_L2~
zlN~YZ_#h?UPW0P+9i$kp(g6%6?bYCC|L35}SD8u}gxBJCN%nw2#Zqu8phs?cIsP!`
zUeRDR2#E*@jAUzd``n<t6QuN#cI}<4BpZ84aey^8^EhHkf<wi)rCxzv4?D1kXH@X@
zyG;z`BSd&b>?jLzGJCb*>zwLFRF9ahxVx(Fsd>eCD@F>ncY#^xS@RV0CC+pkJ4JLh
z3uvFo9?-F;it!(}u2M&<a<mAyle-3HD)e+TY=n>~u~w%Eo%!KT8#Ps07=gZ{{}{=<
zvnr;9W7Z`0!}~{7?&~JIzR~aaBqhB`QgD4==2A~|Ls7F?SzMR-i66D=vJ^9?3}^A&
zA>)q(_n^>D$r7q_g6l<b`+Uc=v{bPVI1l!61C9^tb;Vjng1d35NMn#g<J10xy{jnH
z<&x)V={-EA7wE6xX`Du&`f|e6gX=LsxB>m@F;0FKhAH`(evy9_3x#+~D=P<3npNvY
zwjiGzBZh@UR8A{G+5|r*5GBCY7kklE6#xp=+&#)~BEdI?J@Mvd6%igbD~3qT<UHBw
zKj!#&Xok6#g@$$i<Tmx8V@||eK=jy{xGTy04!?tl$!fsZp^d`+EzLY)_o(nP5SB`{
zl}}|H*W_f!M?N`vE#T(HKnrzznR7YJJ=p37W2%EJC})oYVk1LQUx+5G#D?1l#l)hv
z0_T%4gXtpljmZD|7pKz)>0Ti+@wz|Z%9=Ii3Z)=b*cpq1yhgkeXkv2PJ15P3FepBO
ztM_C@-H{|nV!Sb|Mzq18H@N>N=|wK%2sm<+6JjUeUN<ZtpO{A_WLCdhGkF1P;r5Rx
z+tPC4?VOWKV!#Q>2b#-p$wvtC)ztA0g*HuV^U;0V6#Mxcdd>)D;l}*m9cx4)l^&|2
zM(V(6)(?vCzpdoPb4Ukx-_UCtxBxl_&H<xFvT7Z}eAEjKq8C`?S*jrh)HVq&z3mSl
z&i+Kkkwgw3EC(X&<&8;K1L&6btG~eJpE$A{&RUcqOrT;W)O;WdEg@RH(>LAM8~&Rr
z;ORc|NV$I4H*G%A$aB<Ss!ssU!>-^{Uk`-f>eiPgmWel1TC*QERH(#QS@L<_B%@p8
zl75a0%_~P;+RP}cU~K^AcG<aZ$DEBnPdzG4Uwl+p5f^#O7*g>pIP*(>tq}zugrsJd
zC6{iQ;1?a+v?Uw@duCl>s*XJQv~OaTmMeNq7O4T{gN?p<vOMF%hv_qfN{xJgxY0iJ
zdn=oyhgTDxGOlzBKnZG|;aHVy`%*jZ#=;Le9>*b_N6yGUw-(N%1jR&|LF_!RVaV~U
zWnzII0IrK!L;VI~4|O8M@=HS}iGo~q;m4-jlW^K$=yo4CUN3^F<%wboBqa0F>zD5^
zr?6bc+$esQlc``=Al*^XD{#4Ra5N(*)cZlx>j}-fD?`nXXXn|TxqxSgslRhnJ(}Ku
zRomqkq!V;BF>^4)Zh!@oJriwhT=pp&`?B_idqNdyaKu2JClE_=cr6}z>b1puu>LQD
z`o0P;I^AI+t}$;JTejyP`mAwS(kFOM&wY8rN!lN6hsHTL$7)XH6HbZhIs(3Td8vG@
zEaYR3H5Jnpt@G?72(slN4m2mtJUz!V_ik8sdlUWHNB}+-s@pm97dL5029AoQP*KO~
zhvGJ(7n}%=|2);t4%7O@3gPGh+oWOb?1YbgHjv=fHWl=Qcah5>CVj`|6Fq))MQ}x_
zp4#XeZEjHyf_FAw=`n$%fTs_$*9FQKGZ!1bZnGnI_+Xh__b?I^oD+2$k<M`)u<@<w
zO}4!di}r<nOu`?tB!32qxF<J}-JQtc)+dOW{BJJxTt~>g3}b;{H-t1>`GMS(ZJOU*
z)V{F`m(ILIiP`_x!hIas*TW^ftWl^2CsNr059pP6K*3RxY+Q7t{c()I-0c6kN?X{&
z-cjrK5niMh!DI|_=*0v`oua3Qy=fy`b%xu{vn!pv9Butz@uvMJ6tl^XFejtORSa8>
zkuWv9>nZ^a;eF!IsFIo#o`;reS<n;=!$99i#7wuNsa55a+-MdL<Ca{nBu@DL%-RAu
z&h4c!7g@+Mq{YahR`_N=YW3z+aCiPK1FWt>NgFz^!^vC0Js&qW0cyem|H_F!$-!5x
zsXjeR$eLhnYXY?2G)M_C8Swdwgt+L^g}|v)dGSc}#@+vW9B}VA2k|!HZ0$jDn51zo
zn2q)`78|JV&1<ksBK7r-el&BZAM<gk&&TPQ^s;9WuwQ{`ID5G)f0`75`_wKL1KRf!
z<bMU`&I_}S&fETAy&`BD=fflHQ}}1Z<CS+<Z+nAD)X=MkjRweL2>11pW`K?mBUFiK
zH+(@DLWSg!;`WR8(LlV~N^7E0LF~9E#~Ip1`%Q;!dEoVKj~dGOgtzuGXw}N(Pfb8T
z=n=(HL@1=y4^BiOf2B<s@9V>v@DF;*>iXT5ezWR~B*MKsVdU$+`sX1=K?z}YXL@C7
zDh!|6aYueC3mjjPB$fT)>CDXXqEg=tCMKAT{d2GH6&`Nfv2F{l>euqw-xfDRSKY%{
zC3+B9Eta+~zemo+XEtFmy71-v1-i{lmB{;qJLsGd!3<Oh*!xg;KmAS}T1Q+?D!lM`
zuY%jm1SQ7=pBin~fR)Hs2;{%ZSODHiwtn?sq{CmMqkbuA=M#l2>edh6l1YC;T$&Ml
z8oP^_2E4Avi{X!@wiWfEDkL0lVXhX(Lrl4>{AA3&%E0TvAxs_Jq&*xrq{f0`5PS<@
z>6p7ZPaO!UWW1Y4i#zo#)>ICgDtHT)D@_p*1kR~`vc_eWC5|37i@0KXY)qGBR+>4@
zCrEQ;F>~zH!=xAphrVuKJ{qpTl0xG`ekyQ1u7~2H#C5~$&fb#KoQ@wsi`BU6gZX3;
zjMp-kq5iZ4vY9hD9*PMaRo2+m`^Gcl##Xwbx6U$ShpjkK)K>3k*ss;|^?^`X5FLD;
zCb|K9FDNPilBL?FEURr#AZ)Cd;w_eLXK7u*@SH=nVdoA8rc5!Ktu5ax5Ft5Qpc?iZ
zZn26j%ECc=XC^8jBuGq;*CLJHwo9Kt)I0~+ZjaVrMzz-=lnpfp3O0*q#QY-LU>mMx
ztBUK`6MaMB!`(4i22iPXwKab6wjXrqb0Jkxw&BY%3oL*Xl;sijo4~0O$$GXVd)55g
zUdXOzi6O=;O9C<yqr6b7T0fNC6RHB}HtNr6J{HHTti+4`bOlP!f(q;3I&MPAxw8HJ
z^JOVvpi~m<naI36k~D#bC3~$99xywpeq+k>AI9egVn0lJKPl&qe7rNnIOHlgS7(t}
z(Ko=WVvMgvCF{~g`z_d3vn{$F&k>q%y)-i8{RudS0OH5wG;+T!P;W{@=e6TdzArw~
zc+VT%&Wf&kb!hgmF_?1KceIP5_wyI(V~c$eXi5u)h9a9gsPyMlnk_6rYT-ihIN{)~
zKDL2K)#EC;u#YT4X+c_0=|<sA<Xssj+dkZE!*19XLW&zS8M_c=WQ|S}qoV4Tc_OCA
zGJT8kcvR^v6}-KN5$n29!Ap;M6n3Mwt%wsV;*qOPAkOsyM4Y<+e(#}ytQ917F1Ie(
zH{r$;dGp#HVWnKC<-15a2Taj8uedB_zL|vi6qpz8rW7|F9=0(K-f3k3F+k40rs@!)
zny}=Z&1neEJDNctWtH3D^KD@h%Eo>(gdPv&GokD5)PQzTY%%b{`s-EjMuR`*6<<G>
zGE<Z(iR;FQuT-%>)TUPFo(SQh((VjY{xAF5MFP(=C3&#0i3{i)0P>Jc&dLzi#_Pny
z7cu7{_UZvjGe|MTU`)s*SnyPG?NRwO%cTchLt~DNreN2Pbvs>Of;;O=T;L7wqcLfh
z5l3&>wx)Urt{$XGx7&xeX;{Xs21-%DZTHeT>!hHVud802(RoYEYcn<M<~bm)lJUig
zgGLbIi+oGBHpkk=bE^_KR$pxXX(d#Nv3(*AoJ&-PLCa<U&Uv7L#seZN_6$b=)?qwF
z&jw}7L8eo>6kW}NA7w!xm_aY=>E511G-x`5NESw&KDx6yIUe*%K>Bz<!+>_^-4=c0
z>y88NpQ<F23`tczQ^0p{JVV9*KEn3Z=TcPDaEB1bkbDW8u_wAT4Fca4Rde}^;dhg0
z`|$`~-dM-dmU$yL9fe4=M!zmvHFX`86QYKWY`?ld&1|fp3TFW{*>A+|XJ)qHkKm)&
z{r+T(2m0Z$3_05Z{uIHKwq-X_)j1c{3A^iQP*AyXJoJrXI52X_ZJm*XUNTdXB3eYh
zWK7tqw7@lD-{C`GwPM<7Xy-OJSJ#*B)~>UY)<lgn-sm%O_=Lo{hiNPuEwv_BtdM<5
z|CgN@HW?<{p6W=p?3++X$3M#fL+(4AH-iUFaM?JJSW!rQg`(c12QmZ{W*Lv`<oncp
z_pimF^p@PLI*w$sg6Ua%Qd=Xy=N)qDLg5($$xH?6Dft;ea)F5pQ0N?S7|t7}>VKe3
zPf%uw39RR_SkyOURJ7crEBD8aZe~0KJ9h{v8K%gM)RRj4c!wV-!d{|ud-#NV4tTAp
z$OEg8!0LF&VTxLrkz#C?`3HUq;#rDyC_CogD|yRP`9kJP;R<Q<uAqd(w?DULR9#&_
z&&|FCNJ;yTY22xj8zQR@sxj2}n^U?n_`y<(jxziPCV4q>^cX?f5^=FAs!5~_f?d-_
z(@L82Rk$41<MMVe5BXViP3hE8BkmfH{!L>cP0g9SE|-U?qSI&a5}8e{5G?*+_E!3i
zmdWFRI2!91&hgMwFu1;?i?Eek8NR=~^CA1~W!I>mf`UfFf-8<&z+ddmw_ZeL5)CHb
z4JT!6L=x$#@HBADIg|}p@UKj+NkI~P$SXJjc_eR~l{8Yo0o8o3WDc&YuGx$Jj%88B
zvY$b@etH2&rLV+XK=DfFOw$9;CD9CVbh0W!eEp@;;K$-tV0mCW&!G<98z_c7r?eRv
zH)0(25|UM-|C>KaLPZLl<mOhCD0PE!SJ#C+CZ}m8b$^!_rX*Z%4^ZIwMG$jF?1kC(
zx0JeP)xe0+qVy-6EJ-T{mhLL=osT2Pj}(|?Nf$21?<CgPicH5wErc$!fl`gosnyHY
zV^4oTQ<mr_mvxp{?8xgZ0bK-2>)g1$>(&Yi8y88qDFQDI^v!p5KqTvFNi1FeH1atc
zlq8&;Y)v8MgdDMf{Jak^FgmJadWMoF<(@rWd0YdbbY1WH@YA!wxSAsya0KAg1MnVJ
zW1!KNc8da!50~bI-Zesk8Mn1BaskFMXRb<2g>O{Tye;J@i(5n|m4CQF+5A~aI1D-_
zix>E<GDk*c0ql{DU0mFFxudJXmY_;)?%e;L2b>xES=^M0R+r-sR#u-IDiR1A#69T!
zFE&a6*i|1qq|jXCH}6shF8i2pD<pVYFc6k&@no^Nx<EmcRg;_G2=El_l$A~doVe=@
z#A_&Ips26Q|Ff$i#iy|KYwEir>$JNLB%LJr3nYo>?LP9JT3No2Pyhe`1Ecw+G)7R1
z%{+e}kkfN;m(g@^T(BCS4Z-JPE-JPHYb9?L+hNBeZSn)JY$LNH*C8Wy7Sti8V_jh$
zL}ZCZ$2fdHXI#LMCs%^c*c@##vO5!i$|c&8Ja1xVRG>)wMD&quH(Rr4*cwCb(x=9k
z?-iA6xtEq)4>pD(I8egQNx6Z~;C}*Bbn)dvY83(>3ihAJz4<oA7nH|P8K1xBca!Q2
zcCG3zMUzSe;+Tc)%`qDc*+wiI-jl~^n)lB6rCl^x*Xf?w_6|?@XvHTv{F;GH_tY9<
zOADrC(nz4)+&V;eX;gpp6+^zNM$LG?Epw~`f!h}H;ZWMs$dMZwxP#CZbprjQ5-8ma
z5EJmDJP&nvpC!<<Yyo}9`UZ{a_4G1AvjiV)J;NIt^fsQtC!^2T>~r9y5r)1x!X_70
zkRrFJ(FGR-kFHptXzrOe0<f6H9okLhWnE022FW)6XIU$vn!b6Jvg}=Fk=h8>MK5fd
z9r%#?otPi*sF17}?&zO5RUyq=;lK+MZdGW}2XG?v`pj?g<ANYfZibC=&j7A~C+4=?
z4OH++7WxeDu!Ia;(3&c?zz%cJ4+maKkS#=+SX(!e+5L?&``Nk_)uC6)_01&V&dI;e
z!8wbP;g`{FfFHrV-hH$)4)EDEr^n|q^2Qy@w_r2co_@8b+k;j2vjz8KoX(P!#y<wk
zN5^X#tGh3UAb?aB<V3s1XngN~i*jmo-?NH--ywq&!1kb~tMuK{8~pqhv|{il9_}46
z4f~FaKy>F(%@;k;D&e@{ZbHO0nz=AwBIBI!zKxf=DGYP~b#|3-66Hzmln;Rr@};5k
zGQme$H=Z?cQ-53$+CP70rsFi{@wNLc875v*Uav(e?eiZyA{bmIJkWLMDzaOHIx_lB
z-5mwvSjac=Cjr+QDxT(|D5&)JC~ttrg0$+Yv{q^-s0V#QbqGhVpDmqmX=Ia@zU;`i
zJ_@OXHZ#}wix*WUS1_k*`h}(qL=3ll1&q0#{C;|Tv^K|AOe1Pj&xg=FhRB{i(j_Rd
zNKk03EavJ<k2yr2f6}=4&UtEIK7RxfBrkrQgYAxP3cr_krI+gn&DaOI5+(wuVPa4(
z^~s<uD@T&<7zCAUCo;%{Nk6?YbtH;-=Tz)LGK{Ezmil8*en$y(V4pQB0DLYC0&lp!
zZ%{NX)nmurMz7N1F2`8IP`JezqpgckyKQaR626k&jO!$ecFJ006-m$B5uSZ~VHKer
z3eY&85eJ^Q&zG}Y($2915~1zompotw90k$7Is=-1sn8rWlsO(?s@1)0B^iz4{ynCf
z+9dM0bl`rXV9B|VX1D(Xj$f8@V(!X{yk8N2XHdGU{zAq8jt>IbolPSU(VtWoRz{_h
zYE`7B^F*uNQcJr6L%g;mBSOxmF{~&Lo506a19&PaPue~yiFXd`isR#=J%@_-P8(b3
z8zx|0zM>Lx&L&8#bQTg-%9lKlUpYNUEsuXhFE(w+9)-;rQwqw$C~(C}Dlz4b(c#3Y
z`8Ye38#8g@;B)CPp%j}3&XB#=2JI|M>6gl%alXc`X59wk!g%l~Vicx-zDRmsPBI0D
zog{+BKWQIYrT83K{?^I*7a?;-Q1hg0aHR6Y<o(2+M%x)I%<9gK!BP2m#a&ulGz}yX
z4;Run0nDfWI}_`rQnYfPIMAq&b|lTehL1ZiPu}5rdC0cOOP6`Hjb?ePlTxJ^lRbD1
zDjTIz!KAs4fEQCKSjWK+UQUQ<j#)CPe#a0Mk(Cg(15?#!{bg5Ajkm%V%8!=}#bht6
zdZ6r({~UjnQX^ra=^w{X=<Bo$_{@ZZvBB0t;i+AZrL7e@5{}ku>#?cBBORTzQvF!Z
zM_jcpnqHJRqz{$X{Af|+^pE#Jn_CvSJUN;@iE&)U1K3Mi^{I?aNAc<wAB<SU-ABKn
zTkI!vSla4xi=`IZj8cX-Y!#UKq}D|LC=f_oN!53=VXb}MuMDXt#q>KG_MlbE!OXRr
znr9}CLvvF35M!}7IZh!((au{D5LSvGnFqG|GeF~26o^N@rFxG=xKL3D+rmP7wO%J%
zkk&K2vLID^-Z(Tn2d_7Z{+es6$j8@tNwhJsUmrvDMG=^Uo4E4;`G7gcfDF-bA*wWJ
zvHp*RFNEhs&s=dz9z@E94tL;wOT%*q?33G1bG1*Q3cHCo#Q5pb(V7}zf7W5jaeUer
z=#U2FxW;^$nhp+w3NQwh@7+B{^iaZR))FKdZTzSfI{+j)KViyVf_)e%?UUH?p13`(
z8oRAdZ>7)%)U=c?KarBVJQ+$|l+q#uq+8GyRVn~wBP-}Bvy55jf7!|Ga-N;-d}`oV
zm3D3UCKsI*L1#wxyj!yPRKd%Gd;hDVys4JLL?O1bE&i2FaiL$P-l$e*O_nYzO!^*!
zI-NIkg|8?VEdXsdm3Ui+*9ClE*EMW~UuqJ1c%PdZzD6=-yr$m5BdRJWBJ7-$<5XTT
z?@E=F+fSjBqVZzO+hQO9hX7{|jgfdq-|_L!e<WoG_3`LE$C{R1UWohJvVEu2sk!QJ
z;|8UZ3vtw!N%d|t^ShM6G3H{91=Lgmx)a2ShPQoE=T+1o?<E`Z;3z)FalOojFy0vA
z_lrYaHRP5D*4E~HLfb+8gYHCqk&08WS{Tg=?-|hUidF79hk;J4!7BFN9NzzltUrl<
zvN>KkpU_X83YkbRYzBHA4yFS5&8Y7MF)yz~K#R(1vi>Ts%)t6z^j(CHL=2;n?{|CV
z{K`G9qdrg(v!6R2U%}*wG)L3V-b54n=Ho7>L)^qy(AQWUS<TI=DbV*Efpx$5llz{i
z8Wmq)kcnw0<6M73u8--l-Kq>IYP`|}ds-~A0wKB7bsO(zBZRfjqTvv@yK`w1M4Q^+
zTTUL4R68W%37;4zk%Gtf6f(Cv?6B8{R;43@X;wurqc)^eGtkPbLD;Czb}Y|q^H0P^
zroJ=kN+Z^gh1l2enl0c<Sc6eOnHw+FJPT2`a+b<G!~{UL*N+;W>}`(UoWFG$TxC(8
zrgnd%I&ViMvWnTuV9F9Om28r;qLlVeAfmEZ_X6~fu#nY3tcF}H^T&xa!4SMww9c`k
z_u1J8YaiV(HZoa->oi;2&`EJ^krRG9{mB%25Eto`qEZS>j`t$9)MV{EfZd3EfTXlv
zAyYpJ_;glw6n)eoDF*`~Ro~-Gy)*rCujoB_-e;1F5m@jQC}h9qMiMrS@1=BgxRHej
z&jyF__+lgXjx{kxI*OTVb@%l>X#U+YP`$+be_v$?heFumOMvI|#tx;Y_>SJm9gp^<
zK^RJrv%EKiSH&6M23>uUlGeeA4j^sd{V9HXCfQiWV2Z{>%Ox#E5XWv>bJLpfVnyZ~
zOz#poPI1MgBeL8mI?N49S$a<y$3K&=se7)D(km=T))D>Iabs%{hcLJV3}NJ*2X>XC
zzIsWVyQ^)fA{#nzAaz$5qTY=iPtAwDZJC?rPo)$?QzUch-YX<@F6}E}ekuO!7rj4@
zS{U}Afmz2dZp=WuU<w`}{VYbp<Ab`Kv%8~?rm(ZzT^-(=T94_N5a30&7E_AxsynUo
zWq!j$0PK}#Cn&o)03ipYRVOV<2EB@=P|q{fO58llx)fYu<FJOhQCR<h$`O?}LnW!S
zryP;2bTiqRxzYPy5RqJe7?Cf6b|FQva8h|J6MG+^-Cllm&I%EIlT^JIy|5GZ#{*><
zzZ&&W0sY);lMrQ%5C|`EMK6KFbU^CokODgcatDB=`=gF==;6DXxy?g9C!h=h7~G+%
z1FB~sG*<N}{HZypi(_`HVtg)RQlGEg<+TR;yWWNm!;P#NGpIfoHv}=f5QoNDTZn$7
zF1;LmFJ;jPsPMSR7y^MqYTu^KL33qP!)bpppN2VCovFf1rzN~B7Xhb;$m8P13aGgB
zcDMfDM4i>|fPjj`_x%}UqmacG6yJ$Bdi0rtxZ+o<nrY7LVm!5yu6xv<b!LBD8P$J!
zqRU-$F{aLco&ufkYY;ojn~mCDOb(db!F_JQ4^l$m^e%NsdH-h?Jh4;r6$;{o@WT-(
zX1_4Zpc8-?pkgj2Hq~=ewb))Xm5$oLlL=8J74u~j&6(_TT=0$4l?Hc{Vnf3_(KnUl
zL;U~b>;8S!&uW0$JuVSVY*HUUj=VrUG+!e`rYRS_BNFwFcF+U;z5BTaIS&c3n3DI2
z!2W<%QR}s<UnJ-i(yF+R!-85G?<mCf`<4<7BF`GsvgC&0u6<2=OrM?-OyX0X<+#TM
zeEVLG$#0)CqH!NPkCwb;dh-IZGScQcwn-vZ@M)Vc&V^zXBb(>G_boWtHkB;_#ak28
zDVqiHtlcKQS67FkE3U45Fpgo_JBA`pQSt6nMu;$U2^Ze?rhiggQcm4NEUkXML5O!}
zJUlAz%wZ{lzH6329lRc?e;WdV;6WXY^S|HwK@A5xpEQWVIY$gilK5-rDQ7fB3_Q>t
zh6r*tEM`?n76eu2O_-v3=C#>iWsqyUWjt9Ove6Tw2Ive`Tiw9C4B&OzK1vdblF_d`
zMKk~b?q~;50Y%iJL<=q_9K8RP1ttmr*k(5J^g(C_VXNf@Q0&JtGuW>RZ>R&%=$<_+
zVNe>^y_vj5w7);rwj&QNl$0V>2l1)rHK<>9Xy_J-f?#p=pXQ!sRlWsy9J3JgYsZux
z-U7rG#eN8Boq?E_a-WMHzZYK&z$q3<cU8V-?7y)gI1$mUKb0X|pPma9hrikcsdKnd
z#uio4kJ6ub%fb$fv?vWs2NVnO=>b~L-%Q40%;g%#LP-wH*UfG2muBe65Lh6Lc^_qK
zCO0j$+&SWH1%qhV&jo@ZQPM~2b$^0b0ZIGu@Ocy&oy=*{>JYVlbC|vReG(24<6{kc
z=TNwT-=uW;-idt%15yd*5GLBeX;X$zB08Tg*i#^q1tX9L(1!-@S<N2^naUk2PIUF8
z2FN?Ud%<NAY{q*pWQte~G~ie|aZd|0{&`6%Dw(oxw-P3+9|Ex)w6SZ=%?1r5-J1=3
z#;U%~0bIMGVGBkk^5L>7>4l<1qdKDEi9%m^1%!+Tlpif-?1=x%P5!4ia;e+Ch)aUC
z`5AhqVk;`$Cw;K|zwfBR$ZXfJK>S7CFn^1TOawHTOwA!Ga`1{)D2s-IA<$^eP#doD
z*uQe6BcOt37U-0w`jR~bpA#kJpU#kOgeaR{mapxDM|I}}WM+M9D^xxl{ARWsJYlH7
zK3OL-c@DSirsLhiY{_CXw~Q@tf;_X-f){dqrpUOPu5FC|73VAO$Ww7!>zMfV8_`(@
z-?m46muWHmyK7_}o#GF8)iB%h)ah1@0uohXR8xCnN}*oIe<eJ*s!vnowHp1R)OK(#
zFK`KTpW;N%soK5Z7rnY9FJtoU?q44#(WX~}6tbs}^MvGpW=l(qMAHzDk>}x3z>GL*
zsRN7#S4(vWKiu5(9}`uZW6BtIClv7-z|c@J-E?@_oI%@O40o)gEkytw&4oZn;Gm8M
zqpks-WE;ATV!ASQGG&7OlkSf+JpgkaSbt9^LH4>#+nGEddKOY<-H`L`^Y}!*bgTlO
z0~U;cg}@)>n6X=?O_k3|jGc4mX{aS1$g*k(t<)3(Eq<xLihea1Z;E+KdD5Ao?!*dK
z!A%FM&8n&%<B%LR?tVMxqD%Eg1SsVvLduAxknp_Ig9r_s;OG+9c_CV5bcgyd+4J@t
zeta_?K-9scah#5&etf^=i06F?Us+eZy%Y;98af<ov!9Wnv2_YOV}*ow?ScCsAv8jz
zBX0x3-|<7?)B;ZkR83JL&S^;8W4$2m;DT}yDWTD&^@LdU)6z^|pu1TwHTFO7Ut)r_
zz6q?E<!t~r#}`v7V>rU4ED96?&A3C7duH;OVM#1LX=ro)jI3%(K3AJNui1(1<SGEA
zHAjlt{X?Ms;YNy~)63=$At-=HeD%N}P8;-{+Oe&@;6f_jUyQ}B9sSbNtwHSXBayTP
zLO4bV`3KJXt4a%nGi+{vMr$|*{ouohb)^>Bu59WE#jZ^3RxL$f7f4c^jY5Mm`Y$!a
zd9ZL0OzQoO&>z}4<=4D~n_GkU<GB}nA|{&Td9Ex1;HF+zEu=P7o5{E<o;PG)OQLx}
z>ApiL6WqMKsB51(&5<uB0mq4fLd(8z-Z}%mq{V<zFG}u0(UhKiX1xL5taAYw!-uPB
z@Sd%x29@NYtuIAR2AJfxFS5c21%;D?Z#oM+FTRKIZ@ek&%ezRKD_93^yGeq1i5k;z
z$Q4Y({b74*ycIw`H3J56Ve0qI6i2L#>@3IbOew@L<ix3hkr_%P)(iweiRx7(Xdtg|
zCAOoGu%|vDms8h`g`LTJ^ExyR&Uz44QV3daAEP_{_+02Tvj$PaZgi42CzZudz2Uq8
zOoTK5i)k%29E0;NFF?5yyRW$1me8@d+RZUEfo?p;9m=$UxINzyfRKhf5uc?p&A&hE
zaG8xU5!n;cRe|MhY776{^9Uen6vlyq79!5dpoA%Z&pH`LS?fVj;aCbFzs+l^iX<ry
zfeCyA=3D$#tZBt4J-li=Yfph=SlRz#w4V?fXEhdQ;ea6CZUU|pV;^7y4&4?}g3Yz_
z(2vL=U+&UH0HUEA=>K26Uu;v)z1=T#b)};n(h@n&<_kF(MPo|M%2cjEq=PrQl)N0+
z7`xy_f!ZGdeO~86hwM~;Od5Z^LYrEsU1vV}YmcAK(OI9045${yr8!xTQfotG<Maju
zW@}NL2ju=rnH*$!k&xD_H;mZzt*USebXQvYgC^Ah=+KGRiOHGEDTO{<eGuLJY@@-{
z4TadkV~!5Zko_FnMo||z#e*HboFmg21)s6M<8fgrG!A#yzz*LwV(FnF70)eZF+$$Z
z7%1i+!^(~Y$BykT(JFU}<ZIzredx(iCNfOD1y<_}={FKR6=V4Y%^XhGw)X$=bWH1!
zYPFp?gr;e5bFo9-$Xf9s3JvzS3RDF9et$(t;Nti%W2N#}LqG5a1F;PSU>HBW&fT;x
z>bK(vItZIs@OJd&2b*XL%z~$Zgu<lui`*ufIAJD1J<rn?1d0$cf4Pp_i1DzgTAd?L
zA-?d6Tbc91zF4cMI%GxMR@ZB<)L2aU#6df5wvYT>a^9AOGoXC%sw8~GK@Jf<XldaW
z(`vp8=zX|)z{KYY8aYWrLKG$X_HG4;xiqqk%No!d%@h?Ir}QB8lg6gb?w~fs%j7LJ
zLM23`x1eBd&pDlkf3m<{m`)p0u@B<GF|BcT=-W*afxX*6Ht2{~MC>j34s^Aj#zF^$
zEnJ8*tGv-%q9ga(?rZ3k>%4+7lzh^mN%ky-L&lMG0<r=^DIr(r^E={V?SvE|vYkGt
z9`4R{hcsi18+2@;n<>?wnh9H(N2uK4L8tm)Tg3^9|LtauoN%+cl2`WqaEduS^uNx$
zzheUVnH{<N4yv22>1VmS!s~*eU*a%6wO4hi4Fq{GG$^MJWQP8u`aBJJkyU1&fhJ$3
z;jG2;-?bb9ZI~rYRJrOc>q*Ya8Y5Zl+8|a3Cbi!QWmB#gT}`|f;t?!w7)+OIMu8`E
z`gau!Xkffl8docx?q*f(`uzuzaQ|*0*23{Xp~nG`u=)j8xZHEG0GbrI4*m}-to>}B
zu{Di3B$|f$k!u%jLtpFkQgs!Pdv@XO9NPV2Lj}C!K?Y}t)G?6TPiX)j4-4d{v3^Y{
z_HQR2LEg~E;{s@vnz_X6Nvk#~jkT_YXCIQ?hl)kIfzrtIbfvs%KE~&buMwTb$ackX
z<$ZwW6PS}_EUK~fB-3_1+ywZqQfEc2IfFZCt?J#8%>>~IlJjkdEcNMcnwD*e{CIq7
z_r68Gr|%U`VzAX<ztWrL;iW24J~_D+Wc&dsj$@U$pf-G$;<Mv2b5sse$cSC&lsi99
zM-il#O7}##NnBy&jwP3Z^>UdV{G!=)<KW5LW1riW7E6>9>BaI<INF)0lml-EQL1O6
zzTQ?k4~sv2)ZiJ6n5ol-wq@xKTa=hpWf*S;oIRCwc%f)(+qK(%n_kABTN0zf20sL1
zToqco>BW1ve4XT8Nj<lQ6Th?PjFsNoWWte&?C=nAWqp@Pa+MqAjU)b6T?TMgMR8sa
z{TD@~tWvqS<yv$-n3ZT=KYVNfPANn=4bg5yO;JL8oKA*6m5!0tDq31(S>icXPA$#=
zz2j*mX`|yUeokrtPX2RrC$j0{_4DnY9ZaqY(0J;_N|UlAiJZd|a18_q!eA{!M7j55
zr*C}TxbxpfVP}!1vV6Kco&OoEQ;G_=3k$c|9(^xIBV>r(?1{NOZ$F2%8SUj7jQ^56
zpWeCM2;x;6DYvrjy<Bi=-oeLjZpsf$pg2!33IiTzqqm)PA~jcm!cE2FZ6}##x!#^4
zk&y*me3-<O!VRiqsWAY-$osU%#l1Veyt;->q^0Bk)(<xe*}#t8Z=(&UH^c~0pd}$&
z=#(t>PEQR=k7)J;3b!2wJ97XFbV|>!*UxL>KK=3v`+YC`-#OuKEt2ra9uWv?43HA=
zUzL=-p_<}mn?5CCv&i7~WWQee^I%y?TbMvue;`4CAVdXU@Y}lsX8WL@&9adY6@5La
zVi~tFnu_7VwfY_?PN0drI~dG&?Dpdga{6e6eke1zK5BkpXnHH-cc%!RQNxV(4p@>;
z6i`pRAMiEs<YRhU{So$WgYnE}3R^MYEz~OmG_R#+R5-yccf=V2_xsEA)RxKkv28Yo
zhqZ<o3B}!GzBJkz%UYel@TovJ88gMcT8jF?vag2}zUm1!@Ot9eQoLl5LD%67JHj`V
zHKd`40P>X1^egTpPGWVC(?}?+dek$g8#<sjGN!(#tqN?6R4QFl1F*ee!_~y8O!uxa
zHHU%|>O4Fg(rtDboVaR~ZJcl2_H<rmSL`Pp_TUzBTyl5r&@R|DQ|7mSnnIxKDXa~1
z9J&CEJSeAf*_an*mNIz_{Wn(<%nGhE-syVfOuCJD^_QRy+z<{GbMxY!+}m*9j}yXP
zFsoQTm@^w3vTONrdJK4?NPOm6S3K!_`&k3CFvYp!DB0_fT9w;K(ZmY$>l&~4kXQ3z
zx+yzcKzpdZmxzMpzD_bIxQ2!9wvBb8S88wC1@IeUb$LmoFoD3O!?L%TdI$E&c{9^@
zzHziQvv|R6srqLO7dhwK!i`I%OixhLCE_QZ56$HPl_0svB9VNWrgf4gl<vtFvj-Im
zpFAs>uNcZD{xbzadzxAA?*IZna0Dz6>A1IQl;T&4N6v<zH|?J?Yd^}M`O&-pKR0Bm
zh|J`x(xL@ig3vTnsB<YcN&(anKTaB{(mW&A$do=1JPI2Qk<eQCC{i9^Gj7sd8D+{U
z{GT|(<Po()8G2xwPdV5Y!HVq*bEtVKMe_;kZ|dG%Z00egrW|?`FLqkpvw1eOXLD@!
zvu+MCy*=6s_#9t2((<3!PNj$p(PU6EUt6H&5QvGYANkgHt-|FB@~qXpvSiTpO_@Ah
z*c%aM;Gtohn@R?9sc&w%fQ46D<<o;O3?RXdh1<6j?#4;7c0<>-aV9hX;~y@hFZa>{
z{R@om=`OU|t*#wQA4nnbsPz!)GtfLnbrt~pHUN)&KREN?eVcBgF;zpf9nkT?xd=y~
zQ6vhXv!^&*9g1ybQg@P1j9>?0J(mMM%U^S-{BiqVIdOG0kobwfnVO3HW}*$?69&d#
zEJ%sEn&?$k|6E9wqYaY{M9Q7)#D)>!V>v4~gHw0)kPz7gQL!Wybgv5xC))lvaEVd)
zMmKq1Eo&+r!tI(MmxPwCOQCHzVQdN>y2C$SiKLE9ZN5hqAhZVsD=dJAyL-D0F1kRw
zy03S*Rv)#D-AFmu6WoA(@iTyG!8n=aBNa7jwVaMfwjujSJp?2$Y~TZ{Sp$;V<fxLn
zfI)B7^Jv`eM53f4Ctt=v6nax?i3M``h(TH*VxdNd)<i}PEfl{QWb`|ET3{GaMv9d0
zM}0bsQ?{`YiK8#gb+i85IO!Oa%S&)D`nr`IN$dK%bX#zboOrlF^UYx$#O;PR+>o`~
zeN-{pIENUqZK(05^@=#b=pBL#r{j5TOmbGq1;kww779GHP@Zawr2|wMok85NAiOvA
zH3=$`37IG%Q!d)}&v@||k6#0P`w!ted2&RQ7kaA_3{YmEH_v;nQ21UPYb2F@D&Sn{
zqW_-OmtVNyZ?W&ve3G?Z1<e{OG!i!uCA%^T+cc;CX^T{?(&8{TyXt7n+!eevBN%s(
zLq6RJi$S$W>&YI+Gim&+O2X$AyOo@UnSm$=8^~$ummH2HvnXK6SI)=tEf*^I8^JfU
z2kTVLYkCDUVANSzPS^vd;-<~~_U6@nu+xaZ4{q&)++xAsD}B;~{^|$#CVh+2h~#yZ
zOrNnVznz&F?x|t71E=9u&?|5WMVQmxDQXC?wFFD)x$9g>+6A>5%f4ie(W6Tq{B#(Z
zxruM|4NMd3srtOi###f_Cgk5~sf(NT_KNC8eWmR7f?<}emg1kBgs+9n0-bT19BcsP
z+E*D#O{);2HmA(iM=mWOVx!!ble|gU37eVch?`v=k@k8Sdh}};NO-n2udvpQWa25J
zN^V}HyU$Yn{rE_6=?2gnOn|bgw{Gg+4*<LQN+mUCMeG7ZAiC;i9y*`{nY&9P6d53t
z<7fBJh%|8P7yJBg?qpG%%x9ZlhvgEZn-qjYoB#nQF(A1F?7_nMq#S_-t1(_?jH0`z
ze_mL0%un6n3lCpc$jOa!@xR%o{i)C%>6k?kUP8zu|F%1zwM~(Nw*3D{w5LzLCytXE
zfOunyHE;%yHFwlz-#ac%=2{T=QZ7_7H=>4j%?BB}5z?g3dq5veBKL_xBbA81_t)b$
ztKq!gmv@bOOl%I>onlc8CAKgfBF!94bWCh*AbVHAC+-$2SjT^a=#;i}g|-p>Wu3BY
zAr@(;(jmdM8J4mrW>qK$xA0*~+wxTj+-nJ3kIh)0dh6#CF^J^-2ij{cd68)<;a{J#
z*39*r)nRGvUJu>`K6%Q44v$)eKc3{?aMp&QKy|pP0Cgi6k4*bKHTMv}m;OI5Uu!;~
za*oN=-XDFDlido?92T;+t?-`_NzRqe+zcUTc~{drE_S>W^LHFfm!$r*9EqAIjqKA5
z#!<l423a5fWf}+XYbEjM>#kUFm~jhu@F5rgNag^UtPH~R6~bl^>OAkrbRSy5H4R7V
zEQiErn_n>o+6pzpkCS_v12M&L&ti3GBD~&a3ncDOs1$CnxD|osfW$r{KS2^kkmXhr
zx=`4rHMzQI`KMVupB(`CVU$A?PNI|swSQe_kmG5+vvS}6;<HzEgh+nTq>qkY&ps5U
z*km~!HNP)VG*Cr0dEYfPIgbw@koqt#a9Ko=>rxvOTItYB7E{1iqG(HLZ5zVTqe}FA
z(K)LG>nN(*q&S=_>H%KAcy!j$2Dm~@>CSG5EeS}wRKz7N?-s5;q72AgTzoSiO$Lt9
z7fitFHX^1gXh^If=7(!90omkLF)G#7ggTo6&kw-uml+-(gefV(PKNsef%Lg)B#-Ja
znf|vcA@Py=t6r;V%9dRz%6M@eymCs-RZ25xUKjd|?d1{7{gF1Ap<*4AChaR0{}j<t
zSjgAE1vG<M$4qaY5!v0DAlIP?|3e(Wqq4=)(oK=HNf>8OVt*gytMly(BC8wM9~(lp
zgvfgUo(TTIl(eL$wX`n_7pK=9u^8WZ1qVP?%zWU1>hD?QZST2lm$J{HZ#JF#boRus
zdUriQqY#_q_B&Vg)G&LF?h9ha5U|#ouz?~r_)LK)(*UbRM)Gr|s96?$27Ei>U30Nl
zSwD(a0Pac#_M)+W0j%{-_+LtT3&pXLwqXm;_Yzz<b}T=wPV^JDm^;m>5z`nr*Fk=-
zID~58zzXvP#~#!M!m=cc_js|RK5V_cLA!z?GO+56smq9VfV|nPTel+{L*e#u@Bc?4
z8SGgc<k~#W@OWPi-cfr^!<c=gn+@YRYTRKLN#f3JQI}G=X;xk2lth74n`Z0aL;#5R
zy|vS#4Cyc1ctlR)+!bX`YWM3pI6UXeRq({wVIdVeaT~jk0EnludmSQJTfrbUUeQFf
z4pL@zvh9u)l1xcv^IA&=vYus@B2<%HU6lyr6yqOcd~w7y`ja0@ie>87nP?4Fd~hN|
z95cna-DN}m7FhlVKh2=f-m1tW1c&xqi0Y>Eu&On^Z4uhpjm^cahLy$o_CY%xzMA!J
zR&+pC9W0U<|8B_-EGG=g?&Mj%&C)s%<_~sPCglen4EPPJSGI>V-VLNp9N29b%5)Te
zpQdMA)Lv<)-tv)rYx`Y&DcB+k&I(`IUE(0j%r>V@VR<U&<+NxXDe^%sbC|~$RlZ9Q
ztrp;r5npUMVB;W^_oCeNwW$p-+Vf<|l-;SnI8gZo#YC{@`aK&^2OfH6?1j1*LsO@c
z=;6)`UyjbJK}K@n6Eh3D!<W&-)aG9U{rtj|(wue;InCF<(6=B7ZI){O2I%Y~BgR3h
zo`Kct^^m<&)OO8i@y|3dIHm4Sj9WN8EM?|Jtptz0wV+4T08hh$7}oi0V>c8dr~mPr
zkL}ZO6szor6*b!&zl6p!z1Uz;BKr2^PZe?<<dZ$H6fnKh2MDj#tvE;bC)Kl11u39X
zP_N5|C>}Cl;C#zcYY4r4gvUvcur4s&Jue2o03kEB4mih(!JWo&>*ksd8?KcA%n|Yj
zfb?<*h_2%KSU&8Q<YD-UrsRZd$;LqnW~$p|{_|v$KK1=J0wG-=!X_>%yI9m6P9#I}
z0FjBub|%?HwwC}9iWt$$_BjGZP5djqY}gWT^AMOB(&^LHE8Q-d6q=&Z3z{C{PIE38
z-#RdDA%rOh;U+%g@dpl278Jw1iOv_u&f``&RSIDy5+KgF^_`D?oK*8N7?)hf7K}89
zo6=QeJdV~sFt#!g<&yVI?b^}hZb^Tg<W+`uD>_gQuiI1DFS1h6)ji)P70KBPXD!fU
zN)>RXVa3@WE&S(JHaH>qK29LW<+dr#G|jDaZV5gqNrHC<xO9@8b+Y)eXqc=LCc%RZ
z0jxG|pdq0z?5@`qrJ~(gn+;c$*g3>edr&McfXrdOhPzvPJ4)<*+-;zVrP2w$Xg@l!
zb=@`-H>x~ff{RA1L3X=xeIma__=`TZ{<I+gt+?PhSv9d3$HmCG2|>-^sZ)yO+fA=q
z?c3G!m~bo#N)nc<TqF@Zw6r-dcCM6ryjE^qSKa=J#2S{l<drUruFV$y2tC=R5CzM<
z$WD2>ESR|elUAQ+5ci#_^tj!bi}-waDQoZOk#fa?*qi)_S(f$0`rjEPhP}+ay5@j2
zq{44|60h<{G_ZDtjvS{974K#mupN9vg0c)-iluJT=tnqWQzVYyz#8hMY}NKab>kLu
z&7^n3!swy+<B#+ipZh%SeEM_BOsiyWjgE)Jr;w=!k4<#-?d<IQ?Sa#Jqf-Etz-V{F
z>=4iU`$$QYgJts5-Ch7m871`~aFQ8>_)hWWz#l6{m?~qpmi;`2O)!Y`H&a&g6OOjc
z3+H+POI@Pz;sYRQ#@Y`?@D9M&rk%~7D_De9=rC8$B}oR<o;yO9LIls;o}90pG5HjP
zQ=eF=p5K~fo~iGSrpBuM<8nbJ56OOD>g%CJ-gui4a*bnu4VHMldz=5A!yyn`-Qv{<
zf@BgCV3bjFr8%N#!E*H=^07G7qGDVJyKMp`s^}{I?cmdWhv7hOEE|WTO{px)|6l&+
z0_+uJ=6bA`Xz%%E)m`P{0mUa_vp>DoYNH2hx8dk$<i344{E<PdHd%~?%+<l}>_H$?
zAPKkA0cMP65Ed~otXqHrTOfdg<mOp6-rvcw0;rsz-5g#HW+Py0E7YhY@mAP6{A#!$
zj)k1J&*lM<9TMD(?^TIHwbGM>=yL58Ut_uJ5;tjzaVNKaugLQmfP7ODJBI$YGDwd2
z{Q~s~O?-9lcKGn2c$v@mODGWaU%WUxY{|t4_2i#=+9Je=1>_=*{K2gWxptYQ<5U|W
zRqJjO&r<X&F0GVoZr6}`&Gw%vbGUsYJYS-ln9mZfwa^2sN|}CI&&jsiTU_|Y?=!ZW
zM^~orFg3#4kXGVJ-$?cCGZFsOLxlB4?;cBeWP|kOaLen-EtdPg;iR9pT46&OzEc+)
z*pLFw>P&egmJ{e1s*ba9h5g|)y1f47PG-nNXDTH1NYBcdbQnRZvm*U_bpcudtP2B5
zM+=Xbdt>pX$Z@PN3!TRpL=9w7H0%PTrVPxcpguSh={?&5-$%+lfK*%SZu-h^8bX#Y
z@D5F<nYBpiPIk6HH&&W3eEaF*^$hv`CyZ$JbleoO@@&NQ=(||i=*Lpwb5|1SF@AJA
zgD8#8y38{Uj7_xZTdN25siEblltVs9PBIJCh$^E|<A3)fZUm|9SXHFS<|urCm=tx4
z6@%49#Vj~{@%Vb>&%uL(Ut)yM`brNfv?uefO5TS(ivMx{t8Aha|E`%BH!e8IOM&>Z
zCP&A=z|Mn0%`0gc9;hZyXo~p8ja+X}d~XN!-WT-U*+`%4rd{33Z4B+kBwXLH&$Yhq
z_f&dBWNijW(}Aptq;^Z$py;baL$e<?cl_yonmDKTRU4zh%Am)gGY0r;p>P%`TP@17
z_epWFLu4*^btghewX9LA*f~{mh!_1kqU}k61wLW+e_IttbNcQzaI^#4Qyu|?IP283
zc}BwqI!N6OVy5BEiq4fV#ZWxXRU#_60ohu%@vehu?FH|ESwK<ypvW*mrVx&Qb|Cha
zGCeP*tq3N7X@@R!6emc{I3ZLxb@A;lS)sSpy;wg<%Qe4;Jt4n)kE@OUShj}FIL+Ws
z(~YL9OcOR6PRh=i&$dQy))QuM57;y0v8{pkL86PAFPn@@_xz>3N0cc%mo=U!L?@=y
zlDA>kWw~v2?R^}oO&5^)9NAS>UnGh;4UP~pj}N;Sw%A-1b$BvJqaOu)M;uT)9<ylA
z3_ZQiCqUCs?FocE->V3Fexu>h*d2ktCgOoZ_=Fc<N28M^Be=aq3+1B;ezvcz_S68z
zTdlLWa<+%ouR*N)@w+DQ_UL{Sc7A>E)z}}5I0~lO8tlr0RO{2e0Kwj{eYO~#Dxq$0
zpacH0AL)DEYm6tTLUm8|n=IKBlwIQ)3Q_GHZJ!}Le}0@mB!fABYySv7TpeEXW4Hn7
zb8fSU@@&k}H4!@q|L@7tGqK%(0M}VnRRF}!y5!+E9cyPAguA~Az&wNLdf_s{lYm&J
zm2%LXWR>?|l#+pfuZ%2ThlnZKHZfou_hfRp)nw>aHiQU&#*s?JmKw7q`6*P1q7S?~
zh9EmUM{r<o<A2BtF-WgEj~`!JZ`Lt^Vkezq3ptDh{XBuG5~{36>jWYh%@@!<z*tpl
z@h(*<^3o*$u;#|OZqrxq2ZZ#7<u3e~)w~6_cgnyE0D(_+7%m^MeA}7K6*Snil5&v;
zL<71wKlDCzpw%?-XZlI;+qLpRZ<cAsrjW|~CjRB_&>$357$ww7(Jz*Olv!82`U4ui
z>@O-iPiTq2mXJAez=BulW{21x=zb-@wDuP@vP@I4Q|5I0-nrIcnvGeYk&l2vXAUm>
zis3;eAn+%=>AFu=L)^^&TX8aAW{Z);<4pfFvaxXO^ZVj9IyATBAEye+Y$jtz(%_%V
z)7?mXmY=tLe!XgPh~qtff0}>crq}W0#$UzE%WKy{@CdN(CSO|Ir_r8PtfQQ<(kzHt
zifWO0QX~$a<(O?P&u5A+J5=eT8f3URvBd|V%PeYIXUW{2)I}*D{UG}8H=I)*W>6*4
z{Xin*@dt(tM-&z^lJ7XRB=y|IfyBjQc2d7=zO~94Ovfq1k3edN=8n%fU6WMlHE8`7
zx3+EnfM6oCB=C2QIEVi7jNjX?C3Y=_jFmP-QN;q-m(ADT2Q<V_OW13A?a+D>qv-Y@
zQ<<NY29-9QtPFzQrAe$nyiN0`Q|a9^v72}pF^bK(Rv3-&$rMiK*$D*6*igl-E7+iq
zwSUr07QQZDv+>M`@R20KFAkbI|I*nw>W55f9=3#Xu28-zF+8Up(d*2>%s*5f{w(eu
zPDkqM<uOIU)hLQ}9mzxcxGDM84{9?^KuL`<vn6f*Fg=&{<&eFqqkDN!`TR5HFY|>+
z5T!c@jqZ5WB9v^1%Om;^QVrTv-kNE3zf{(;{su>)j<C8F1xkM50)%%}vI!@^{I?D~
zkA92gBLI@2z-x#DQ(OeSmg8m!#>U}r$$g|V;LDM7st=az7ZoQ%jwf(~_Hw8Bv}ruC
zm=?d^t&3~_=W&Zp5XF&Q4u>xb8bt!>{}q=+v1H9NY5Au>Cmpa>e!R6mpOL;M>vvK#
zW76$<Po^tf13FR9=PGz>rrvY0L3vegb42evFo3W<bv%!6+gcg-wrYlQYN)#O?J#!4
z#tf~l`(TN{%^VDZ!^n({D+Pjw6Oj0^IRe2IWR=wAp5pu7Cov=%8d?nK<rwBqND9i{
z*q8l1nqc@zD_D|VazI+qg@7b_b2_mHC#c}KBI$;a4skk#R*ii0`xcTKF+rKAt`<hG
zz0_5(pm2cXbt-nD@nPuhty*{SU_npF4$=)sjveyFsRB5--g)|De|<MB1!J8zrQ>q5
zKY*!A^BG8qaqd>>^zU|Qk~%i(2QOM4EHk{OV<8CJ3NLcT9>=hE&X#3bxQO&wrhWIH
zgN_|P(+j*;JR|Qaep0b~xrYcztEE!8I`nmjMy=1j6Ye?Q$9}WNbQPtr0%L5O%}Ki)
zb4)92%B~HFY98ztRI%1!f)9YGb@m7!#(>i)qDa%{!GMCFKx2?kXPHdV3()0#7edQ&
zR@8wSuBaO(vFyiJyXM$I&6X?CFxcJX=Kc}2y?PI@%CGCpVa36je_aq?YP;HHMXEZ6
zv~d@BOJ~Hj5CDI2;|sxY-`9g&=!V(=29#Rt+fFK!-x_COuqh&4Vrb0cPG`tLONdV7
zc*O4K*x%+zHlBODfWe|(oZ3l(D747TG2s38*7w>-&0^b5sGH(!8hdY}qD$4<;Hi8<
zlDRA_9EL{w_OUIrR{<R5shu)Deg@(vtpZhuXnmA3&N_hjwoX}QEz_tp7Exm7(TZz4
z9NY6c;6w=jTl9qJ#VZ-hjJI4_C`4AOa>g`>o=y{>b98`F!F6MM;|GPx`$V*L_U@xN
zwI{9zTFy-^WT%^R06)MTFx12h@5lSYzsz(BC#ky=4*i=U=BkJGQ08NIM_7dJbbg}q
zPk=X81Gt4RnPRc+lwqp8REv}7(6C+J$c^2yv`>NS;XwHky<~Dn^G*>O>-^$Q&OYLL
zcUn9{%fY=m%c<~-znd!Ga>S88GlOS!PJbl6H1TkWoO8-uLtJXj%fe{q2R<3dKV#xp
z)r#3P>s5B%N5=|W#Qhze{G6_u<Y}3sDs_nnyNUx;1J0hGi02%uYV6ZTM^WIMj%0&p
zR08R>)9pQVZa88MBY{SCBA0alb$ixz*A8^Sm{Q-I#Y@U7-#3FI=Fo{AEQ%JrGks?L
zlz@dFUty>LO&=P$G?`u*p&0@0e2j$cvpfv%$i%`?;H=O|StIkB2NOBrH8gU^EG>7<
zs)YLDO+zU~&?nYjtP;?)rXxdpyvOpy6X6RxFQsER9w6w)RsBqc7KJ;}I8hUYLNG&<
z{}DB8nwei4?_C8fU}WxwRu-DUIm`ct&lCMw?!u_Zk`L!urQzX!o!+vkZukeWiO`eg
zq%Wgz)8|^KrxSCp#PKyhJm%~o8CQ5h!EK2E99=~jC9xc!_c`=a6<(3WIKv8QQ3tJ7
z%wq-(F`o<x!Ovp?SEA3eJYeob?7q>-AhmWM``f<0Zf(1)Q*bL1jMmro?dS#1rS8|J
zz83#iYph&@w#o~^si~m9f2&@6Y`I`6kB(Y3o)$~$W<O|j<5h^hOz{>Mt?aHomiG9e
zc#zuoaIHul*2%gn?K0xPk)hSx8AU;E@BRj&%bIRnXkz`zk<tTYe+4cBu!R1#{5WM+
z&-X@TpBFK|WDR;F$d6bsIEkrG{vt*6cb#e)7Nbqxb8FD<Dzu0s%Kubo;*V{GVRAfj
zy*I%ZWlNDn3-6DlJ1fglmr&Fu<e~kv#|lqPtis=6dlMHhDs1EC5en=Q&*Q+mfmaUI
zG`<taJ#so4i-PX>LC$eRY|V^HCy#xI(^3S4<OgDZDJv)hqr{sy^qCNWX`f~$%z7T}
z^`eyi;FQ6=xe8;RKb0RykPd!yf=4*SjSbBJTA^bsk9BuU>OhO}bqUL#nC7-Y$Bm*8
zIK`aZqCVTepB9Frc*NG3LKm=k4F?^VUB$-I<mmR~89#tB38!7j(<P5xK+~@v7xSnd
z`2hZvH$EA=44GxNj*ht$qFd)eVJIX!y(J;`XjN&1qm5{#*=#!f58!zMV5a68M+<Cp
z=fWJ8fb#5yL1W+9$q*ZZgS4+g`Yjg<TM!7dCdYbC*OsXtP=ckwO7ABy*V{AI)N@dp
z<NCw1B-GIs?^VVIF`2L38X_IV!i|KYh37gee+u`ANaT#51T;UaX`x|EZVLRvCu9m(
z5>-GM844e8QvWUy%-@J0oYU|X*E)$x)siKxvyV1Z1=?Y0P}YRM;k+-J-Fr-m5kD@K
z#X>`-@udbH`xJdSwmc$=61=7%9&3LA7dGb~5ftsSVCuVxWc9u1tZ)95evdW>oZil5
zpivSeqPzJ!MQ0>kR~@#`{1$u&<+Z|F7~|*wCn!J~v2CTjfNg^}Fq4-j3^D(+t8bb!
zij8*idX7SE{P#-_T8?X;z~G+c@w$)q6A$2_IC5YAzUBDKbm4*{#WIQ3cU!YFkUs2)
zmbIjux&=QNvnhrn9I1eA8VUeqF3v;dAaN{Y^Wb3-XVQ<R-`Rd$O@jZEA+m~M+#bN&
z15ShzBm~9PjjC&>g{*%47!*0XB2aT7q51y#9j+SC-tD=jKt!LV`G1_|OZh2eUHYj1
z!oslvSUUKn4o%wq$NE0P2pMK%S7911y+RcR;q5f1pTjDu8JHdX8ALq+7ttVZrVCG=
z9r}>^!KvJ>_b`k_{?P&XoVN{|IGNX+zd68KLr;2ZQOvVDovdkXmKU1kvK1Fcy)xw`
z=R?;vO7BjY3XChnc-J>_p!whg8R)UyarKY|P`0jQz!)y$!G^7q<43|J<(bdOP!PV?
zuNQFDx<(oeoM_V#s{WB48Ok-?5f{JBlXrL0EMbe<-&y{m%ZK#OmP{4Fpds3Rb`l&p
zqU>~$qNSqjWL;X=sUTY>=WF^+71BljsS81Kug;(|LR%#~D#c6%rN^j(aNt8|!0>3*
zeg`gdFb(Sm@%bh^Lx<1G-5_RIdQi_uCPg9kBjNDYSV2p}yb`bF=~tpIt4Y=b-f(EI
zg>PH~hbMfevfh-7{8`Yg9ica%!YW+*Z+`h0UZ*!HE0zo*QD5M80f940G5nexZLQ!A
zb)Cs+a(S{G`X)gt+)XtWokLC}Q-m<U(J+X?cz6uC(irGxe@kf!+G!3-!8XF{2EfV%
zQqpeINivk}OwsT9_E!*J?^D)QSD?5z;4~=IEY=X$LC)UQ(hT6&X-XFO%~Uo$c6Fa&
znWUvuof#?xr|9kVps!2%H)1nRU3I>nMJG@+{t_Tg_qa+t-3}pO-4PobEx9x++Z@Tn
zA{o)@!`4KtE?x%803lu5^%Qi~GIFiOZ4{u^&Oqcx_qk)>@pXQ)qcik6hiHC_VhusL
zw2vbjJ1X#sO9DTfQnQI5Gdl0jE1h1OlW=IT)eqlXdXE>+6wqXs1h@cHmuZhep*Y_E
z^$XMIiHWmz5#ay6c`N7G5Ai;Bwd8*=G!VX*8&0HbOvORdI?r8EQ}VTAVW^8@)&N96
zyT9lCGH1vC7cY_6etUEJC;dC<({XITIR7j+Gj1twT-pV*U6hE&LvvfkE*llsW5vtF
zPCG~>!iEE3Y@0AF$(R*8P{FciVt*moQPs@I`~@9o-!`?r7BvN_{OeA~u)9mkTr50{
zW7?;Tf(TnU-Mw~6&%Zn-EUAUgsT~n;Hh(7}k;LqWt;QyF)0lpo6ecO0hZ9T_dm8@F
zh1_s?V4;uk7wZKjV5|I$lfta%fRqRJKzh(aPR0G?4uq*>IY^zJ!TMH^f?I*A+qvx0
z5K1XD2c~L;_&=^(NDqlGc~axId`lpyKLG@KY{Beg)`iwT6w|%lyFc#nQ5c_y3$K8m
zdFBLF9rGDswEf*b`{%{LJ=AEQ99w`Uzx_Zgi^;iFR@|M)+bpEbGtUnq%~`rzeSZ0m
zGOOx6Cf)y4lOf%4yQ~_s(K|}hxiq!WcST#eX_li;=9$}6zD;>Ee6=}>??8bDXDOoY
zGTDvqJPqicfxe#@P*b~Ll9%k2NG||XISxz@A_q_{P;5`mU$~!aOvD0Hv@9Xw6~8Tr
z<-(Em<v=53-(q<ncmi2vwpH5T4po{+&0HUcHT!<JW|TW6JygTtZAmOQk{_fXB^PxJ
zUG^Sg_<Ii6D}S8auFr9xk~VmiU@^`&kN}Ndqb1f@imYEDqd>@By&d=B72|?>a}ZqQ
zR*fJAPy4F@J6Pbbh!v0=KA_$O2!S{PC=!92_f1V9vV;1_n8CH4mgJTQX=bsCu<VPV
ziA0t*y{IGQbZ?OF=Da##Wj=LWIm6QDaIRYE_j0`4jyE8D5cfGu@sCFmO-A3u23viq
ze&39meKizozWPr3rXb=;5YwFr^#HR-t4VCdyAM|#qQ(ik3Y)<8qj$p$PuM?;8zZ<U
zOQPN1Sa!_NXk=3I!!3J!{Vbk)qk7mxcNrwT?4`dgzrR;-|4hG`4Hw1_ytyWCT5o*`
z@<sXu52sJKv^km@gDIq;rPAWz<ScC+>sq&t#G*4-I~6MK3gs4xT9KH+($O>`Sa|@}
zbIBog+4Lu#Qcv96-b(>Pf;}ykPd}BcTCb``Grt1ae9>EHM5YUSz<V#gsG>=HzkiU~
z5B&MTYF4J#%?Nf=&Hi;yT8)Acszd`GWjBygqTz&`FT6a5Fme88>q^&4pP>MR$WmBI
z%kz$HI6%Lwe}JxB3G#P^3ujbt{44}HU`}~l$%F7#okxs+Bq*gyqY(CGusZ2WQCY9j
zb-_w}?!X9fX{c}^npFIFb&bu2cm-I)dnZdqxWJN(p4s7rhTyGZ8Np3oM((lnS1-{h
zZq#~Q>f}s#sd1A;vOm60X;h}AnjU6l7=uF<Gj>UG3=$#t1b)CIAe$j%%XR!ybr7ih
zmWIR{Q7_|$@CzWu`&LOLj>bKmY&T&<_kDqjg|L8a?hlVk2A>LdZ`{X9__IF9YuV^1
ztLUV*=Ik-ta`PB5_Y;P4pJFrR(kdX~sOlhkt82XLIP-30wRs4xV!3UT1}p@1kLLNM
zeIAVVHO&uM?Y6eDGaZ~e3Wz7tl|?I!!0@LHwVJ?3&*ct*W$d1R({!4oYdA0&;M4Ev
zvX?o`O^yN$@2R59Hbh<1b3CCaipM(qqb||y^d3lKZvg-$DTnd`DjA8zM&>p?YQ%_d
zf0qi9wG^E_&rdC=+uxz)83Js&NG`GV<HVFJNL&vA6SVh5T`FI!U0haYoAj-!=KVfZ
ztu2u(iWlXSHX@1vNA$x*5i@qi<Nr>(bNHg{vllDQ{B{q0#rtgFc>AjSdSn4|5}O18
z&ZoLEQ%1N=6sm&YAp>LeLE;^jav2_Y_2(unD5P%kc<;+Lumm*Xawl7PB=t=w2hu$|
zV1S%C9|hte5rySfYH;d)Xdx~c##q2rUncD3&8l7?l|88830^ZCe^tWfMpu!Xde}ax
z4@i$|v<-+IJ@0AG0f*2s#`$fqL-wD2ypdF;&c>IUjlR(E=elZh%+4Sz%w47q#K`My
zW`8LCxWjZ<TbmSo!YnUSuh2>;j?4su>Gt(M8S5RSCDq4OE)z9=9H@BQvazNU@Pzwk
z-HE);3Djix6Efw!^h3qn?Jz*o0V!ibJdZy7oWwuesDVGy(V;&_uX@EYFK!WA9v?|U
zz@*7-czD6Q(k#=6MF&5XzX8w1uAr&POoLSM)O%>|9aWieDg!B~OQ<l!gBO>3%S_%2
zT<G~-Xlv3qmjUUgcS?$bHO5k{?n|RPr#&~LRA&7$Ff=}V?gRha<6pau2LV%9>phuP
zT186U{CBA(*)1jf`KnF9tjSCho}WGvR>jx1rx7lC49I}Yc(eMN$?e>NS33}k&I1D+
zeAf(9Kr$-F$@r!W+}ZSD=_Cr&YFS*F2~{P2R*i3q>{9i(HdG2_BXJHJX&haS-doq5
zfEA}LeAuseaW*5_gYA()pwoi5+@mb{LvIuEI17Y15l6b<2!3<bqG^LKw~Mi4z=$%Y
z%G4(C6@eu9QNV&zoIK^!fHW33IW~6#WJ_8kXdX<&@64C8B)X|4umZX#4H~56qUBsW
zFoNj33cWfURfXY!TQHL*4WxQb_I!v1I8>~lNvR8Fq;@c68Ve1Jujv@j!8cqRb2g<I
zDv&m@I@zPw4USHYzy}ui2i$}phxTHZRcN2k{5+DbJ~#hfq*}!p)?#d*Mk?5;f~^44
z*u8u7tMbPTZS}Z2nRn>*TCE+i?dI3M-{{>-cuj{$CC>&IoCt#_q3W|SabPK)rt4%y
zkP8Z&s=h^s#1&5x&zFHl>8l7uBzcNhz4P@=9r8MNAgO${>VG?SmOhvUvOOu+a$_I-
z#k^xx1+!@G-$+7b+h>7>S*#NDCO!pQcG4J&Uw=|o@n^a7h!64Bs`HiIE=s`^_mOEl
zcZ_Wky}gkq9%%~Crfj4t4@?to1z+%02{!y|LQMq_MFUb0t2k**v9`|zI!tg%r*lF2
z-eBGPVs?JH2`-=xgzk%XQDlbrD~n_4XJSp@((6h)gak;b=<gaO41GP=8?H}iqKX0Q
zOt|eMdvYBdgzc#trSCD$v7-(0EGz>|ddo-xRd`C3m{cp-We_kShL>n);s3PVNTcoX
zLs~%pv8hLBbz@f){AP8ea6n%q%PxCWN@DxzRVSS+E@+<hYN3S92TvKx@5VLff>l=2
z;+MS>iXN1@A^8z4&7mRhGNbj>6p}^WM!(d(^Zn)&K8aItpMVe@vJhCUMW&?IpvA8N
zJ<`3gs7!0iK@_zrkQ{NVl&^jZ9n?1^no3`O9CNdIS`}rkIfDPUS8RUO{0U|`zo`*f
z4)OX!YwB<kKKz$u+51if(QD17Lg`wzdzz|7PEhuw5H{rA;j61psv;&@if%{NSS&`K
zq;dJo9?PfW*G)Bix>UZd6CDa`IxbdQ4xi+zoCmHDktEGZ%phaUHZBbUCfBdoO3G(~
z%G#cN{&$}T|JO`IPTs5wj`kQ0w7G5RzN7Yi{Bx0I&>b?(;D3TVNRz$(g<+^Fnw|No
z4-K|MA#-`^M+zx%tefM#@DnYKYu0Pa4%o!r7(e1u$Caq!70jN8+&y!&muJnX7bnOk
zQBFBWz3@}eckDHpfX$}2j?+4!ALZj;?p8Ayg_Et3CZ#H>qftbtgDwxBXKJnjGKmh_
ztv5OdPjWtq6g1mzg%l&oFNm-kM+8f%ok*<{G&!CA000h2U;^`B4C`VI+D1$gKI7%D
zvcduJl+br`8d@8(nd$LNTz5w2r$73g<k2VSf=iXEDi0~*!)VUnlj)>yU>zG*iH?y^
z*;R!uu2}_}he=Nc@YxK#QW2*ybNqIH==oX2tDp)8#=G*0!U_p#PboS*^zFLn$L)xI
z4E<5|)`+oc1}3CEalV|vQj^<9=AyVbRbd7mQh|c*=40~xJ63>;TfdI|Dvm4v4RN(#
z(t1V=+n5qxo70TNmw6mx?mIyHG6Pg?w(CCS{O$H@<)UEHRYx4-wN{c6h1X`zF4B>q
z-eI#zk9^B<E)gf$X2^xdG{#O(kbOG}1iAsm4)Mo<P3TXoZmjo>ZMmu0qt1rHEo%It
zz%WG71EQ_3Fw@9cCA48~iv>sgX^dl10DpwZrx6i&6BqBi8UN{ENAF*W)@r*H`7HKl
zxrK$zn}6L21rx6XrNx=DrjMp;V@B01eAF%)PcrrUwzSas+*d0OiE$fDMBZ4><`;L9
z_p@z2SK4R6-;oTg9wIq19lf?$nZld^0NkGFfQm_J*WGbUMJUClyT}p>uifYIk<Vek
z&5((pV_>k%fL|~DX%*d@%9Qo=PTLCkn#H;O73&1{ZpvOh$T0jqXAMlZiH(lD6p7<Q
z&@@W|q_s+R9$?jb+>iH-S(bzG>iQUBin2qIgZ%x{k|-yHYjuRWGrZdMQ>(dMhH?54
zLe*<nP5ORfAk6jARv!X|KE@uXk;R;OP^SF3{U2x7fPwYc=3QC2e`#Swm(;)LV_51w
z7-Jt=4&Q8W>I~g2WMhFk{V1W(!!nIn+DC3^&O63c&t}ZbO{_sZ6iI+`9#qd7|7L1C
zDZV{mBiW+*Tme~bl>f^s_+B^G*?F(_|6Mby15*JfE6Kxx70ju|p`lS&t)xpk`lya!
z&V^n{?w}dI*L?*ja3a=0*`b%n5S((hq3W*f<**Sw>q}O@jNi2h{~W#E9^??yNm{A0
zp|{Gls<|PZFxMc4gPVe}=t3g9h$ZM%jMg_jTb1YCN2VY~us@zQyjhMHrSuaecTMio
z+^d}cC1XoJ8p5((cu2%Q*2l&?Dj2&tplIFNe%6UC9JnetQj6$%ybF{b#w4c#QX|Vz
z5C`!*@A{0E^O%&7@)IaeBFg=niWZ3FxY6dU3=QEE=|^3d2@9Orr{0banyu)9Y<1H5
z;AhA>NS7Fcoz4J>_l4>OG?#6N>E1j{V|r#}_mRgRsq)n5H`z^msAzY2L>43^>+3jW
zR%<YwS1Z%=%YRzQ7+*kxH8$%vxIQWtqP<w|+2o`(iYWw#{Tiv9-gb(&d|X#AR)Avz
zhYxYgV<G+YJQAf6G>(#va{mMAbU@DS@qRRr^MPS$WpB%TdETO|K-o;n1uU3SsFmOy
z%VKbGALQ%GXB?%v-TTelJ}p2Dbmr{}I|8Z{#5&Oy8uYX;i}RdyP;@t=!2TNmdPPA=
zr|*grb`0l2MK}yo@V)I79$Wy&8c)k0AdSBA+r3>@dk!C{z#x`K$%uxNS;+JpLqBY1
zFR-Y8tUGqFDIo#vQeGtHbWf|JstLy6%EzwXg<MnzC`KX4;2cE<$tyOu-#5JDRUzrK
z@4^2zUTGTiQ))~1n^{qj)%q)l(b<=}jwIymz?mobjfU+wtn?p+;SYW>=$G)zp;CPV
z8%_}AUo9%@UCczWd4CSVcOTCZ7f6j9@&~+o+KE+x;FOGmP=?}4Gp%UO%*^-)s7g1l
znkK0B+f}LGY`HVqTEu7@i?uO^$7RQIk;;+E--Z{)d_(1N{e$H^SxOxN!7_e(wH-d&
z5r4`B@D-aW>$(NRq!%=cKs5!C`<k8fR7Zx%_C;4WiOu&_Fr@PVUhl8~tVDuPfQfqM
z1+isEmjg{BSe2g%1=&ph-V6~(1kg8w6VH2|=_N^y*wphXFJTT)TLh(!URahEjq>sZ
zYCHfozMl|<$3kW8wZime8Jdza0+wj6v2Gx5F;2|+yM&Uo$R@Xa^n%BkK#C=*;VHtR
z`IS5vsxYMr<L(z8uI|Y|`gbQeyIze+{<1BC^Oad<J&)F-Ti2eG3E2`9#hNCP1QVk0
zs~s+1peRVW%*iDgHxDXAO%OAg2;|Vuz^sSaKNs8MYP5R-*<U2$cO>T&pAQ}gB8;Na
z*%*h}fNBE5v`gk1e?)9xAXQtLBKn@^tz1s7aZt@b7i>;P?WF<Uy5)f%fn;sOcqpa=
zb3rm~M4Iwz-nsYBl;x#@$9zJQ9Ts6Gpwt5Z<AJUk!{rL@T#`MERBnFxFiTFmggp{h
z((ge7I?O;4q~|%8H8Pn8mjB#kDJvd*oTVh06%BeguEb<@ezQIti40a6(@79);wk4`
zLzba|vVZbECw3BvCf3hWL*Q*rk7mRWy$Z9<5&6aAc2tL8l0>-5#>9tfqlZj|f;5$B
zW_0JD0rIXG4wJ6l1E=3%aTL%C(EyQH`KE}F9*qp|Tx`1B_ZhjFCSp1}2xxE<%?VdD
z|D$7~pZzJH>I1eiz8&z4J}W_E@`EOH#+vZ4CPuR6=+rJAu-5=U9)u)yl^z+;a(6<0
z%kC)bRGspqPwU1V7GknTyz!!Q*BTYn3@~pEf6;R2rx(M|{CZ7d5)K4tPs^D5-tUb5
z15|_DViBY6qF9Z_Gl>K7_O|lBhL1iV@<BF{4*9uKul1+>MMPfBL;l>uEM&_}M=rSI
zI~?uhkmlB>dX;GxB0wo^H9|!;0e(viSrJSVNo7)9!*=Ay_CRkcq~NK#^Q=Yp6nv+_
z>;5yB>L~nl#ywex*uH{M(qXp?ft^V=tk_V^SYO!RtM>4E<aa#KP(*{$uDESbLtd`v
zMlrPyvrs7POYdZzrM>|Kvtaz}3OsmzetG?#te$7-a^9sJU!jOf0~{bxmVS0n_6%Cm
zm*h=oX<7^f1NU>+<G%?14IzH;DMx210?&{XDi8Hr243L=E!Mmn8xIob&v+)nP`_MG
zZB&rB`E>tl*W&Md%Vi=n-U0U1FGO;1#3NTLb}Z<eA?baL8F(0(4P`^1<Ox+j*6Imq
zT03?P6rP29xK~b9f`t<5x&Z~zMsEl?n`MMYP%;2>tk4!a051-TdYw{)GZz8M^?=ZN
zWu6hPp3=j^2?RgeeqgQ;RxP&+2z)o}Qmk-(k+bTvkHl50UTWTA3Pg7IduIo9&$=qY
z9r#BG-3M%6OU)u@>y<*4p-GirG;$bk6u8|{r#FzJI*%uA@nSCJN2;jRU0UR}yVXbz
z09<)Vj^2G2rWod$+x%LUP)~2dB~VSS$?72@kQv?xKlVp87FhLQr1rn^RiKmApM}Z&
zy9p|k+XE5gC|3K69b-V%vcEd#bLqOC4r7T#MQ6hfQEr9CJb&Y~%#xF!20Q6-q&{(W
zb~6YX3lW_$PFcFPx;*Une=@6o5qMDLnYao6CU#54Hva8I7eYr^s5k{MTg9jda1?Iu
zSTDW}=s@`{<|`m(gxZ|%*Zg}TJN1OeQs&IHxs8Yr1i9V%-O3^DZ*5Q2OUk3GZ+N4F
z9U#X#+z$8R^d7%5_MhPvZR-hq9LwbgyKhXaYS2+mk6+P=Ne6Bh_F&w+FDLYc+NaEP
z?<|!dzm)?CS^E0c<l0V65n9lW&_fp(QjKN&cSG@q_gEntB^|F9MvVXjGEIs|psWdn
z%rA11r0ffuE#i3CWZYc^f4Qe*wmn9-{G->guLm{Uq-%>r@)s8UQ7aJ@RdJ<!kisQO
z{X-!YLe8L%<$&woJ6l;@TJPM`)tzB2YI6CKE8FK{2kg0;*P^N4SFkD%IM|FeZ!<0)
z*{)Sj=TPd>98`I`Hx-_qWIX!>6nkX})q_pYD|nhsIp}(kgUC(db$%5{3Vx_f5nX&2
z-<lPcz+rOfOuz+hg7`qcx1W-cD6qZc3EzCPN?YrYU4ou_^dE~vnusQr&)Zk9gvwv>
zZ}rNv=mwl0>cOJC>d%C9iRnmy&Q>n_PTC0miz#JpXi))OGd+v>!%2*`aa)v>KO35O
zh$UML`XEDjP6tjInWq7)&OYH)DH5~k_r!7D354lNnvWY<)OtXnu4xAPnY@rzdN`V~
z)3{yAo&jA^e={07{zIB+MloDCZhK70Q*{R0k57Xv)3xRE7#Vgx_IRJksB(*nk{JW1
z%KiE6^3$lo6;Sj8IdEYyfj58{?h33jXSy!6yX*2Y$71FD#_MS~d}h_}Q()`l_}4)%
zZDu?|A5o)PWjBrx9JwUGKFSg?ofOMNs-E|tHOGG+V1Zf3y9jvx|0?fdFMJH0Z5hlw
z57G-Gwp4Gf1=Mi*%@{H6tg1!WIj0;0AxS=aWIoWkS;D1WvBml7CqEZz(zuGux~rfU
zZc+|jdY!><D@?=`gbhxcd5YH}H88h-oMRZV?4y*B-7CM^Gk5_HtP0bjl#Z@Mboy6q
zO3hHQfs>1Cec>9&@NnUCTVwdBH{MUa-V*kEhtWLh5zYm;r*@lfE4T%GCD=Wq6bn9R
z*gF{XS;8H4Ac7Yil1s#T)T2z$zd_cJKwbWEVjX`+-fS(1<&smjwm3Ws5mv45p+x5f
z{WW?o*qe$-FiNpKaLH+tfaLtsYWEO9*>tR=8ozqLx%nQ#UoTSz(=puIP9+>Y6i9hj
zJos6Xs#Ct~2GE%HZtO}fRtkDsMe6z!w3wpJTvdn7?^v4lwO!C%P%M}bjavA&KGd^;
zeLNRoJ2a7e9A{>mjTH$M#z@pGsb~=iW?Y?69K@x~R6>f&U}0^mnW<^fr+Iam%v~U5
zo+lE5o{ZZ~<=84A9K1C;)gpGTJV?WoO&4g?z?w*|??=CJRx+X8@1vthSIhDpEqG|c
z5Bi-4YH`x{yhM}^nSp7%dt4!fb?!E-p1^pUv12RVddt`2`UuA6E5x6P6wQq$#{=fT
zA8<&gHM4n04H;W#4ap+IHxbXYm&QNHlA@2kD7e)sX+a4X>Fx;vgdLlJPsDd^p%4Me
zWt`_Lx`uJ5fSI%a00sBJ56GZwB?d;~=sJzv(cgnekFFQUcT1HY&qOiE45$gZHu_nm
zCfDcrGOBr9(p25cgrFCHBVHW9SKkd~#^nrEk+n&C)z~M}2mgz$mp9k)FBzDL@wCz_
zHGrt`3M$sJIc4h_jrN(HRET3Uq>CUk&nPx9L7BpPP5&}s;y8LRHUbsn&&5))r}1Lx
zo|RlNNO9pLUVf>?ID#8zj~WKxgFn)%JjVJ)-PB*4Yd19@ay0tovAkg~6n2{gKY$r9
zP@OWFs;zWiEwjbi4b4vhl?z_}kjej|*eSjnJ*KxFlGXJ(Ai?%*E61YkclvzZ`5qGz
zZmJ?@6)_qdsaeo<$gJ<J5OnT)4l~7YrU2@0R=lH<iWM6QN9Y!`O5q98KN~i37Dy?R
z)6;xY+<w~iYiVr=sJnEO^pAN4^ftDAfSx{|s(|+g)KxZBpj(1_yH?<=pcgjtYB2Wb
ziQOJ6Y0=y#a3(jlecz;<CML2RA>~vCzM<pG)d7@nNwF;sKOWgTRV9bb*c(|sRD@?J
z<Ysh-X6rJt%Wl!4n)x$mJ|FIq)`q#at@|50)|~lt+dE!2>QisQFE4flKslDIuKt0~
z)eo>kdpf7yMD%z?+moEN@GV+Dz6r#NVPSTU6-@?X65N1qGzFd;;ZOCjTXg^k9?$!N
zPLe(#0b;MXQU7O|{}Qy|RBmmmCqH%(z=}T*i*1)#Ot@H^H?yb8lWBf8{NrU7m&$UI
zZN6s@g0Xu<XtY&im%WUodnrQy$K;I}2fr_;uli=UVitn6%w&*%R(#z)6J&TDorLj?
zEuTUt$J~T!264q-J(fNGLT+3eYLy+2z&jK;?H#c--hM`3pNFw+(v+5BKWK%WB|jqq
zkPf}*C1+rWdy&{~UB;%bgHF-;ol2|cL{Ar+Z(y2`U`k}RWj_M8<a0Zj8~=#b6`a3L
z@#yNEdx64$<10K1t9T+?DnNmxUr`~_d}m1#E`!>=ZVnNrwnb!m5mY70SG~gMR1pjn
z519n%KlQvVrFlV8FS!y5WPkuAP{Z5O^mVU9nWfLlDtL4VzH*5%M636(R(iYf0jh9Z
z$oIm`-d<n>^p$AfHGE)FchUX{5KMWpI=%fqkOwMub59~&$Q{o;>oA6@;6tCqPQZ+}
zYDKTM1$<Nnj1X#1lU9eiL<b&@yJ;p&@JTW<@W}@@>(pRqwmLOz(-yb52g2lZ+hZ3=
zhYU9Q<vYA;#lTMN#Dp@n7gBP)aCmKa41Vh&2U;}_dK8A*4CG#cW)##Zg@_pV5Ml4&
zNu*J{R@GcI>`uwbh|!<TrOheNM?I)>;FBJdKx|$5&J%lq5*}BnIH};P19m^G`|;<t
z8x~;wZhu%Y@;4@h&Q+hWdlrb(NO9XkqLwITMS8!@CIN3m4;~@v&>+wg+zNR#*ZvAz
z*$ZkcQ`hD>a5Rr}r3xO6RxQ3%BNP75wekgH))r`?c+0@kmc%e$NhCktfI0gm1ROD4
z=1!>-YB4`gv9ExNa;eR)`844D_!#M6f`6ojPCF#`Glp-9EPRC6MEd6>1-K5{tN0uF
zaU;akRE8Lg=f*hFJyvg}daan(2*WV3kB~zX(zWASeBK}`{9;h$4Fm~XQk#~S={LRJ
z7C-nR#F(|NmXD~4Kqp{go=StEkw^`50$<@$Dba*)VaXB_R#XA{nPIJ&r2&|7ABwVQ
zPyKp4GkD9uP`;4>i;&00s|kdGC$8b28;Ic4s$ZK;b=SEUrTNTua^dTWpzQ-3rc8w&
zH5zyC!WzRGE^E(zVCP=+`W3N*M@fWm*P-7sKSMz>v=u7RQ}trE#vu<%v+3$Ov;rr;
zurghSf@ylx8FnjKgyy>m{MWeiE*ToK<)Pl6R6|K(Z7Xa+PkO<oLnEc@E0`d3t6okL
z5q73}QuJ2JB<9}R{?RD~{5CD-8kGk?^>d1lZnAhdCsvZuH+_q@D|4NX7fjqf|3CRS
z5s6;8l^yH`b5~Al%0DFWK0cDNx-L_m-K|A1?5Rsxau_-tr<n%=ZPb1+J*75KkQ>z5
zzoGigW}WXWBW``cfCi^^et?XvV%n1%v1{U9TpmB}@!8^=17~795sgoU|HCh}3M~*U
zC$Qc5#KkNZ)HVQUR}Kp^Pp~_5CWE4*NWsz<a7TLzBgi6<;tv!rP0p!QA2yi~FR&&{
zI#*xDB1Ofl^`il)mG1k0!&pe5jt^m$tl!c@MhG;;{vWU;yww&@GMi-o1bF>n`!U(L
z%wtk86{i`?Z*(@<|2W6gnRU^xjC$5WO2w;ucJqECa3({&fof^ai6#1|D&10acL&0-
zy-}<Ewc{$)97ex;(pZh_E7;Q6JL(R;R%%4g;SS<+Q;z4n>Umuv@lQ6OyFO9O`xvch
zKu9NQ85~<|G!PTCc@V+4dgNVsC|Sm66_}Oo!Oz#`a-ABrSVtV#7W)bF#!YHBm@jiy
z*JG?OVao6+#X3oJ;m-}P?ScyYj|?6(XtD)iu=73qXXtq_`qaZZ7lC5MlSv}}yLEoB
z!!*Ckta+!!xSxXvriHS0Ee6s(I6eeF0<+?I9?C6za!JWF&&~Ne(I!MO(Y2RO6F&H`
zfdOcoagtw%dr?a~Cfckvn)2sI!CQ3dHis9pRqbw*l{0sahHz^TPb=>eIh-ubJR>tN
zr#YhchxWG9R8p;A3qxT7AOm1Fp`oinqmE)eB-*6K(Dl_Doq7^c`}w3Gclr&Gjjn44
zKRB`LEnR}s5q7W<$F0!1eftdl!VP`4a_~#RL*b_;Zz!dY@k_Q4UjJu|p8g0($-NB!
zgeoW4eiu1B1;q^BNnjeRT@VT&nt|0uXmU?NV}RUs*tsZOZ%-HaDS}Y`FZJd_@-xj=
zJRM{^JKVCOT5a?<NJQXLf=v4s0&NX;o=nHmZSUl9YfDV%dxXv@icXZRx1rg3z<%?l
zBX!i>BpI>5bxP=adEG;Ju$`*)4p{g;rpEhrA9Sm=3A;pDexXWzatUWs<Z^jqs~NPI
z5*?e;xz%%A>I|;UqwDx6_(ALnFA2w;V|AOF7Z(t6WOnJ7N}we{HTN+<Zww7!H!}QT
z-Z>I9)_TQXyT<jNwJrCh=|HxVJw9>+A6oQE@&lTSEng<4ffcIu2;M>fGvbylSSg#|
z>6~`#-KqIt_g0lg`HCQ@lE)qyLM}9fs~qbxN<&xRyD0Lx1T&(Xpwu_y0xCY<v11Oi
zG$|eq8`GUD`+s79gJ-_lK6KY8DFg?HLaI$j6n=2!aZvEcP^XW^=C&c*NS+uyKADQO
z6zccp$kO1F_Ol$geUR0n@(4xL{M<q6l#h$&C$nLo3WF{}-1K2?0PpdsGD`xstdF3b
z`l2n$dH4;V)DcsKKE6N@;hP8%d(Gm)7V-z~4F^1KqipNTVs4+tKPCJ)3gA4Oee0*j
zto^&P%z<Mpflc#<#QM!nBcSb>LUO;8R+LgBLY=0Xi7l^FPk}3FXlg358770n?q>J3
zM70XAnYvGy2y$H&*86XJ??9xEi0jzyRBJH=zT`%#adSl*w5<ET$3OFn@3}Ia+@vVC
zf~JKS!k!%AaVFxk>N(FE4S!8fj_MzY3t!{Hm4g@`S=V|Sy;{0QdMh=O3~Gb4iOtl;
z*MDa#B1tBQ%%)mzrbA)dbQyH^J^+#)ARms4vg;d@5N9YQ<846A?=-6y(&ce@-~ofp
zQ3{`QE(#+N!f^(G4@Zt35DItw)yp6yeJjoxhYlLScvjo#Ng=-G1bGd6hf>anppn<~
zt+0RlM)zxbaZI)NkRCNG)XG~pLY&v5gz_BWGptlmBKJyrM(wX-pYRwB8_AaYF&dbI
zHiE>@od)ORs-sQSFh6P8c+Xvb^4}-m2yah#ani;jn_f@!zOMs*6g7TZ3NtZfLw#GP
zQ(w=bXCGp|7izb<KjgBc1Q88$Bp?hWJ1Eh-;!n(Yr!x|Ke#=sOVOx<VM)+BuJNc>T
z2_ZuVy=_jqVrQr*p%cNP%`I*(`cA<BYCUfZd{FE|`a!0cEfDmVSahD#Xolw;{32A~
zRb4OG#`z0as$!pLdurg#S?D;4pw}ddcz_NPQ+`H|E9Yw9imRD|d#MvuitQQptct^7
z!TCo6uihIMUd^`FoTtte9D4e&rT3TAzW-M`{ZTJ31`=@&p(M`aC6Y6V{koq+gl5GL
zy0w7;7|JbUc{7nAQ!aAU>x{||F4?7WuAi@3-yVr&P0;@hizlb*mnS>_q*4Thrn3xe
z?FZ9Fp4L=)KR3_Zi*e7a3v&KQ(Ypb#4oD~+LV945$C=5ch??Qxq>jKdfWi9wbkP6m
zTHUO{sT~CP3h1N%XGrH{a}EJ?#6&qSUKRlz6^_XGevu`8e1cCZkL|T5h$g1F$7-e|
zh?g5sK@+Z2j4^B<z_kJ8@oNYF+1p|#fv@Kw%YR1@f3KZqW@6?m?Hd~pWWP4+kzXwS
zT27SG(r}K)b8{QBuf?gf3!i~}dML-NPr0uEyd@0#B@(G*U~b{@N66xxgqy=q+F*<`
zsCwKfCUqqzf^Ia8kgu)Uh;~CSgYd1o{!C3zQ;RXHhj0Uz#_cG>mWg<W50FKepP(}O
zjLe8ucM=s405_nlA<|<=-n<D+1L&wTOMq320Og(_X}kQXP-ax&PDdOgHS#*he46o`
z&$P2yiAwhm^oi+=6GS818sckD`p34f_ZRsikABB%6Za*Gd&}*4rOABV`>8bBKFka<
zo@hSvU@(ld1oUpoB|5(`k<7EuptqmU5jF5Z<c?@>uUgosnRh>?8f3hKov5Vr3=hFz
zSvSgOM(-%a?5zXedOKrc(j$=t{KT;&4$BNfp50Jf3_y0;=551mY}R?)KWPq{FOgIV
z#4Z%j001`y09L!uYsha(@D_fCjPpQ22UXuhjA@exz7Mq+K99lOwf;DZC*}C}HPm*M
z;lVRg9m4_LILOrvR*?elL;U(rvX)zmTX|ngvP#?nHZ5ZlDtwM?OgLnvdcG(~O9OVd
zud^*{{$6?JTdDLx)O?(``)&alau(sG1CkP7UyDM~I><-6V44&zcYgl9C)RZnzus%;
zM9Re`ytcbSgO>BjTkaU=e>AQTA0FTg*{92DHqdx;sZbFHrPqOh_om7R{WjVD)3iKG
zzG!2A=&nLC+L@KfKB++TccYGQX3#1g<{0iD2wS2;a>|xKu^+^kyiVjkEQLbHJ6M4>
z`t3P#-Yi_IiWk3~wAGik;)Ues=r!kP^_a})qN%0o3WTEEO>N}z_+fOm0^1m7gQkr)
z%;nm9yJnT-(YRDTE!IfW>tgO7Dy%R)(PF$5;k~wU_trx{LN@Y~9+0(X(?Q$>q4V{K
z6=L<8=X_v~i@8KFih1tdvV6$|guUb8soe=;tH)ib6)}QkidujvCO2`iR~ZnTBeB(#
zX=t7E-w<S!pPTld?38@@gFNcaEKll4ePiC!B1?49rRy8+&&=UfU6ALd3G_#1{eVSE
zn!;+<sOA6gp>9=2C}_glTX+!`y-v9i;J5s)A&kGm`5zVBX;CogDiw(@GiW4|=*(!n
zhav%pySVi+mVa_YpkXs%h^1`(Fwol~Xw68Ubt#P8j(S6j6q~Bi=Nj-MVqdSO>KeOE
z9`gkF#Ls$2a^~?(S8W91YeX~A(;I)rn!H+!v4DDo@r!S2k}d@m-5>SZ37=YzHvObb
zr7E8pUK=)8VZa$(JZW&9+&TaxC%#%N6Mv=E(>*qsW{rW@6;~qmMKbB^yhD`guoLiT
zB12`c%vZn{dyyA5LA~IbT`ysu4aN=D3*<cC_?9uocMpL$hoioOc}|@k5mUv0v521U
zPsHTbWh@98&RLE%6n{50ov=^fNEyqK(u@WUF@?d-O3k*Ggc#<pyqytce{LvG^cF`+
zc=XT9F<<62PEGfAz=2i7wtfG4SI<2wc9MW{DVR3}R<!1<Blh@1j0>943Rfr62vg>q
z{WflXI|S()SNU^3s7Y=YG{07s0QB4}KO3+oQvDo-TBH4lr<F_w!t(sh<{uoGA6hoe
z%6_&hD<VLc&+W6%%}CRplY!9)(d;=PJ83JL@It8BV3+z!#s`D|nl{zKA=dp~6l3Bh
z!k~M0&cik&=?L^g>D!?IwOFz&c8<0qQl{blq*+miQfY~qC9V4PD#!M?*Z>hR^Q`ai
z<!UoMZ3~fM6T;rD=8r2VDup#6ld%CR>)H8&Idw}Mh@0#Qcr^h>6v>j-4o|m%K%?cp
z{H$XXK&aYnpJLW?E)&0|y!oUYOiHHXg+`GyZ|)~y^Gplx5=Xlr-Zuh*-SB*00bNu^
zJy82MWKyLQcT7Mp___iy4}Hpm-43%%qm=!saPfSHqkx!mhzHe_DOmSHucovOYq-rB
z|7XoKlMZb8+<WSAWFqPXUyhCeRJF<wtXE5~uzn#ca?yJ?w(0CwE!<>=B_)&5mC=d`
zZ}Ut^kv3<3Ag9GP2T_Y@fE>qU(4I9M^ygHFa-dde^x^B7xoR2nN;2ne+k@BvuNt*i
zy=TmiQ7+pE=)7|qpHPyNlTVp+*35DJSWx^wh6pff8Mdz+gm#q6>hNN}%Vvr>+ue%q
zJp~CP4i%yN?)bHHRRv~<+W_l<hU<vr*#V~K0?~wo$upWE1`Q6$X!W1l=x~9^6wMuv
z|7GotNPM1wCyd%Ej>b^08+N~2lL-Q$;j3~&@wvn8KOLc-$HG<4wfzY{A(KEsqfw=4
z@OxkqP#~auu66kHxJ_sWtA7O@bT1qrSbWJ=s!zpq9@J6iK~|J?443ecm!T}TNUP2*
zv32vMqTuBPa7UDCj^rU09H@|%zhVC@r)FgS#2)}4rK1Xk&Oy??u2Vu!|1RLQXcDdp
z4+9Tl@X*DKp<@X`Cxlq`g(+~nA0)=N!NIRq4e$W`X#a{={nNKBUw}Vp9xJdd&snm>
ziIq;%GD^HepG%$onapmA4DKS#NFBwq6{u0Yv<MWJ+>77q|4!b+*JsR0^o}>%o>vPb
z$3mGG*^a82htNr_995!U0yg3FVFf>(iDnq;D!A>ua?=aTguHXpV(e$ofo4i(ZYl@&
z4TD~}IF?kWxZIrgPrd1d9J+&b9axG_5+uqVY+GP>hl*%lH1cZc)=lWz0;r@*@8Z-g
z_3CjtlYll~uyul%`v+qNaoHLK&RYEu9Z0&?2o}8i7_Q=X<6Nqu*!wlo_NtE5RSacA
zc4I_C-vCbc@mECwoih|<O#s<d|8Mp@t^$Qmc?J9@+nl%_cR<&NcMk3U{Y?qYb!jQ<
zB#MW=3k=ic@=yY4kJ`ED)`>nC(l-TC&o=0Z?2Z-E=%$6h&li+n#nidNjwr14%FMWN
zhwUl}EK2h!AsZux){BN1*~GQ)eo+MFl-nT`!}_u<Ufclf>%iWMVa@v7*QorhSI{`7
zCR*G>QA7aTfk+c4UxfTgNFU8CWmzWtQS0*%%0^29q1-v<H}sJSr~$h+CwL+NoMH?7
zlIaoy{~Hwpdxa`~=$>kXd9B%xDBhaIB(=m7u^&g-YB?D9W563KG5ZU}=lqzekjw=*
zQ=8ba3Fjn-1uOYUbYdWO(5HPsTxw>V$XtNk3)At5uN(y2CA3BrZyk<FI-qxmHt*ZQ
z&!wkK9FQ0Gf_!5i-{fmbxpsM)P2&fenR*ilLFjY^ukc3^-;3V?I7`#B7ewb!oAn5b
zR3C%+wrD=!VH>29Uu1S{lAglwQSFa&##x9;`$e8hUj+(`D`YwNbVY<N&qoVBINKlm
zFel0#v?ikE=uBK4_i>U_ltJM90cLYwzx7LS{2sRtLLsI{X`w%%*P`0%EyHwGu9F2)
z>V@CAd?2OfHc7q+XoAv9+UE*aj%3_`rT9vXhu42J<Nc(#(y~0706d-UVF(0uy)jL|
z5pO`90X!`$vaKLj8_2>m9=#0P-Dl}RA#x6Jva1PlFHDXXuw&_O`;AnO2K6>37?Y;`
zs&L%skTxpB`<z)Mx2f&qAbUTH(7V`K>(TDu7~$I9>P*k|D^X`JG6FXIl6x4k{Jl0L
zj$3h55n)-Z1v*Vxd_M$o+Fj2A*zus-5jbF$Eg2znzF&vz4W;_JoOh{Wf%3Pxr4_i`
zd<?1!Q3}=sU}UDe8{QJpS^<R~&-{qAu3{An4tJ%C*{O7OlY{%k6nfCSfJZIVjJQ(w
zBwz-D{x3J^Sk-VZX#ckmg0K+UDNZ$D7(-J>uV)MzLSZIs^v55adc<<)BOlnO9f@BS
zi*$OwyZnoWr3#c$Z|41j*56wR?udGGJ>AkwTITvP)=J?FLPq!4$`FFVugGTe?rz>y
z;nkto;R{lrhsEv!EzsU=ZPi9cuFmpOW-`3~kYI3Uh(w59ymjXf|BXq&Y=0ZP4wX&t
zrysAA;P2M}QP2g(O?Ez8gcikExNwOYgbp(7vG9#B&x&ux7d^1qhepF1B%fv%h1bIT
zeB2yj!M2JMT{<k*;%Hk9Nse&}l>`Nh5GU7nN3b!Wn{b?r#>Qo^vkmW;F38M7gvmWz
zULnhR0nOxkK>m-Xu^t!Q3pT5+Hp+OGYIq{2vBHYFL%8y=_PTC9>Y>W)b#i9CNIgq=
zn6C7Ws;aG6Z^ymaY%<CsQ1_6}#**0uBd?-GzGUufK4~~%yTdzIkH;XYyTkdY>_UGb
ztf01K+@nQwKdd69+Zy*jD?|$?>%`at19S5H#d#&Jb#Ae(PTC|1%F*}3dn(2|;Gvw_
z{FG&+BX1#o<GZ5`l?IC4#~mM=a86E1l7Yjz;Qf4lQz5pd?E_>u`w;>tNoXD-nn88m
z1}5dPZJ@bK%*h9;#OdBNVt^^>hf41Y!j*>0?lRLs<BWqHapL85Gq{~7=^k@O(p4;b
z5u3b-JwM#z=wbx#Bc?MZw>W{IMks+lJ1+pM@``2Br9;C>nVWqdzsk8Buz!Qf-7||A
zPu2i+!DM_%MS$J@k{{@HOG9TcEfR{!g0zJcKEIA4ph!4XjN$D5c%e)JNSB=CB_BQc
z@XU*B@Nm|9Cg5jPOgXd>@`e<38$6%D`!fYAj)T0z-nVy~G9bPr909p|=CH3{PR0@#
zXu<EB=yC0G?j_pl%qqzb008V*Hk>7RmBG|~Usy=}PbMRu1I1FLmK+1mAl|WC`OQso
zDAc*iqG@vio+pRIayaJ)5x&0PfEZ>)BT2i3`CHQA1xnZwB&oQHmefz@&3}rkekYr?
zer2dpbK%5?gd6IZ{)O9z+?u|fk1V#KDn>T$|JL?UE}w0~+J^5{qfZT;P#&ca%K&`*
z<N75i@h`2IaMEh;x3>tN%X$lyOmD?10^z{vSjTv3(>^Q}Zfh(IxSnK&5~%8FC>uJk
zES_^OOM=qQvL~1VZ762}uff*Nk0t8H4;Lmmug&89!ZL}oC4IUF*c=CTw~HYt^6zA+
zF#t=EA8HJ)#HGDPf8niy1U9>hHXIlKfEUA9m2X4>1q|M|R*~G#bD@vHs&p>m;#YN$
zt9tust|j*|ui>J#^c+Sj#?OE|V!;ymr(i1L5-5uSnztJ`<m+kFpeQ3&cqZ+$sx8Ld
z9Gr;`KR1ZH(<(+FKWB9QbH1Dvo;;l+9#>k42HNG6vNq7{G6_a^HDXc0P#Qo$ta7c0
zUNLP{8=@oBR-O{0wJqs|!S%piEu8#$>P<Z!CQ;}s%(cjPqDaSLhOqSd2Qi*4-i2b%
z7sqZbp)z&Pe1e1c(711<IGDsSo?&thcq-8SZ&V}hT4HL$n&XYfO>@;MQVCh<{*mZI
z9Rrm~-ZP69dYf?xG(NvL_^k#r0eRyDnpOBK9D6@L5$VOV`&sZ?o02<+TrFq$8r@_t
z@tKHO>S@?}XX015qFm?|RG<I=00s4oFHbKuLYD_?g<)RXP2ltZ=dTHAK@w^*?*k0X
zN+fbY+fJypiS-Iey2FiAI!3*>Xgs9(egB!%?zk+A*nbQ0bc1J+H>O-kVNr<8=BsSq
zx}+Mu<ri1kuQFHgyBChJReg0E8OI=1{Sym)lsl$-l*?-FCe_+P;Q$)(84lcU*R6n|
zKUp@fM@m+&EfYE2WZa#fkmRC`$nuY_dRc#rxcI??C*QiypNFf9h9}jSeXa%=UML@B
zHt{Om-1=x_cu6V%1%wZ423jIgr9Tq@1Y=4g5jlrBFR{s$yY~)$m#XlZ)bUU3NmwE-
zPFH{+7IXF%Ca-Iqfm;3NHefKJ<>zi{LUrQZx8%wMe^dIGZW@(xXoLy09dA^&<b{%v
zI|?uffzFa!yUz+=!1cLWQZ!la=4}clx4M$VUiUe0>$@<`(LR{0IC)(mRkG~p$$~qm
zL{+aPFYfuZvhT|hSKtnYVsAax($%Y5t2v3NzCO1|%(8Q$pk#_;Mq7ZXIjlBp!uOo)
zGNZ1xmcT<A+c{N(RjG10r@<(SL1dS=E;md;YsMAh67puc%B}><Bc8hY<Vog<BWXQ1
zKV^*gQl9+b1NwQU;}eoL;&U?>^NFu0adYYOIpsA9?7k3~r=#gzcDXG91#$d&WO343
z1xv=rdw8&dM1VxAU!ae_@N=c~FZq1<7_gAcanvV@s)wQdA7X$RE(l=;?h_1w7{-s)
zLVl1pg4s_=cND_oeJ1@}fO8sfEGCf`zKoSgYujKK13CgshPIhOia>D>*c%|yVB$-I
zZ|zu9B)`32GWc7&Cit`Ow+<!-X4wYf)91H(1;WvIF<}nWUWf671l;{=G&Fw2&-E}b
z`uEA;?2vjG%FdX&tx|kCh-JE*k)0;lO|M<1#PFp$!uKm(&S5T>KffWn0R2vR=3w58
z<SYhry(j-~)U*;Xx@?lJLv)#_gQ(s@3P6K1i$V;poHa*kNQ+?!g1>Ylt(uoUUrP!C
z-+IYXKWGk=S`d8xNve%&-)a>qkqnEDTD!219Df#<ssUak)P-2$I>7&Q5_9(hUE9k+
z3G>e^f*Iyo(0PS55&93}uUW+JI?WB_>D~&3$Ic)jsfD-dGlwwx7FACq&>OMMbV}9<
zy87TxqsJS`7wRIizTlPdv9`LwrLEF0hX+8T1LTgj^)~y#wzx?tZiwmlEY~UWuZB~0
zA*e-z4F_e{AM`Xj?qT+gxMVLt?hzx!<X=x{zYQFH8RcdXwvHD6cduK*Th=ZN>VVWO
zcoSm}VN!R#e5TDQK<^7dWnu_)l~jw|`9f4r6T6eYgO85$onzEwpIv|MEIuT1-J^Nq
ze?EGM3IQ%gPIMvC{#mKNL;91+F2y0IoOAlaAkp=sNXRxXUvYUX0+5f1c0%m%2p5uk
zpe?&*reP3!7?hreS=@Y^U9qDlnKs)!ZC@s$<INw$<P4R;PhmI6ZJCa{;IW6|MnQq~
z%~9l;1JS@0rOvBE8lDJ7)WQK!UNep5Va_7y0Qus1Lj;5b&%ttdz@nijh#%d?WObuK
z%h2TYs?5l_n#EAMdRk?EW$F?Pwr#StVIc4Ho0q#@)%YPoFM4?K^Os${@;gw0==B{`
zR(IDlLNoOvwKvgT@xBE^4^D)qlH&*MQ(H8F+E|nf(JTP_CvP2mXKF7E+g)JDV#QLS
z2ZPS<2W%8r;?!vbHPdMB{&GFiEqVWbsJeRre9v!%b@a#)r@ig2uJ5Iv^G>JDe~MM9
zk!a8{Y1As*1$K#WorR?n+qhd>n_UwGCfl;=Lf}RW{EB;~%xDhWFZSrgiC@Yl1cHp|
z^bB~8pTf*$sSxOFX-U7gh0<8@Fo!V`GcaDs6fSX*nrxQs8CD)=2A%ars(%50Rvcxw
zv7{Aqx4w5C9M7_m4q;$Sb8$m30J=Wwp`gD9;e^5GFCf~-lWCXToajDvzG%q^^~P#^
z&H{7|G;S>?BJ;#q+F^#fqja8L&i~Q|bt(v*+|`!8;zTFf9$R{^Ol(z;?ojYm>7rL!
zz9(}Igp_<dzF3M}M}6kjw1aSnITinm?+Wh=OpNGfzMWff0D=*#VhaY;_ALD>PO4}n
z?X#)u+u5t)6mpAIH;x4^lqPF{?gZuv3{cyA&2FxoQHZ+&0N5$B+486#A|vC$JzEJt
zCwP!&M4es!7(N0Ooy>ijgEIYhTY)mt{3sF>LV(fbdx9dp#Y(l#>T`R;06ulTbadD8
zg3b20L>_+X9Y<mk20#qnbr17onvH!q1NK}dTTB0dS$a4<t<CbeFW{;S&C5Sl%72Ct
zPPLp5>|3#pIAtZI(r`vKI@lTg9=;OY$cbWa7?EvR{LaKPWXCrQ%}pN%3l>wtG+7^+
zDwgKgxo@8ln5@(aq}3Y)Dg3h7L&jeI<W({}3f&n>cJ8_>)4`$6>|j}={3r{);|Q*N
zKBT#D>u74vG+KnzsE2QkYEFguZWO<f=#wtEC(qpXi%67e7KzL5jdMA~;XkeilO*ik
zSQ)AEmkQPe{ZT9A4+)o&^+ZQ39R`5l3}8&3Zq=UXq5_ogTi4VjNh@w+IQBK9YAN5I
zHwP*yzwX0M3e)}UD|kzu$$zVGEb1lDX2XhL_-_0js}-4$ne9<?0Xh<}#*!aDH?lZk
z!g+$XmBYnWc&aS>k(It9_(-Q9<#xQtPR66iQ1tb~G5w2%+?p!`zhk2+L8&Y>x7&f}
z_atsTmy_wXLHX!hhzc%IVVypGQr~`ogtG3uQz{f>Rakdks`R7x$#Z=!G(kaYK|Km3
zp65qAnI?6;fG^O5wD5Q~pO1biU)Ft^S~UGp(-n3b5UpFEd?(y<o9KLYJIFI*P$`7w
zSyY9TtNW#9GB|SNNg3|-*Q~2jk_)TL!)uKj+oV-mGOnSvSCy2!TBC|u&t!uqeQ{lz
zcuzP<gacR={$(DwFWGoo5>?!0BB?S$!zFlEt<#0EQ*OTabY=vkHW0$3;vV9NJ8PHR
zL^VM$GgsY&G`zfeTQE~ZX2Yb_zq8jgLtCJe^EKt~y868^Mg$`Byzdbby$-x$<&15l
z^dhQ{o%4b66OK3@vw|<5q3`NZAAnTK5rpQ79_0_j^}Z)raZbqa^EW5aw+FHSm%;{-
z75|#tr@>WaY)cyJFkCk@XQQFIwR^36*c*?u>|ifWVBoT~TpKgtA7S&Md6cD_L=J}^
zvTa)Y1?pUHJT+q^>qnrx%B?i_c_RQwK)1iF=SNuMw9dgmhI-r#(me0p@XCFfYHGiv
zbh?mV;7!dB$>xB!N>Fw~;3>%R1-O}dGuBK~hPuP=%#u$SCbP|@s|-nmaQWae^YnA_
zx_D|<8VZJk4;UKV7tN7h8HaXzO@^>tM?7&Y4nyT;^;1F>rh^Itl(ahSH!^IkQx(hX
zK%VXEie6+)5j5<ypDN1x_LcHcJvI80n}uT!+#LYu-oOcm4Vgp2(%G(!D$a^Q3VWbw
zOAy<>vCL;b&&eR6K4sZo^Vxk%E@N?!KWS}|4W7MGxGnf{9TUY(Hp$&UUmEA$LY2Hx
zR$}rBAMD6R59!O-YuYba3jBq}l2(SM4Nqax!6b0M=Gp+X`y!C%jJ+-(>KG(yVsB1`
z8lb}oCW|!ysl$ZCU9QbJhguj7w2$|(4y7?$X<`tehnzKpwWMXsBGi%&c6{E9u3Z(-
z--*mMOrN%;Re0+Dl&R5&Z>i26{$VVD`wwqE{Lk#Bn1iQXP>2aTv{$||vUfhh^Q=S*
zQ$GnBuikTA@dO>%0q^mOKTsAQ6yt$yN<AYq9KjxEqw~Xz+0S8a>0cfaBoHRBx|vC2
z7_qE#F<gXNCRu4*>pm?FSm?{o)w?;uxBS846DG?%XnQ&n!RG)H?Y9`}+jOlTePgIC
z5did(A~OcC_Wb>BcAtuXYK<8U`Whd+fN!s&X7=DwR?da4ILtm+Kkx&+zoBFObs>w{
z6<GD>A_3KY2565a<YE;q2O^Ew8L0Y|`5%8JTE|O?;ot+e`UWP~*j0Z7e-M=<qm;(K
z?0eu#PHw8UnOKmQiGoAXf&dNwtLV`{)na`Mz<c{1uZjpfIls3NR(Z&};d$Iv$Wer0
zW{DBDsOLZ^C!=x#KRGw30fTILKHeR9vlxyUk%qu~Ww8a)LsH6DJaUlH<z#YHX9TH-
zbPVQe%ZwDPKEWID7)3t*R?PD;50Gz~on8gh6LJscM6PU2syv%%PSOVc_CVcauDp?(
zWV?|$t4#yYDx!$orvX!D$n#Bb*uW?UquWuM$9WmN?PW!?4o(8PIb44t&i6C+b003*
z&!WSl%4aJB{$7?UoF9eq!Z3BG@#X?yTED^jBAfBvV5V@rj^jp4VL+jO5wD`^@5JNE
zSY){fNq^D$^cmq33x(<^)R60)k5;=vz(0R=sI;NUw){&}ep_j8Q5913PF<a0&UsSi
zxbw?o<P&N7c^U$|o&s0}Q5U`DpUsl>tOm8f%}XM~{2}MpFJCN_z@YZab-HdH>vNN!
zk$sR4R=@PBgdC>9NHiWI>&s`t7Dr}{gR|3}&`1`GqXwdAzE0*)_5PYAx%1N?wTa>6
z+Ga4+8qu}ftOm;rH~BUBRd{T#iiRpZOnO_*=h8k+5X-aB`$OC57aO*Z$Ozd!$mV*&
z6aG7+HfRd|$LEg753tam4+kPn6fzk<5*);`v<4HsiX7{t0N`8qf(O;y8s}mZ5xBy^
zI`WJ76D)F2mXeNH=j4bL2UzE<YYo{qA{C0|knXw0=(QxK#a`z2F67Ikjb2s=B0<#<
zc3oY4NWC>V(?~Uu6h=dZduGxA000024#hZ&h7Vaeqs^keJMPk^w5e<VG<R6Lj?ukX
zw7=*W$@aylldcS6jneC^8!&AKu?Gp4d;n_$Ky=2494w7ih2g^O3~5_W7L}AO2(n8I
zxOrgl_peI*K;@=F-H!gGq|rS^rC)>6S$1p0EE$m%OJm3O8K=qZq66r@8R5#;Vn!RR
zWeGInk{QLhvMs`MZs2ArxF3j(YX1UB*tghaQ8D(M>tnsZa~T7XzOzzPSK+m^N2FcU
z%daflNY*lS=C$G<WxW_3$!mR|Az1%l`Fu)8;8_x=`ILtP402vFX{XXsxgxa=%F$J(
z(?5kUkXd583DZVT_lomd2_*?>bTF_4&mBe%er~jy9^d6nCF5yV;mP&V-uBA9&@&k&
zrVl*<#@z7#eS2c?b24npT45`ud9)8g9b=^+yqBO|(2YIItk$e}hPhqK(5vv=0<kG0
zte)bpR@;c0a;Kwe7McSxOy15Yq~yT+Cj-0{aJ@`|$7r$`#QzJT1>boJwIyMzOJ1cE
zxi~s0aP`dSA%!llLtj1fJ$$A=`RnWfXZt#PKUBq{J;Z!55oAtzOSxKK8$lLK`pj#D
z@`hKSx%IY)DK+|-G?i85@g`@ee8+CXF^|2=vR29vQMDNf=l0<g9?Y{-UjH}u(-b+}
zRBo2if&YNU1L;tl7T(fVPBa(a$PDq%uml&@R03C$d;NsJVm=}|j{Y+aKQ}Zu^{JyX
z+usime25H82zi!DVSOB7;|!JyJ$E1`aF+t=%*G<aCRMllTuE%#c}V9Ibs{f*PZw7G
zX{gWL)>q{udJql#;Bd2f-XN=t?X-Z<@C<_`xPZJVwp#7u!>Lua3yp01mWy;D?wT~1
zqeS94^lG6~Ju5L-;s`f&asHI3S<1{-g5Q^h72t{abSP*St3|Dg5K=+~xtG%|%Nrc!
zx!{HTl0^SbrPB7TNXKG9uW7bN(=yXZx0;eIJE)H*69tey*$?_hkx#rr?C;h5AfLqV
z@f%MoAkA9uUQ@KlhzZ&PPbJnAHTtTIR>Er3hwj<2kXxTx!vHhE0@0v;UCp){1UON}
z3BV|hLQVu)mf$Y-9a0yyb|js*Z7(^F<2mcJ!eo!?nD$VWN6AeG;5~J9XhSiD&pR*N
zzrX)@&vW95Zh}7^({VdD;~_C0gQQ4lTVbR>{}W8g@L9*4D+ad8*c1npy13u1J(PSE
znCJ9@d_^ofI}m4g>M9TqVJ<07rd&RTyuqFHg?Ex-WZ(dClgaYavt9-r{5pvnD1{N`
zfez>ASK_I0k=FH2^!mJqg+FF0{663V=cl{EHAYz<DkKK;pRT0S^nr3Zo`=&PMzlY~
zkjC;gvz$XA^RoKpQ#qwmP^q;{7~af`7~5?tbCQBk@qkU1rq~Ir6*sb^Bd$x|CL#cl
zeJ5K`Ly?%$V?Rgu<?L*a-R_JYfe2(oB-4~47GbPqei0|V{`8^T=v5y6{qe;RnNPRo
zyhC(!p6&yPU#c|2ydy;EfDeBe=Yn$&qM(GOy$#i~_F#5_y9wL{KayK!u_PHYU`w=U
z$iTk0K}B54DyP5e^Z#{zOPvzu>ivHuW$+mPHnX*UWpSIIZWcD-4h5eq=6bsmzFT;?
zr(LG~{JGssxsS8bM`KfLA{PA88}2p>{;l1jQsgHfsA=+PR8n-!Kw;+O=!dbA0Rl&@
z4tJTb!UFiAKms-CyI@FaZCdQG%)~xDiXJPAVk-FK)rKnk`G|%ozh8-?MY`@>y6;;e
zPYQ2Np-GN(61DgsA~RP5+iSwTcLP2_*=_6WQ^X4rQ8>RxCoh;DQ_be3yfujzk9Zk8
z+E2&~2HsP<SIlDgGbQX}`PkX4l^Y=)@{L@Enx4L9CUv_b4{V@KK{lZFTT};Wh#qy(
zaO)cSOV)^6^1>jGa$~@k`&GXC^I!;5`%a@*EkkU&g46ewMtV2Cz1P<p#nCqsGj0_J
z^iGxc_aizq^P_zQy&O(Ah`)8s8CiGRVY6{5***Ag^_N}Ly7cwmlY9TpfOMzc!uY3I
zVPrih0=u3oYVeA_O`61h#nes6gqi=L(;Xtu&u9k7oCsF7o=%sS{fekM$qr;@FElSh
zBy!H0JDGbpUYA^J5(K1m7iv<NpOAO*ygc;W<xB+;_!S!hiU&Hxa2CrU_19IjL=wWU
zb!|@>D^!R{$uVGI>Az^xtNalU!Ie?fr)jok^p<<a2&z6~dkroigF`H;k}7f*&ID{N
zA*>YC4QiQ6PNifdGOh)D9tiecdUJ){{m7S)SK6Xzg=(ZW=_?!_#P#2}C4AnvF<RE=
zI^^L&uP3bZK70IPi^JRH9*C4<NI7}f0|^=1EF){Z)G<dvfC_~Z0e3dzW;0|t@`X3S
z)RP55KC~fnpg@UJx|)50;|erO-G3s9Enbj0i9b!Ri>PSvvhmn!8HUfCX=4a+QnE<T
z5JAwHFzBgCZUu$faJ7Ekl_y<oRKD?3FwZ&@_-c+)J{EEX6)E!ii0U#LNpTeCHL-Dp
zJ3fjD&;mQWBsDHX$pH`lzdJ<UGBT7E@t)ERc?QkMIjlUg3WajU!#z=WWH-8<wVkSk
z!<34AvI(BCX-c?5)n=1>=-%m%TF|hQ&l{%ll0R+GmnR@?fP;}AlWNA<yYuq7arFXs
zyP0t?eI}?LyS(ZLcxL#V`sWqVa>teUv~fDgO*)A2cxO+}^?u5^?S?oeCX3trzF6(K
zC1l+k^lBbNjJ7j!$N@At|9N*2=2Mf(;gJq4S$oO~7QflM$2wMT^<;0}OmHQFzP6`+
z9;rr|1a(}$i^NW6nuuK?YIs8ZRvG({4!0RITG~r+CE?Eb)G-G*ZedG?HPYGxYmiil
z8pckO`q4^^v_Vki+zPg$xot+S;!v*BM{Je-LluMUOgjAbz8;WWU(hgt)n*2)A;n(0
z5^oj7eZ1AQ2}*V;O&XdZzm-IL5>rVu_C7v~E(c|Io;+!GPW!lw^Ox3yiM+Xl5_#dA
z(oc^k9-f(dI;b5XP8TZ18SYb}{)QLUdsV$HQ1yK{UuSiMfWwTrgW?@mZcCn^wBE?E
zen<7@a_u`!M$vL5QNgQuIrjuwV2Zsa6fVtzJ<IJo$Ty8yN4vyDZ|c9pcxp%e2Veqc
z_N(z1?@g2+);-9I5?0+;-ij``;kO2Vw)sLLkGcYcTQgCyBC2sv;k4e&y$eCBbPAIu
zEHSa+o&c{Z#2~q$rd`HYa!7UY`1|QND6t#6f%0LMJM@|f4S(CD&0l~2!ZLA}qwPE-
zLpWS3gaF(RX{XhM{v=+fD#X4^N){>mcu`zj=TYBe;CG;GFvvn2>oDIF6M7$dulSrA
z@e!1YY9qBJdKx5OlyDQ^SGQxJF-E=SMOyhXmOns2@V=|rUZUKXc3;Re`+qkj_;_nI
zeDlAZCA@sS)>!^t!%$D?oqCj5(RQDBtMkbk2Ma`&*`ArABKLpbL57;30K=q044PMn
zSh8Xy*^{>54)4zJ4e2QP%oo-c2YW$nilcOX{tW5B%lm<dmX2(NOJV78bhJW9Y$`>^
zDh^Quk3Rt1DFhM#1`@|3A`>so$r{`i(uIctYja{bkXR`ue`6xHdy<s|8J1+S^Az?c
zcKxd;JI-rnw$@A&>PBwZp+gW$yx%G~uEDU@ES_$oyk+Qa&{-ftil!SfinCRZx2GyU
zqg3mP6a(en;nZ+-FDi>Mc$E#MY=SaD#7l~crLxEFhsjD426g+V@LmtqbpIYda{0>0
zOW4L{zCk!5e{)&zls}R6i+En&Vr4-gWI8zV9hn2@ImN`VrqqrdT9;e>vw^h;2P<@*
zHGqEr`UO{AkwtK>Ica|Uf0+!N!JvP(t~7MzB9p4n8_rapL(tNaaeK)5g<GaOkdmeG
z-F7r2%4RI{ez2F^|NPwjGi;hDvQmNk4ZL}n2w?CTYuzNiBdix>?RAZN(;p2gVarUh
zg}%|VXiew0H+#riQ3(s(8big~&499O-q}vLvf=7A(HH$OTF6}t-yAxDDxHUcalunq
zD)B7nEf6~9aVD3g(|9;OnuX?drS(UX^|hY>!#w0%^hd4!ZKaBr=S_@T13I-;53Vri
z5~cxpU2^~e&B6SmJvF0$)88*F55;5?N>Uwb_sa`2q|>#0E=3wdM*s-L{7p211ybkY
zV+RMOGxD={mIjSun41qmU}*-4{B3Ud{_W>8S2LTH5L5unn<HtBm0u*SSdC1{;f<V7
z(Ta7}k2)onx0jG16F#8;vDTf5H;j6f!_48oYu2nR*E9tDA%*w9;klcmaz+^el5!QO
zwg!UQkz=qIVt8vU_tD69HfySn%ZNt)$NV0ANs!p$CXRLzS4M!WxiQjjcaqPhxc2W}
zH7T6N_5dfY^hrEUqHAZ~9Iy^OVp-{5!u9Dp({P{w*;gms60vnlHpI+pBKPAOnHeaQ
zJQZCSNsEnXS)a4S;`_@vYE~5m^d@-cZ@<6G6?mz};2i76e3&^CH0l0~;3@kvhH8Zf
zX>HL7%qTYr!QX4@N8$UHQoL|AMQ_do^@+rt?VR+s!c$lE>%;l#bx}_Pbpg$s7dBqA
z|9}Y$If08l#L^sroL|w}1*;tZreLt<WB2;wWPCR0{k>vkgQPO&N#_ZN9+06H$xP$;
z@%`sY4`egy9n;+|)=S?IDf>oX6p`fR1JdPIdL+gPOWp-mpF%f=^Qp-NtTB1DE$)l5
z2u=gnoAA|$Zy^^MUXh(&`pv6$^ZmLyhg#i1P$#}|lCLRJT8rtu!Gd+BtA;2v2|_L7
zkWF(gT3nEqP1z{}aQBN_bc91`#hONz=8kRQ-)r1r%RK;yu5r!lg8XiD4u<Zi34-Sb
zPXG{n5#uTD5fy-Jb{@V@!)qG$PQrlc-0ed^cm41Zlb`?q000Cc?^?z}1?4gAPO5H>
zd}S;=RW8uW8qP!c>~C4aiJ0zszYLhkZVa}j2K0FLbko1yYwS#M&{ddGBcfL<D!2wZ
z2lU~_#6lkzA*Fg%IvvS`P)1~!!oX9KsqH%@V4)*Aw>WX=8$?Z!d1GR643b0Su-7t&
z`OVGVIT(4}9nApl)>}&V%3Bb_eU_lY0?2R&#H&lMAHj#?SFPZwv$7hD-Wn=w*2auf
zp@MNl`FpY6Fe(^y)_@da&tBuRu8eDe2N=iK250lYcDorltUralxBC65{JUEBp^R0u
z;M7&jDq12Snhio?a5NK<;E-a1`Aby&1>AnaJ+Ozg^RpB3N~9ncW-E;zVKwT9#VeE|
z7HtVJ8Q?<g=pkbD4Mr){A-Mlj2K(_t{|{7+(d$~zpnk;l_%+ycpOnL-iq@UJYmDgc
zZC$5ssIOpZ<`<wqc|#}6jfJsSz=?0Wgzpq!;~_mG9w3`+lj#B_XCF{E<4r#H42Y%c
z!zK8a$fM{QI$&0GGPG@UZj-Rf%H@`e+ic|gfN~hhQLr%+hVS878?44hQjnM1ZqPl>
z`&>@CXZDVn2ih}LAPp@P;aJb?-~bF`XAAK30hB$jOEZbD@vo-@>l4|!YG4JxOPyQN
zWFla1Ax{UDE$Z7Aa4b(HNJ9m}PmuYo7zK}W{~ww(y`E)hf|UA8B}w<lVj)FjrEy?v
ztjpg&5E4`-Qz>!4ka98oSTJ8KFpBa>Se;SxReBV$n+7A$Tbb(LL$vqQiJkRi8UFm!
zd~yyGGU?P?zSUlEb1}oQ2G#5k4VLJ{7*+0muhN)NqE{`>+!>=bWzaA5C);U>Pk_h=
z`Me^Z!AoFt${?XgP2w4F)@(9PBP7L#%ycL0dAwFk9~ms~<Rq1m2RDsX(Z9YekW|(V
zibFGlt0Ik^wz25SA4aYyjc!~JH7^5!bH#osXRz8>F^W`FYxf9;?t@L-FOx+W0Fxb^
z_oUQKYx`2CR@(1Ib~`d0HlhE4_s08OKWp9<wQEU?7BUYc&H<78TblGRnLuBlH~yrA
z@I5Xy_eFZP{8%^2ZF>^Tb^r89kbtHwjV(Hourt~OJUC12FA|{2Y@N$|efflkp~YO~
zC<}A*gUmEe5;_#oOj{zJ;yjI9vHO`mPvJvu)ibJc0ZVZ4R)!(g<O%_tT%Yt(<&BxX
za#=<4{_x@N!Fy%kZZ^T!Zu%{)r<wTnkK{>m8_vPvGPd`aI>1Q%_O*z)pD!tjo^m$l
z;=Y)Ew1rTaO~x<zVdIj4IXU7G$>G<cFWbKN_FsYF-3Umc^nvn;G>Racg!ccjLTF<B
z-&u$6T530@`$vJo<${3iNCI)!%f3_(A23#buLV!H(RON@g(T~%00|*|V=rNr#$Wmw
zfuMcl>_)+nu*k!S%!RbMKH`A5U}0>K6k&R!4mf;a@PsbvQt!B9l;pJQoC)vCb{<K}
z_-0ks6EBG)N<vRn*0G-7)a!`Smbs!oZ5eb=4iPUh2ROp^oXzf!n-#m5Acl3mxKrQ6
zd#N{WsLbK^^NsyRR_V=k?LrefdlfxGFMLI87$Fy-3IRsA!zN7o1A*Nlu7|H&gYkId
z9G+#JFdI<XW;&9AtfRt$CD?MG^~a{ct;i7vR5CA?CXqprr#KTdC_sUs<^x16C~_1u
zwk^}z<J|vb1;q2n7ds<;`B3GQyHJ!-mpI8-@UKXj?~oj6P40W;^|qlQ9=EI#o@lue
zHdb&xNzSma5eF{?-jsj9?>ABsDw9Knu6FG%j19hV6^gi^)yw@!<#}yi0EP-?xNewz
zHSKX)dYf8FQ*fui4enQ2Ps4FYh)$&BiawPJe2w|~{npjGKDtMF5a~`gvKhab-X|2F
zZs98)_M%`-jVe%1T2B1M(Bm=*C+Nzan0o!NHc6LJV<MGq(mn$-uU|Fp-XYD4FgAIm
z%lKA-u4NYN4`S)fAnT`?(Hi|+ho+;xRqxS_Qz=V6`tesF2JU-#+c>hFFixp}+XkEi
zYq6G(ps~5cdwau4$TxW65VJlwf0-aS|D^45pzA7VVt`iw*n(Gjozd6pI`E-0%$4gj
z9j+0IpPzPB!`4uZK=Lu0oG^n7EVUUa!kg1fa2%ajZ<|NxtnEN1LJ=b$i-{ZpVCUg{
zUp})8^-kJR*Gkoo0OzDm$o=Hj8LxFd*4@iPE%+oa5tjpR1CH{C>>anOCE9K{W@x{7
zJP5D~%}E}HErqTZj%qcIdx{v=GT#=f1dM*yiV^(S+;>iT;V10Ul1UpqjWOoi(xj1Q
ztP4S6K0)b#>W(Q?+C64-FGUl9a+O_`;F={vs_6qXG_1c^a~&wVpgD85;z~*`C~jYm
zqL#`sJqZ`lweAH6_|D@mHUeImj1pDj3Us2dol1Ra<e9#gc*ZilXSGi=1pr2U@yyx(
z;?$!Hdo~otB7S0`48^WfC;e`&IBG75|6g9#Xrs+b8C?5E()!E*lEI(Qo&cKOD1^4~
z!wtszr76hljNi$dL_?wtbStegK9}j1-+UPPw6-CmfTe`8__e>LKHVn?{&li^Y_dKz
z&lj@Q)Y`F2+-VJptym@Jc(8|bMRi93Ct36&r8C<8;=9ju%Eq%=c?7N7sUVuI@|gC2
zv0v%|0iZR&e&R^<G?9zdA1@KIGW?j>;L;vpK7;YgWBYs{>J-hDhc$jD&}mPw#qt6~
z@xY?l`x`~m;|+aGV`E~G{66?vo3X_BjIayZbDv~9tz;lr4@%R{-a{zlB+#}xTHyFo
zx)^5P(lMZ7qW7QZb++Q(JOHV)jP?t-rUO{hpuVde*V06y!}Q4k{aRm)&zg5RxO8SG
z(vLRzKZNa093nJt>xs?J)slZUVc2#*ke9ckj$d65Z(X2w(h0INcD1!92Os9?|4s4d
zn}*jKH@gAVvu12yL5<`TI@1%g7K=*F%~kcb401cvXW`Q0jMGE5_ia`%AeH2{q>Sv}
zzNjz9*1;pPv`Vl?^?(VZ1(iUV?YLz)p2GG#dfNiv4s?t0O9CwU6MzsdI~|1z2zgVO
z24OS%WteiR=WrYP68YZHH9Dvi;40z(*e|L*X#q8vg@v4Bs4KERJ;j~a#&psc5EO4e
zI3f}`E*3idM<=3^#1R{<wz-t{o1sV!^gkLH-rHn;<TQ1B)lJIsAcD&m1npqrB!;0W
z$1uxAFtr^OOr!l@qK)7@dOPjH#d!d!D}h{l&;@O^lNH&cd-yGH%Ac(S2mH(zRphP@
z_kdCQ_ZBAD0#(&NEFPG!owlcTjF22lKI^UXetRz!fy&h=<Zisg3?)OVlaV#mb>sI~
z46}Gz_|bHxadNCaNg+OvHSAFhHz%H&rHTFS?m(*9n^t~_&r_gV=zJs8vf?V_NRli&
zg^XEJNdCm~*2pzuG^I%KH|iq8Zy3Lyn4BjIq~+vI+UtDUW8>0SAGv%aZZLY`r<46)
zd4((ky0<}Z?dp8cl`bY`qmJg`Wbp-o=rQNArE>4!1Ap1f{-;VA^f!&A{rS*Ys9QU6
zo`(7Yi*?cYw6NkS{U=#L<{$jpatYA3w3~F3Mw*~(zL5Kz6Lb?Q$K~d3g9cmOIy^${
z>4@+gb&9i5tphjJac8ZL&tv3O$5^Vv#)Y-xP1OUguZ=QrknSKCjQva1M?e5KskPy$
z$PSB&M=C_msiM%*+`5PGQ8KzlI^)$C2K$_14~OUvo1aYM4j+xMK|C#$y?+j+CAy}<
zLylJoO)B^;?C8vf9BY<iuErAxxK`!Z^|?XbH<9`$O3O7el5zQE=Gz|47nV*H?sfnG
zHK4@CFEiPnVDf`EbjWY}kBsXhmk^!FTS+9yJ|oDcQOO#^IR|pxw77w?pSkX&Ynz8_
z<+wxYJ;C$LwMRzvKR&K_2unB#vJmQ%9cwyo$boNRk=g$v<#8q|XTcZ*Ob1zGQiv<)
zi>txL1+5oMZver+oyUB<;i#nYkD%;<q+~#?`qxD3^S!m3abra!&Ks-shZ28j{8ZaM
zJ)4J;sEWo2{i!&Lm3CTHow7hp+A_LIr?nc4^T7nMU410BM`@ky!cn5;DTZ>ywpzr5
z9_i0Q^#{DvcSj{0IHm49!t02zd<|wiQF-7l&sK?XM&#D#vAlTS#}trI+Qt4RNZ5OZ
zWVWs#Qtv1Jp<>R!jYtKx>F4rt_Mkz!sc7f%FxHnYF~F-f)-u^GrI>v(fq&m<hB^a3
ztW?Z$$SDdFie%sDrByZUGkp-Q4>iE3>B#gXMTUD)$fZ&Y>bovj&RHP2!EvxFx*Wg7
zw$CH!tf8`IkqUaw)8QF#U{3)=H@4Z|;yBM%NQ#0oMe8)lPD5VcU0S5e9M?}^pHrW!
zf48=e{qMczWt*Pq@oTI4PERrBK~B0d+)ppj^jj~;HksQislD@sMWEV8tN=|ni0p<(
zdWCQ%>2s22YD=EAfE+~!m8_?vJ(SWv`=4b@Rc?!JUN*^Q2OBbDSIfab^LFKt@bEj$
z&jL$@5=@z=-vg?N8LvW9*ac0dzmh=z+qj+|Ej1f!WO#~FFlDrK@9WY<e2Jz+jg<o3
zQ`C#(=jcifV!M{il7pEx37agkBUdaEt!^A-l%COZwtD!d<#E~T`6hxb&>h&*Noo1n
zJrbi`8g-@%;Hs#swjlpuWT|o_&UQ*vl=~E<t9Cd+;ZXqr4`!0pcJ55NOp9hqq_-Uo
z{RI_~aACv~9P&OQgX8L*7db&lD!co&Ht};6y4Ao5=Z0Gp{7A54alVP>k8-_fmQVh;
zNRuixE*Gh3$u1*zwEFX<1jf;&vDO570u5)Y9gWd36HJ8Sn95KEFA#s&hD;SW*@da_
zcHxo1Zr0o>Wrt3jX56xMy^Qpy{1pdwd~904a1?g~!}YkhLsThKT^gu;rc8(Npw0eA
z=c7LJ{fYi59SgC$)|JV*HhU+Fi)E_Kh?1OkUVQ40!~g(}`yc>b=a<wGm!7lir1jr3
z_v{I_|J)^}k!hk{4F0W43TpH2unHMq14->6P)w6oiF=KeW<4QPmbbi8$5;)9;J?c=
zf(_118UmVB%hX@{&$GuU;1F0S{=xu^1P^e`=m+)5JEP_8Kq*glrGQhdzeowy0{tHL
zs!0r%y2-}#wSK|!$|Y1v3iRo45a~uy;BPd)orCHvS^A5wC$XORqnP+u;p)=DLs816
z?b&i9MHt3XQX!*uk}I3$;;t2<%E1Jzq#n~jHgNOp@}uI)()09;t9ki7wD_MX6xpCk
zfGHu&44q6`WTHK*`G0B<107|_iGt^u$1HhYedg7*pC!N@vRL)g7<WNX7|{Amn$=;*
z7}EiC*i@M*plaRw|3lZ;oyE<B!hH!@HQF99<$~cZAK{UFUC<mG;0N(@W<004H)t<|
zrv$M%26Qh<=51uJ5W8Jssi{R<J}!CChohC+`SKeZL`1mE4%hEsUZ#W4XW_F67dz=n
zd&yss^WR|)MS95t&{!^oTW`71Mfa%C&D=H`!799=ehB7LBAsy@^Iq`BNqIa1N4WBU
z)`G~D@+RQWi;Q{eyWBA5Dd1*`mSrcBqWbV16gYU|GSqRV;^(ygxfG#kHYfmG_DnA&
z<zga2KSF?DJe)R;q!8}MBAO0gHNN~F%zxLnTR^L0$>BS&F{!`{hy0jK1OCwDNdA}z
zIAJZxSDgH&60q+n0Ep0(w*#~4FEsbW$amJTOJ0pJ$f5oca}8(ZM2RtrDW9E`USknA
z{XR9}W%(JVT4pH9C*Eje1Gt{=z|XJXtS;xmS6r0Mfvk9RRrFwVE048zz@vI%1=|--
zyL1Nu=!)Ak0_!x^h@)FZE6W#asTJ;7j5!nKII;-*6!a^*iB6JS&T5eVsY(v$jUD<d
z$~DQ3iQ&w_By%!M+{}`h3Zzx^WrsH0X1leNY%qmyv{wCC?h9&wT{X9gW0%qly4%|p
z1mO`QNFl$jO}En!d(4&ZBB<n#=967A-hwzuK%j4;pkz;h351bnp+$+Flmguu;P47e
z=StftgoTasE&&lx)HXNpXmXV#bH`HeKyj%8u68%xv=N=T6=;pHk#EywbLkw-4Vsa1
z2BjFV8n;lFKUHwvn8#aTekmn6hH$}-Qx)VNj8@Q0>(9Qrm%1N;0CX$~Rt=YxrIK~0
z=OC2^s35;}Yc0#i@*W~wdAJ5~5|Ip~NXLn^?Tl(5flkwpgegDR;EhuFzn0B8ZLI(*
zWtyxvokJ6SU=U0U+cVe3T~8b!Ms1S*R*m>^LLD;usc3AS{{3Ny>NG3z1Tl10a%9$4
z0)SQ(MDMRb!tM|^`J_cnO<+CmSLWE+Q>Ycw&fl0EQ?b8@F)EmP#mFk9e4uWe<nB*n
zfS6YQL4{z(D}QwJ7=NfI6lOUdAXx90*jA7XHp+N3_N8M^=2Z;AJZ)+JPI3gU!QEPW
zx!#VcDI-3l31Li;ul}dU;W<SAAK(b`W~7nA(%U-+c`&U6mlaB?wUfebCr-pt1W2qE
zOzxOHNgeKP2v}Be%?q>u6YxP3_FN^8a%#oU!bTYaiDo8sJo)QimF>_Ek^pK$pM~B@
zNSv;~9hFTx3cGl%aKiCYwp+^36Mp@H{hgzsC+@$B#YQ1~2y5WW_=B#=5$0Ds(hbqv
z+RA{;?<;twdlR`<hzw@(_pihUe}F;#C!4Gn#>KJTUy8Hk!aex=2ZZLjN`h+PafF{y
zrohDIa&OL{t38l}awmiDilIis!jAj9jUb(r0MmXwO|qz@0IPOhj_n}s!sIeWBgsD%
zaE_T#$;63VPeIkLbsjv%qAc|FI+V$<vMEa6B~I?>2Bei$BJ<x>(^7MjJ`R%OKi5sa
z*?lWxkguH5-yQ?s@ZWD!W__L!hZuJ*$e1oC{fA?O{(ftJer*UwK>6H6xT3gU`Qk_>
zcUE^i660zszI*xYg2>XSm7KsKj=mJ${GAviM_8Qu(EpyfUC6vw(6+f?J8KoTNP1qD
zDY2UiEs>&tC{LsY2C&AlR<n^YDJ92r?|Y)MGBWl5H#A?UyHxAUX|+h?34_<@W8pi1
zW_8WSzR*tdlF7nTqxqV|4#1b(-q%2%1oXQ0@YJT}edq7vIy2ns`AFK6+^TDlmE&}L
zadS*sSba7(=tYa3?Bc<!4lG|sb5}HMq1{Y>fC)F%V31_(vHEk6o*Z6-bUt4&6-w-Y
zE5Sk4>U|}3e%5}!SAj1Qo?Vz6C5E`uLPP$%`Q0YjzpVT192AwB%26KV{-VK8(M?$*
z;B{D&Z5|$)VGmJ4bvf11^i7CDPqDcUpYbb)>3=7lK#>2E_Wx@HwQ&oNJxG8Q$e<8)
zBdO)yumFh=9Z(*1KJA5RL~ou5AU&cmb=Y#W7h3BJS-CAsjGlU09`?3*D369_wcJdf
zUGXZw{L^+W+!lVs>i&?qAwQ}6ZHxw^#68tBI9h*~y!q7zO1`rM6OH#!tJ!%O?&O{b
zNfJq|26q529Xc>H?Fk=*JaKS@Mt5AuewfWvr=lfkHGozpAh9kno+Y8X(WOD<S;5}p
zQ;gb8%;aZ7F=E?m<FG~g%!U^bb+kJ8%RGq5kJ`hy69|)oQ#CFM4@)hxcR$^?Ub`u0
zzn>G*RmamYoWvM9olUP&kfyhnL_oWY_h{mve=6{Sja~$5);2g|Q*)*h7C<!k|0M1k
za;5)V9WIyOMTngc4!!4_fbE8PAJ$4i+Kd1kQ_*Hd=i6$fp8zM9m`^pk%H8|yXS=dR
zx=yct5uv0RvB?|=&I9utMyS4x?0VvTDOy~Wad0nnMUdPTHo^`1>S!Fbgzb)MxX}F3
zmp5f$M6^eu)g;$7Vwp^VG_#J$lSHc64$2H!MmVRVY}a#mvSdJCsX10Cog&_^&@2IL
z%7@eSw->2Qp|BAK{J*p(+1=;aumkwYivO_;XHey>@^);*FcOd<BcEOQjLVUaIVy2!
zKui=ie24lMS{1i#7`t<!EA{D#N>Yc)6Yufd=VTSj0m8rPh+=H%_?G*#-ITj~*+ES1
zu8gB`<Mn{!Y$c9+<G;{kKLpEzv0%PBI^nIHQBMn}f<pLLjmD!`R`)r06_OW>ws;zz
z^wZX_X3=c1S5}Nwu%*UpSRu`|J<_qI{C#XCi#5zmlOJC(SFTOi-+5`#pi+725KnG2
z*hl4WY1|O<m8qZ|ZwN=$E`64_gM&GvSOv71yY(+AJHmVnH@{-W-@QyqISQgUZJPl)
zaldxXDUZxl_z1ppHSRPMHn?8;e?f+Y`Sj-9xg}i@X@s2|3fJ`l{KP}YD|PSC3JKF)
zuyiDcP2IdpN^!JVefhVM(**<^&3s89GewNAy*YWY^%3b8f}gzS|1LQ-Y*~74iHtk-
z{L{t<pQ$H~)H^y!MpugHF_!BqT~a+w-yBVdT=y(s1St@h6AoPYn<H44G(dC3h9|!;
zyor@mZOQ47rlzyD!mUb#c-byO=-y%PTCQ%#Tc*q<q|w@67i~@=p=TS-_gmjkmyIPc
zc~(QCrU)(Egg-eYbyChxhhY+{&`Wkqj$=Ofe{UZRfP7`5%9A>~ap_kT1moBrO+Vr*
zqG?!M?{$!<Fz`v0hOM%CYvrMtkeTMRtiy>bUMIghoj;~GqSae@s98TQan)8~da!;4
z4|?th$u)E@g9cXx?_HU834EQplQ@h%ZVq;0$2Bp`jdg=b^USM_)D5d8P1M_4Q0PJ#
zLFbqDuvwt6r`i!<U1|q>1x=Np9T}mchJqMAXrqIm_GN_S9vk)4hSy+Lgch`}2UO+-
zCad3AT4g<mDMzcXsoSXs1IryjSGglfmX^~qd&y4l7oq%#z-{*PFbofI*~5YE{ch6x
zAbHcWX+kQFSpe|VOk)Z-h<}a`-U*4W1CyxDChg9PI4A(3noXYS$2V0@6bk~gJ!C}B
z)k$vTllz+c1XO4?x|jY9IfL1yep|v=Y3v4HAR>zZ0r#UXKuW^Z#QIEjR~H}4*jyX8
ztD?v55(Nl6gh1G+lZJg1DS*(M(!hXiC@6}E+(kf25-H7-BLVud*jNTK4*Ajxp^_pe
z64agom2JB2Q9B0Hb2RXMQblC%TAfe#)g>RiCiv;g>Gxn0VLw#2Zg#NjYaQ&04>4(J
zMHXC>K`w`TGO3q(HsmY6M_5@Sv%*WOmu@Ts16M=3)S_Br^mGE(O*#E{f+hn2Q<Pgj
zzR~&Gm{i7loF4?1pji+tGGKHkuBrx?0IBZ2N4SS5#Ajc&yoirgf|3B3z$7~x0m9+I
zXU;`WjqCi9iN^M}Bpu+)fW$%$=>Cv)XNYk#;OCzo$(UEIfYkx_Tw&%(_T1z}H-e3{
z8dFtnKntP-WPTy`dyX%xN(Kr=;QnKF7o6gr{An;Mws6R50f9!UvC$Z1<l!<I?^%+h
z<m$`Cr@jk-mExjMG8sMouJR>b_91{N4_yPnAgnTEGRd5E-k1D4mSR|Cx7&QkjuO3y
z4+_<<oPpiu6HDO%+oC<VRUMj^7^?<R&3uF^KcDWIl54{VP%#~nVNYNS$*bR(;mXIW
zqe}#6J#E;s@gdzy6qdwfhult!sbhEmmqA^~A-!x|YWc_x_kq(_R9IeHs^d_J=tWv2
zJVRz>2!0V-{TQw~mQR(~Yb78PY<PKV@T+uSq@^P+!Av;t+jx~JAD-Xe!3z#b@5V@O
zUjyz?%5Ak&Kvo4?Z;7dOQoa)sr~m)}01`dJ)fIuiXoC|=kCtx`=B07dlt22NZ|_V&
zWg$B$)^eLQFy{TBRlmG-$}GMf>r{3WE>tnBaskRz=?0;2_WkBg8YERFq@qfPp9<B<
z>>e$yqaarlg#W9J^FoU8f5l73-gw>}s$Ivq5OlLK)eM>wjEWSV{C<%=PP&I&28YXU
zi+w2@yUK7-g2EemXTPFHdsd2zu+T>Lc*H0OPR;>-H1Bf1O7_g~;sf8hp|Mx?RW=;5
zM$*w$TJ`I`NOr-nHZ8rrbkwEbH@+{onHRc!BfS&wb!ed#ZA_3+NePL$yu}OB=ZzTE
zA}2lH7pvUoxXwJf@sfj*@i$8{Jyu3u=CH&!tW@;dzMy0^cxAYw6v~>!7%{L3l4w?i
zb7Tf+UeRZbDnKAiZCC?Rw&hc|N^Go_FmlMp>eVy0@>s7JAKHwU3-<qI63x?ZX+f44
z>CK>$z1-9M2XsoHXn4;&4yb7>U&Si#<)Wej*K#fmnEDW;+@ops1nRYHoanm)3HWc9
zn+GcSd0SYyym(^F$a^S&!ht#OsV(Q=FSX;iCXiv#fA&r*vyDeu4^&j{!e~N5zlXKq
zD2*;M3S?I+mgq&JOML*dZ5!C(<ZlMpOFxrNZ|Z0&_S}KP3~LaLQ}+%^lDUCb#rli%
z3>}3~C^F_b8j$p+_7w>9q>yrq$<QbqbSaLjvb&=JiCEANG_xyH!S*sMOIJ0V+n|+*
zDn!OXxi@CqEQb_YLqxSuJL}h(f~n9IsF;X~bMAB3{SE2VFgPg=YczLP?U-&$m2ccc
z5LJXfvtu8O5O_(CYh$`!)W`tv>1XW+$j?e{g+zY1{8|29gBSp&scW|hRAPB>X`jtb
zalh7oomfeY_Ag8b*UYob+ZU%RiY0r&GsiJ&eQjIeOob_GV(2U(QK(5-{rcRUC@L)4
z7%R<j(yxgjHsjXnYMXN-LDZZSuw3v>x~?;DRP2VwY+fcul=Qbir#?k>3Cmgw!+=n?
zhmVECX;v&^#w?S3;Whil3)ea33ES06IlfcPI3Y3++6O#GUdb|6P2>GxO?R<B%F;z9
zuZGwtH|;UNx*`yxX;|A)^*x4;-*ms$2z!9~@#H<wITcecCe=&bOhi1`Qq~Rh*pV;I
z_#&rlbdxB|2boAVd!Tn`+gO8CThZA%$xA+Ke*=+RL(CFwG{&zKh39;3{YA2Kl4s9;
z_*i9xq|wASdggVV(e=FiiLfnaG;9+3T!6woHTRECXT89Zo4XboQC41}$z$>905i0k
zFFNnEw&SQ?Mk;D0c-+doAti3?F%m<AewGl$BUD9<W4>KX7AVx<`bN)>X5T3e66%v8
z{V6^ePsQhf{IkR7yx)d|^hR}oac5{YbF>?*0%abRxXSXFd_S1~j|IAA>0`&`Mh=ZU
zg2y8Rrcm0f;p%VP&N(}1RFx#L&w?hD#l=;-rZ?_Z8e%y=-!l!cLsntUkBCh4(?T`a
z=hQ8i0UDf0Sihn^i)|0+QBeMqgSQ~)Lj16@@19Y}2b_}5ZLu%1Dg-GJ50Qc5BD^Em
zL&K0+-$WbR+J>^wWf8xITHW;i?1&}JX1%CqEcUvw^0Rrd?<SDfG%S8u0PqOYLw%;&
z9%K2_+rA3@!l#u_kbmmLdx)teIeb-7L_*+j1NfxH6{`yfnN$VAoUCSc_d4%J6IYWL
zEW!dvb2MnbtUGL`mFq%r3~leQyFbL`38<2$pm09=a6SRcP}_wT;mu+q;iMt>E;7$=
zdEw5K*~c;?TFOwYJ)lYCbnX&lZ<FAr&p>BprwY--RT@#XsD0YxUJDjnPeO(w;8oYO
zGT<kUB^3s2K_5DFwYv_xJ?7V2xhXm9o`|?-ad|Qce-mA*TV%8h`jj8ocH3~fo|TuB
zSsDxe?C~uq2=B;V0?(KGhAK8m_v=A<dymX3ZNMdZtD6s_58Q}cU}o+Y_^8Hq4t#Ts
z(~ksWyxdH<QQ;zcG8WJm=ioWZAvUu%*eGx!yPyA0ux~}VVCUWWoNg}EB#T^FCW6@t
z3E$CwdT*zEv<o$Rx%<QVr3vrr%(b{R3vMfkt|<Kgt<AH)@Am{$-ej!J#H;5|ZEmDi
zuM8rJiH3QT|La1DjekpOt*WlK1ak6iFFDLf)qF$v(psLR@(J-V5+sVBFCyH)EO%m&
z{X@m@NdDMDR&WR;;D(qXVG(U|F>Zp*kF={zHDb)GD@&S2<FPk~fX^W|G_~xV#@8y+
zk!aKUqh6$5`t{@T`U4K(p|>`m*EyEO#f_u*u4&t2FjtWfAvp}7yjEKMQLP+B`m_QU
zCer%>llRC$Ks>-T03X<1sJkM(j2&r6vHZfuT0YK^>6EQ%QmJcX!mxySToKZ~?yMnv
z=qx9vy0?o4yT-duyhb>6nEONl9u`GFZ=@u|-PmVd)W1}@HCW#I(B*{FmqEbS5-+Hn
zzqan!jVs>E3iLKPtTR~F5B8w1Keu^$hoys(oWkb*4gNOj0_E+hMRcr71JJ#NoV`<t
zr7k-ProiAUT-}tC@*(0zmxgmCQkF#6EpuQs;ggUWro7oMyFC)7NyA~MU7|E~KpEw2
zX;Ba67JdUyK3pR3=4-n~decE$PEkYl7Ya=as-Kt5<>9XB@Wn$F1dBh+YuJ3C;up9k
z+y#Y?fs`2^VaNLKGble&o<p8A4Aq?6Ga>X-<@b87(hqJS%g;VB^5LjgzyJVIY0Ys3
z)#c%}#(Tefe_%o2$d-SGYIoQk*Nx|ULDr6p8RrUW)oJDxUy9rAqohvcw$XG*+Jn5M
zP8spXArk=Tvq|zGQ#W7FI-4mk7LBg1B|~m2m&`*=`F?l}<uIY`S@NLSHgBLbt3uQ;
zpaQhR1^Gt`x%F%7BS(>&SIQ<Nx<D2uc9M8j0eKo-4puQjr&suSTVsBtOP7@L40R03
z+g8zl>RTtoIVnq_0^rJ9SL;XJu?_7<dA$Z;_~zoAYeePR?37xnP+pm7lLOPIz04lb
zkBdm=(V_3M$nurNkI}gE+a!GL6d@IeOX}RnYc)9aGK0@-0h)0uVU&ck9)>tVj`}L^
z=)JtTcuvN{pV(wN+tq`TQ1O>|E&ie0Zs-X>f)QxZq=bqB4b*@vMny2Lkl}ciPW@V{
z@)C3I6W^%>7EP12E-W_4&=_R<9yP;f(mZ2Iw$hKw-qz&#%PX)tM)5?+tV-J_dfgk=
ztay`S74=vqM!`&ei0^)eX<Q_qTlsM#J~L}kAnNuPmtVXk@<{2EnIf<MMFF5_CCa1h
z1;ozTn%d>>n#OOG3rNyPm4EmYo1qL8=s3!HRWh(e*e(xP$J6%Q{_tgVj@&VtLM>%j
z`9X2KPHq=Z);pLsH&7}(L4@=Eaz9hbBYES}Y{zhIQ^O)huex}rS>X12u4z$N8mV2(
z)fG#m@;<&0U3$b_qCU9h6wakGG6BOiuws0$j``j3Y<U~yab_<AcRJK0vB}88(hK7?
z@u7qPg>OC0x(SvrC5>)I4ScZ!BxCR;fA^Cl(g!z$e6(e2w)|<c(s8T=(H-sr0}?|r
ztrGf<ayKsS_?k<=RBX+mPj6$UQ<08QH4$=P2Xk3c*$&m8H>)=!)WgL~fe8;y8nu=<
z)p&!4GDB)N9YE)4wOFphQxtCgo_aRM@46KzSL+GKfK)EpjZWUm0(g^}g0Y##-f^u$
z?vzuAY2u1#IQ!__C4fUdm~_A*;c+fKcijuaP0U+{GH4MSRhfadh&z94IE8Z??3fr@
z8>||LiqZ~jm$;KE4n`G5gX?vf-`fl7@3AReF^Bh00kZ$+pNQ(;&P?PmC;%lLTVcRb
z%Ira-zLQasyvQWizr#(E^hh9meo;H<B@>s(qas<z%X<gm=n_X~3(jv7hH4W&j{+(@
zX;w`{8fnBa@T_NZ06=*Y1C&7U<)6UY-_aY+<jH~^(I`WX$HE++d@?rcJ&%f_t=gzB
zNQ9yfrPv1fqt+d0GJg4eXt2<f;r;wP^&kG9^x}aU?JCu>-p|zgB=v~)#Ei7}Xp-oH
zW`$%Cm@iH)R9lI*#(tzq7uybX3qx#8>$vSE;w?e2i#1+6(fjutG7D#XhqK25kyq)o
z8<w)*0RHI*yPv)elFAfA886Ud>+p&FNcdmF=rQ&PTs3Jz0M~=@B8Ld`a*3HX6r*Vw
zdL_N=`lB4ssEUEajH#hk;S^_VkH0mgqzw}E<ZOBM48_N}43Y@Vw3+jnX}$9^TzLHi
z9}g-2tiVVr+!s#|fai!!lMw9jfOw~yGJo+$@IQ|<$I$!{XE)<dI%R`7hXI%1rcl;f
ze+aLHf33T_tqiYdVm>l@W=SnzwWdWU`za}(@A$?`8X#d3TY^hfaB3&P)a!n{Y56pk
z-j61M=?1j9bFgpqp@@iTsyeEA7RQT*-k;xBSAJP~TInmkx{Q+*P~-=l>;z9t5p%T1
zHzd8!O@Pwzn*xBK-@)lC6F8j;C?>a_;jLn*;|SSZ^Cb~RjI;|kp24(g{N=TT`yTPz
zmcU=~u9HfXaXQ%RD3{9S<8=XB{D@Fnseg$tP&ax3l`NWg!XkX84EHpL``>izQLfs#
z7n^OG+<xRq*U#%7Gt|PN;FxHRC7fl@GjUOJ)kc{v2SW=SuA{wf3NMh{4<!x&00003
ziPL`sOfl?d`t2qbM=CN>c`78Zv^Z?-=Djt9TH@EejN{xre2^I<P&0~BUbG3XD2y+-
zHa+a9o2piv&nFuJA4V7;4;na6dU7lLKktBR-&&VB$YtXVqb{yjnuE)1T??a4#6^^F
zfur6R6s@p|SnYeD0kEda5rSQJq<*KV*b#-IN;*CfQPb*+trcOLyY=-DrL5{0Ta$I_
z<u2fGnnNV^>6{UFsi%e;{B8Zgz6z;99@iyc^A@LI)jz0<yZ8XzYQtG5Wux<(mrTE5
z>g-lC<u7&_&y}7vHqr&NPr1#(KT}*Lg;03|X59p<B<}N4bCA&H>SE)uQu|(9(Uc)w
z0k6m&6hhmpxEJEwBhCfeIb|kZ`wAH)N@yN-$jsFMWe08&@1T=l&3bn26Y@C--54&>
zxne-Dja7sXRT!PIzyPcc<;LZ9lJTJY>)xOo3JJbbE)5uBf|vvx0mwss*jMs6Zp3m#
z&IADGMb-DuP2+<cX-G!M_oS%=YER`KAjFh&*j+7mH2{~2IDil5lJlQ!P{IYO{!>8V
z-|;Ucwp!%eUfhAgkFaPbogEcS!Vmfli^$b+@j7br-=oMGK2OapqxT=Fh3ruX-@$-9
z8$whrdv}GsPsn(z{0nsn8AeSnG_W_Zmq9KK0Rx+)l2%^O&$OCrjVg%*6s0JARtgfd
zd#_EgL(8xJn=?Jit%%KL8Rvip*Lmq_1U-hO<Ccu$xtiacTAz=-+?<%kYF|-Qn$hM{
zwy6(i#hi6Y`9M)S%t4M(VV2NTC!Nbs!HxdjN~KH#BDu-jpPeO9f7tqhW(#Pon-V->
zsICQjVC&<-mbjwO990e+qdVj>8m2+$ZjVnBjlTDUVIqO;JUb;tjuP@UhevGzRjDHB
zVxJVZaH0>={n&4@hl4-VWUyH4hxCbZLTSKAww(e&gJpM0NZG4eY1`Ndvz&cW>Qrn1
zM?kp0t?y=tBcG3mUJ;VxQYru^3zHH!R5wVxS0RDdUUnp+zL0gje~k6FoD=$KKWvQ`
zxPvwJIknIon31DHnm5^$&bFCDV{!P&B2&_q;!IGjDgkPC3U??Ca^|7+<8%Vq=!nJF
zEhrQ=Oy~S{wdY2hqc5L*Kje@ONk>7^)L7?M+7^Xhz(Ivy0z8DA9eU=0S&TcuwEXVV
z*p~rdwC}didbE+Ef}%DQtXP91dfvLQHy%f2UwhxCW3Jb%lTh+%4W{3g{=v#>ssYz#
zmgvm#X+s};>J6{vVxgTJ9JX!sPHN8Jn1lEh_$G+k>Dc3#NBtw<RV`hl_Y{TEsqaVF
zf!@-*SztK%))UE&8=s@&fA-NDF?U7)dZ`2qEd|TOj)QqU+hFvKHtih`u8OE?K4ZRc
za7+lPI=+~YZNKG>;-DxMm?k+~zUNi7snj&`IRSpsBHfJDz+2L39_}*r&q0TOZQ2KQ
z-##J{*(*n(Zb9&P<`$KNYtM|sHkCX^VL)(KMNOjE<aCeN2W9z?l+;CLG&jzl%aYzU
zDf5LM!#(qPg4<+G*zpRYNDbE%1P2w-kqi$0V!8w%GR$)w)!NlQ4hb^~_BWJfUerNA
zJ4BZ)Zo>XWiTR=5<AW-(Q^qyF2<Li`2y{4Ux0h=#Ua|Y+F6@RwYNY)Zo)<V2|0Idq
zM*<jXEa7y^%~P6KTj0+WSFLT?J>lBJ<X#D=z+tiPNKS3}_Cia-#1D!<w^;ydXask|
zkbdPboqvph#@|*S<O6hlxEH03q)7u2y3-{6t-S^5;^Cb+&cRC^G|}u-A@rZI(Wm_;
z!_hM>CTKQtK*GVPwCAfh3~go1<?CT)2&c$e1fQbh)f~PDoEY)bx>~0;6nG9vg&4(y
zpRhX>vjD9BTJ<eS4`y>Ag2K|2t;>He8)8+eu!H)s^`3pSLPA1+d|JbDh%F{W2ze5e
z-BQLILoSQ(Fu^E_$y?(BZgzk#*oetGv6haQjjRh7!8^KBkb1b#>k&Qx5T0FIiI)M9
z*9O(CY2OI|j)NNmdjV?Ylc37H6*86=$KqY{?S}Na)l=Hi+9}==rFr<-d3)%L5vmNI
zaw)&lO;No>4N378MX)&drtM#l+7_Ho2GFvGY)3WR4^YNhM0R9%LP7kBO66HcDogd5
zSWUg`^>laq3T2L5-hllBvM55`DwI|8vy8~Lb8T8Zu-Z|A!yQrj|Cy}-_ss0Tkm+tQ
zews+A2L4{6iY)vuZf_kh9H3vc+jVMq8T*-LSJFby7qhFwqQ$G$x5o~ZKv?s~&5$wy
zlZE&PedXn~qQUMnP;nKs-2CGh9-V)G-tOB2<?%MJoXwp{k&!<tzgDtqY6faqooJoM
zhRUBNU&yd!!2nX5&>fPy01A;B>J<nCLxtr)#Q{47vF2{~b}{-%w9dUqZq)G{j>iHO
z<%6s|ljARS1vsZ{%AnyR%1AT>@x970qCu8pikp`ay9T+|$JRl_n}ZNdJ{QK%F)S$c
z$NK<*m5NZ}?qNR1)`=@DOT_K2*oi<xf1*X0!5%mcXs9S7Wwumm2V%It5{!_our+lA
z(=GZ#8insGb9V_F5}AkN#JxZAd2}8p^yyXUi@ID&AdPD#*%ZeOZQFSar8WLL#oJ&n
zENUo(=<XO2<)rRyz_Yuw_R9`ivcs<`^l|Vyj|TEMbHoBLvK9WTgiVznupBZ?U7;vB
zyC(_Q;OR1}Xa(Ht)AlGD$;bul3%sGvV)3dt7aHuwDDVIP003|Wj|W*<Qt<VF>9cx+
ztVw8_D`3)o0~Gi3v6F-@(v)0&{nTFh&|`=?>yPiyTgAPX`*lKQ6W2P1PQZ?6BHS)w
zufW@8!4HP5Nj2IZ3^XxfYOY-Zo)7nyE>cZQmS;vzzMF~4EnT0fB6kXF#8VNK$yEWV
zo})evv6Tz!i~?2EV0d=`;De-cTs>GisbJeMWQTxrnP=7Xz=<hqJ{Bc50yQ<>-y+1a
zlwEu)F5Vi>&TeWQzXWQm`l+svhlt)q`BR?M-dO(XWgnL@#}B66>%ZXt2Hv;hY7}|c
z2<S>|k8tJ_FbdZiWZyxSeyYgAN2#!_xSCI(4A=H2v6=jh>ktTm%kW*pDu&<HE*}3Y
zKdJyzRh!lRV52DR$yE+S&0%#7R}=+9@|_|GKK*Dxy;d#11PnJa3lSsF%($zj4Z}Ew
zZ(2M2x@9{ocjn)1(BaYv!8Dl37k8~%tzD+WLj-K&T1xWgVz!w7FE0cCs;1F<2-TGz
zX5|6Ag`Sblh$MQm<x7EcV^_P0D-0_c#~A8@rd{knyIV<D-$kQO++N7+(vi!x4AdV6
zpcwAozsNO2J<5@V<H&gP(TKk$F*YtvgB5{GGy{Q*+*m)+6(y)xaWBXdKGvmYm96U)
z6fRJdH_h@$$0SyyZ%U3fcmw`Ges{zYJa+7C{jblPpNb%VFTHv(l5Cu$GZo%uFUc`7
z-wyiG$xOU?#VPTxLy<tBYt~^Wq4sxCmQCrR;OGA(_U>;tGW%P@3)@|9Bi85X2R6MW
z7$F@E8Eztmj;wKPAnnz8TtRj}^iL`T(Ef<RORR3kqOuUBY%=EkzeI)_;{;`~cdy|d
zhjAfs3#+20+fB1hqTeQg%6?Ew+AD!1RLVXGX3zZq(s-RM?x<t;TrXR^wbo+|?y-8V
zlOw5LbqjiqYbTb?^T0y7=<Bq%%8K8n)*%PN7h>>T!P%ELmKwolfy4Oa1i^nN(MoF_
zb~^W(Ud4G8ujyvwNx=D>L!9!=xJX$h_|M81YGcsodn&iCbDx*xA-Z(uSJ9IdJRIO8
zg5!-5M^O?;iHv$7%uX*DvsJ|JT6iMK_#A}f`V&Zv#bWvOXq+dWPdcoEoh~IERZiB)
znKcpD8Pekt9qV6(;Tl}{;d`qpoxMz{to*EE(-6P2X*_mU0J6c5rf1jOicMlMcFT~x
z%>VN>|K-$RJpd^sIyE2Y{JD}@m%hS`hoci_{4Ine)k7Jj?~(o&(<=jL8G8hrvP}<u
z>hYb<&S|JHD!bU=TuA!&A6X7Y(YF%=BA*<4gtKZvU`ecjcoTv>{lan;>C(W2bBa<6
z7-J*>QE5ybHw&U2y~!vE0bDX0&^|vO^mRsRc2}UE2DEXdBW0biC{2&bteU9+7G<wW
z;}u%zcEwPs4|#zi%Us9p_LrsXmTK@1OD4D~%~G<G8z`OK1=$R(Ky)xJXqAgT9=?MY
zGZ4`_*G>z0UyIlycab1OoJbSVjmv^Q{&x@apa_c#^db$(yKmVM9Q@{eVy;ThwSV}X
z){V&sK*l_AqTFrjOx<0XG{jV^<f@GgeFGlPAag3Wh73%JL42GU7Q#$GNVrJYpx_}1
zhm!hy<;Tw$Yg4%tS(abm{<1f?Q0ZS58dgd6k_l$?f=#S(iCyvdR^$JUQ*%tuNU|j9
z%IFTcai*s-Q4adw79?=7;h-;a!1Gbt#_tM%&eOzvxOWNA2jZiX;B}o;c4hkR*FE`9
zp4j;LKIH1o!<7Na8dp%?62z6wn4>bclYt9%htqg6lA8M#LDr9KE7bHMJ^R!AYPCEl
z<ZylQ=Md?<<I^cq54*xlkkOyZQF69{POaTTCWtYXE2K9lc*dGk#krQX5_Rk(rIvp}
zI$rB`fs7Q7q9dg?s6RU7QTquUk{$p600008ouumxh1*t4MP8rKcuA%-OtC-MqDG;y
z#<j@H`l@?X>7!jXd_7tdm-3?i(K+bJ=f|N4q=5dLf_@s~lo^l2<U_M|-7_Yd^;rrW
zW8V$gtxASRv0~;?SOvroQ|K;^ZYT0DH>Z#V_=Rk}Alh@A=cX+r!&#vR7i~V5iHWZ3
z#4fc(3K&Ebt$zLTN_{!-KL7+*;OnO$ZF_V*3>7IrO(7H^7I!Q(xa8{Xeqw3GOz+rP
zIh5=I>GW|t*r^+BS7<-Et-7ki<~glEpVibM&Wz7%K2tJVvaSF`rfeTf|HUsxoout)
zM!CKoh#KbaHBeH{CQ)5mILyS8FD=w{Pf%?}o@N59E-s-IScj1L*Q`rKTpZ$#GJPFR
zXk0kJFWv#<5sHt<i-vpg1d+KHuKlNc|Gn&WluSE@?$Erz`Him$@Bfx@SVVk+3wkQ;
zgx`gyV-crF!yMrFEnjn~J(C!@&NbZxZxZd@+d>lrt9(SGF6HpfF|TIK(Rz>4L8#9<
zc_`Szai{T#@Vzi_@clM!wp0?ED!^d1tYh)Yhw&T*qLSJ#Al$CC`u;71hj<Z}uF_^_
zfYdOr2|U4RB{A5JGnJ8+02hfP;ABT=FKJTOv!_fT4@}n-6^)pi?<`_ov&OrqwiWCW
zGfk0jP9Ll7l&Qz>IkhWcYfCvNz8!*2l07%ueul3K0=uW`@l7$H7SqLq;b7kH*#nvc
z#v|3(8y6gK@BJ;_jgicvgXq=GXSkx-cgd70QlPTIN}4om6oz|P0%p;LKqo597l%q2
zC4#0IO;PRpy}?~<e^YatHsg@!?q;nRzxk0mnns~13aE_w;o)qXARqk<sH%VGiabQP
zn93AudyGAJ*Gq=|YOz=x?yP1fQmqdhn3Cs5maUxnJA(4y=Q=|S08f`RpZ9kJjVF9w
z4Y}G;+!1UYovaBJ13!c4dZJAb38>;mqYhzgpK!qufO4Ns9d#432y-Ieg|ZH$2c;~N
zgw*GUiJcT^AP>@?bj&F0XIFxhF7)G(+{GE#W}(;D9g@!QjhZ=H6f?hL%4AQtq8VnU
zj-Um2{g)CEo%5l62U+KbP&;2%tW@6UfCPp<-fPv$|HRK7lzEO5E<H(j;*{*27_$)Z
z1C-qlBjI|tarz*WM9Z6i=@V+KtLL)OTEDO5Xe1nyZioE<N?slFQ(BRGjpr{a;zr_U
z$OT4>qh*F88KzD=u^9_HX7DP!FMC4o7DV;a!S)1v8F)(X%jTFV&_igjad2yu?75tB
z>t`+$r4KC&O@RAv47_C~)BjzNn&RC&K85pw3=$Hd@YX;OZ=<Cz(Ed1!H$Z(a3gL!v
z1p@&eM+3ad2=d!-Im8qBH>qSdA0w(z3XW}ztYlK89n6V#C8fi}04hrE1g*#a&~Kyx
za)wOWZ3J>~^u*P+c)w(Si?KN1-oe`rjRv+4XSccTAlE51kR+aU%}AVHK&aMH?Agmv
z^9l(O{`6izufy>v!w%}opf=ao?r+GE-0S>7YmH!-s2;B1AT>3*-?SDjZ6ehxJ9X0x
zA`(Mwa0#&giyt})B|JR6sNI@t`A;BTSJ%l>2f3Y=M0@qwEN}=;gS1zp53-_Cgg|+y
z|EsbP{4-g3gqg&j{PsFxs{k%X=Vn_48T85Tp`<CFn{vl=Qj*~pJDYVY??ChUJQfqt
zt}3?BP)rO3YUQ(n0FO@I+bA1<dNg3QGbyvym*EmiC)Sssrl4{_f+ZeXrN>gqMp8<1
zxNI`-DW&?xG{53A@m2=S{fmW(y(;f~J!rnXN?pP2=`m!UFnT&56}V)Beru7O^Iay!
zO+MK&H0Q_M+-rb>=^S9<TGFNT)s1)kxGJkvCeRGfOEK|`oI#Q(!o2FiWXR9%QXfi$
z{mv6#Wzhwvh>cP4kt+n*J&Tf#f;r(tkG-A)3)TJUDFnl@bF~j@#hPUS|J#_EOFue1
zcJ<U1-Bc{wYA7|)*fT5p{xn-FtHPmI=t1B+*|GR-!7Aakev+9lxt@T?LjDSZvtZ_i
z5$Zs0^=+!e05idLUz#h(PQOud6LJx!^uUV6KmGjJ63QXL6aI^^enpSqQyyE7xajBt
zqo>t)o^DA7LjNwsQ1hI2*Zt!=^)v(49;6dR?d4kwfCt0ra8H*iA8lT=AnjQa(YU&f
zYy7=^9!3An8y4!jWa>E>4qs!hJM5R_G9yaVUQwg)Xe6XaOh~s~J$U2=-U*$-R{<DG
zd!!wHR|G3z6OaGiaXDoeDG%sEe^@EyEGT6qJ-{;+-N}9dsHm>)&-X4^R!IiM3`nzY
zQZC;AU(+}EIU|s~K(W*#K#ybMMpf|Ku<IdkFXlf_gV_v%Qg!Nkm^HbVohv;<s-Dn_
z#$sXmWaxVn_XtJ63YPGU`T3>naYCo;U`S$1cUQO(E?HQeq4FN2?}d(5(v79i$AucH
zLK*exzb5dwN`YB#Vq}k+ibTce$!JE+1|s8asHUKv0Oiyu>}9Lp7mA463$Ct&^WBJj
z?&g6Z{b8Abo1XyFnjX>+O8fzTYk0sXGjv@Ml!-E8zQdiq>YZ1NkW|WDP)AvqUu~*v
z)i;BUt8s{*ww}o1)3O8HU^bdiIIv9u8jP>AQU2W+r^R4(OdAv468JOV>M5*kUKP0h
z@I~#$TvGzn?20b5)?LZ1N+2PtPyhe`fs)?e+>PU*B|D=CwgQXJ@(gZV3G?$#UynVz
z4YcEgV4R>W%7|~tFVa4svd>Ct^?M@DFr@n#^R5m`h}VzKQOU9ypu4u{AK&XR$)7v?
zt{m1tx0>JELCq<2e|I-OV#X#;G~yAK#d1qXs#wIs*t)!OQ{1h_cH@RVmVspyrC=t6
zQc!)ux7emrE`}~9+s1H^ER)@T1;g5&C%U1UDbYy96Qida$Mok@^|nUwC)(ZP$wZH?
z<D>Ljl^)OWCmI?5QpI)SBjmaUjYwlR(C>JV(S|fYYHG!X&l6+RYFYv5&d>j;z$JXj
z>L8*HfJy}V_r{~vFCX5|?IO;J+er~Cq#49EWNp23u>_$vS7t}9!9UxWT#TDl6}~6r
zby-doVG3UNQ6>e*V~5Q=rUC<v_OTDO%3iEequ~j*8Opn2pQPq}m}<O>JK7pI5v%vs
zGx{${jQ~KMRmu9mbtW!kH#U>pgu<XPLe9m*8YTha%kv&jxSU2A(EED^QeJT-3=}C3
zcVJ)B2__{oAwJDldb%U^eDIoKz|?E`g9HiD-wiP*8&_~XcEF9)Yxz`d@uMISbe#B;
z@N{(hHiwOy``#7R1JKWPs_tSBc|GH^YaISW@Smm3%8-D>#9sSVEg!r|a+ebg?am0U
zW-h-0VtBJdY6?R&8dCq#$5?Ctf87*YdM6FtsZ~A&sTZl)T5kkiODioh=D%F`*6e&r
z$W;hGf1~w0B!O7P!#QBbE8L;>s$=(i-#Pb~k2%UusLMw@)3SF+E6PZ&7KO_$k((Xx
zq4SKR{Vj+M{b6+slE|5vM#oJfX~{EC3FEXny~~iL$6ZKluh<4Hz;Z>C2VP*zw%S9P
zTxFS@$Vc#8vk~n%z#o5T%o^{am0QRP4XyfFPW`GtX=RwH5u(w6o_F?RS>^+|p13pj
zBoI`%D(m|L{8Jrv7{M3sd9s&wXia_QDQLv6G#YIVmn_#Y*MtIU_QXeNVHNU?0Khx4
z^w3z<(2p}<MmW%0m(mNpm?zE7D5od^Y%DEu*XWN<8AD~+ACv#A#37|Gim>0?7Ru_<
zbf6P!abD6xgmS(GMdav(1Jrt-vVs@W7oR|zL@N_h<)k1*MzYgIXt$(g`m*e+uJu$v
z%|Arc)<EO45haqEYG38jOjD;dERwwHz{PM3{%)Gvcot0czaxOv;9TsW@4S8`erx;~
zhqgzK-%=$$T~t3Pc&WP_R-y+WD87j|hd!OCP|RJI>Ge7=tbY_@D(%}y1Z<T3dB-4*
z!qk{r#ja2LZ7WH5_V{_Fron1Lc3)2NZ5e)(P}l{Zu+#>Q`EszjVLj9PZ*f|$|IZZ^
zwxTE&+2uIj&8fE&H<y7ynFeaq=`TX>!)MhAvKqM^E37M{w(Ms|@3_$*xKJ{A%Q578
z585flfkD6s@_PH+|F3a@>xhDug~4vk326MouDR;J-o<cIz1r<I?5T3o6ynu#;&xiq
zyYjp(`Kh=39pAG4O9bE73#M3o+L({s__H~lYhVugdrZ9dbJ-ojP?X;(&H_(771<DD
zSB}85#ko`w6a+fTkT<z381h=>5q#GZh&KFEK0Ff#!`_W*jjuSu0u4z=(=d?<9NPls
zz$u!tcIRA>`1!Ze$+Z<O+_W9j+Y%@@h|C#3-Pb9>C}`QS6d%1fKh+-bS2*@79TcfW
zuo`dNYKp1YRE#GsM3Q1l1BwIZf?rCQ(fJpeFX)x)c<|E*FzA$ltfy4r7@0S%j@u89
zh3lu(o=rKys^8jyumB@}ZbcUed60agIio2`I5d}>Kyx}6u9%pp@{0<;t&VjqhF)1Q
z_I`^)rVlgu(<6`o00000K>VN=CfnnSB%@bLXi2-T9KZ-2pu#YT4^81&SAvweXRS-`
z`nlR{78Z2rR1@U`_-fQ}=+cch9N&%mG!5a$s(9uM?QV-Jyny|dCro&#Kpanb;Kd76
z!Lq?DTb}aSTF-}POV)tGU+a`*_0%r?%5W>?)lsGQttcE<Th(8aW54L4E%V{x-Gb8A
zF1FE6B$g3iKb!}?ntjlx=CJ#520plepDNS1#{vyO+rt<kSXquyLr<So1=+HjAa>l)
zK*$MA&&4$j#Q=aga&$V3Mco;Bn2D>!4=R<u5X+Y$D5xp@OJS4rQTpHO`#Ahw0~vvy
zOh0xEQD*18?E~+_boirdc$3S9gwy}ta|S6UqqgOQk#I_VJ~nM8Xu7hb28Z*8k1=#H
zp?kl6Uk|VCv;`XfzVTD`3%Q@(B#kMR`Bh`Uol32@935z3d7}_iLf&_gy}XQ%q1wC#
z;6#Yy=m<v*($*^dw_GhGZ;CXAulopUMpPb*hV3-3<uNEH-#mni>x1<_r)N@4vRMm}
zCJ9p#s;xd?XbCG@Gt%UdBdc#Z(Nd}oAq0^yW2m)~+f{@z$Od=hbt|apCEa~cwMb|;
z2@QvYTHcj<z7s^r<}Lk?;-?hknz?)xc)6)|f+RR0q4)4dmwfBp$fAhi_U?>_{3M|#
z0BN3H&EvD*6Ou^!09?)uwnMgo1KQp<j5B0F1zBg=83(=<0%<*o)=&k@OsW4=2Xd(L
zHrwZi8y~oxbDUDA`-z}s5cv_4XE6%n%2uVGQbCvH#*^ZL;D0q-hVc71eR!+9`2x$Q
z9`Y|Zh;pMGrf?y&w4pZqJ1GeYvm!!N=}oh)Z3@$0XEAgv9+jlnz38?>H7eNs>ZctF
zc9G+*tpWP)enB@c@)aMDMvEyR<9SdB_Z#y<t=pB|S9a?|;CO?CPM|Y+U3(yz&eze|
zXKoJ+fPw+MY@W~(uqvaP-*NXq@^dN92<J}jUyB10;$%O0v~);rnHpl>2I>JoJne;v
z$fJT=^}=dFHe}bIUzIfw`al{Hm=>^nRZ&uahuu!O=|qUMThtY)=MVWnxqJi>4)wQ8
z=Hjuw1td~@)!+m{-B=VBrIU2w)2Iejv#mBMfO`xTK~IX*UL^&;aeU|2bAb<e_pdB!
zdWrp-A-NnE(rK_nYZheo3gb;yRF;w%^SzOYf`be)eilT09jMJ<9^_4_y=T&Vj&Hq1
z2>#&%_7{d)<X;I0rB+0i)Et5vD)ur#i-V)AZx)d#-i*(7776Yk6w~*l|0jKTiAhIN
z3=sPb29cHOkpdz%sLiu#zoIx;@FqkAFmUT!t0VYfp8Te8V0BS}?U81VqoW)arY6JI
zE_Q@&NuaOT6W$mQsCXq%><9B<-F3BqecAgzSm)Qc`^qZdUG)Gw0B@IQEeUw}+YvMA
zNM#i0=OhN<;XEtQ?5haL)%c~Wyvu=FA?@&!c}WSl_|BmUZ4GmT0W=IV#UCO;x^~lM
z>xi~^2cQV#V6?c&XV`kth<#t2@17atS%i^#?(U{59`%z0Y|6*m=qhF;uaX$uwVqp<
zX@0d78?6`oJ3aBHx}~k9$U55Ohrz_UwwCd8i_wX=jW@L+kVK+qdnvp&2xA$>3Sk^{
z{H3>TU^-S}vCF-NfCSE+F5Hy^V-aX)BpstpFZ0BvV@GTVy-#U4b0}&(ap68E*B)ks
zQ_TkVnB^+X>cjDZgBFyYY_D`}U)0hm#nO@K+ALNwmON0=A(7TlNO_o|z4``m^B%2Z
z#4Bk#sZsFr8-csPrD5ME-~e2L8lfVwmNQL8){vd^WJj!voucY1JKP!x2uj9*%Z^rU
z_IoV?I-(_QKiYtV1-FWPupi0S|F+e*k@SiM&JXyV$N6HCAd2E4V^jnbO}KeN_hDz1
zIU-NYa2;UZX`}$4y@vOR_<B8zx3tWq1<$3-^H+1xk%a6eG|HfEgdm@|7j#AKjm=FJ
zhzHM6fDgX=qtg)PE{v}UhG!?p`!f<8p+n0wa*({HOt9lht5;fk#e^6jnEf#9yXYXP
zH!y1|G!eZX2dV)}O7l{JZVOcjw9wI<7(TzVF<`<HiFjLN00qsIX#W<GqNXG0GG0}-
zxnY$CTJQ<d09iXlH5BvAJ5oa%JX1DxQ8{NXJw=PCr4+0kIjt}}uvN4zIqY}pL9|D{
zj-#tAe8mAX0r8K3CFHH)1p?&t7+k@+-(FtB6<r|2%HgSgv3`Q?*zQvJ2*QA5%Q#xq
zGfXK2auzbV1d99r`KJ_&_f5pjj!jY=vysO$mD0X<zozBCGw!@#LvnN5#I-|s7h9Gw
z{s?6MUk>9WPijMDwx(Yc9*+{#r3jKQ5s7%<xX_Nm&501*KO5-#bXnV6AC<p78kSr=
z-)OjYIFyCG6|;J%Uw6gX4|DUDF?O1+#0(%_LP%4fLjNId#_cEW)D=92vFa3@W$hEx
zr|X8222ccvXZAdVdbmnV6fn{${b;7L4_u@4TTPsF^iY;1)QYNT^GA&UdAe{Hlj&2v
z*gq?sM=uCKwe`mDI(kDEk@HEXCE{JXz%kibg!sgF<OjMo+=1?-s3h*=a#;GC5Prf*
zEhR^vA?pP72}6Kk(z3gJb5%&_&mUH#Qa|g0&F7JJ0*BJKNuVcwTy3Bc!9^bCtNGd)
zE^Sx4o*E-9PN}{T&R+15@5s2N(!FMGrk8o!i}-$nW_QUpV{mY3O|yNHu&!1#t-8^R
zi@FYs_+1v&-3ZldayY#cl3V*hB!RC&U=w#mWPPePvWvYu5RjZHG@b2eKx}1V6Shu)
zuGu)4ok8`&G2vHDN;C)q`W0gRp;!O_003wtiUwoecfLi1TdZl1R;QSa*O0xv45wPq
z`IHM3xmc>7tPb?Q+g`*`yc)7wr3eqo#_1%EIrzzW;wmU=JXc9FQgKOofwwUor5Z;M
zaySx?+X?*IIDZkfGg6AGJFwc?lp&)F)OFVPZfExCK8ljEul?EA3m&ltlnP>lYvg$-
zU-7Q{g9bB%$qwhRyCcgWRC|WHe+XX@JOa)Bfma$iRmn@!%kQnppD~K02Y@`vHrE(Z
zB-0Lkx+85ZAVaDyc)B7x=3cNUd_7MLkq=Gt;?`!NBCp8a(6!#9%bqP(#x(NfM3TvK
zNH}>t2FwP>v~fZbL4e96sP%@3;nGYA<=lv+S`xhhAUpVhszW{42|XD=WVa1grrS&E
zV6KM-T*q9>UBt+ftPup?DuFEXrzyy@-{<zMLzjklfT|n{fHDD{`UMO7T$8Kh@I=Gn
zCX=l5c7!TvNVm*25HcN(^MW5&QfAA<Ks=l^3sG3`;^Y%A(zj};&63barII4Q)$@b>
zEF>Ld3I|32Ft}{w<Zpg`e@UaqZ?8@~PMpcBKN!(IxhNt(WF{EmLsxT8N^rDZ?<n{<
z0zuZz7-Z!>y+G{)8F1=+u8f)nhnkzS(AM8UihX0EE8p-tn8?RwRv>zlpW#}(8BU|=
zSj%u^Mn#}XQC5m^f(hA9S-XL{7f3J%W_~z>dJ`ruV24+<3UCBF-tSoImE@9{K~AnS
zT`O#<O-&E-3#9dP>+CpK`a4L9KNQ%Fb|XkChNFFSsV$FfUqK6)_{znIuSLx1_2yPb
zjnJ7ZyYJ7ATm?z(f;b_h_l8NAZQ{A_8T4c<kT5(0ZR1niyu8yX6qQeq0xm>Z89y{e
zbw~05Pn2taeVT<}5{m1@V4gg+4{=>SDmWZLgd3n2JJ7rOcnfi(r6I&AQ5cZZ=?0u0
z-sW?!1k9?@{bIAsI#;?^9_H*Rq#ru}_J(3_q&*xoy3Z+dKD^-R4}iG9cegNagc7SV
zo;P1FLt@p?OgFuZTJ2wd4X<z1pzRLReFJNY+Vn5Id4X0pK+Mp;-86qxK%n;1eSo3!
z`G~&kO=Wffd(OE&c)vMNx~tjh5ty?(1vi(1%~uPczp=SB_UA=k9z2eh6A!P)lLIH~
zOp!X&G!`a;uSPL;1a}#Yb|7#vT{2YxqBgC;UDpu1XwNQkd%!ckH~!#OWm*OgP8k^r
z(U~62dD}RSYkB{)e&xSGNkwx!3~$F7hdLdjiQIB>0RHd^slNBRKHav@X?|SA6X8uf
z^T1571Wv?8vcId>zEm0cJ1y((xev<CHx(m*G&eMj?6OcEvp-{X-Ajl9juj~?GD-JX
zmC=~J=({P7$;Hh|2lPbEZYC1JP>7v~MS(!BZzVdI3w$D;1A458h6^S?c#$&6Xe7Np
z*s`qpp^9sgBA=>6vJo%?ff)oSeKeBocL)^{oc3(raBwY%TsRlPE-h2Uv(v0BcFInS
zQKYa)DyfB#Re*hyRitXx=?TN3TtsI5b<#j!cXx6lnNkg4F8K~UkiJ;6mSRmXTxYs+
z&aR7rO)gOtg$h)taHS#oJinM(EAG`ID5jkhp~;BueE3pnt8wGrbu}6O){Q|UB(@>*
z{DI$03X|SUaj2R>8YJ*=(ytw$j#CC3E~;`W4{%!t*&Baoe%*KjVMGh9|FZDIugI*o
zMmS5PA!5bO(M`oq#=J+x+W0eF;e5_ypXLjmSV9g_Ppk0Bg|sksR67wi>hA&cJQXRk
zlNROsfof4>5o^Qi{r~25A$C}G5Q9BMFL?gDkNmG$B!{4EonOw*${K21G`Ii&001eY
zJWk}%0*!lNYwLzXarx=%xlTf0CrV<d$LQH`VAuVwnr2af6q;!u*pN;S`Z|zkZ$d0_
z*3Z<)vpCp44BE$z{rDy;PSuBHDJ<(G+7Ixw$`DOM!M3V9j+;S;%;ChHg59^p2`bdn
zsL1S-+b=z3`wsCZHEdL^Cu6^tISlnu39efGUWU4Y-V|TK^94Q3_XAC*c%#77Qf6%b
zq7zxSC<I`3h`noAu)MsS(`mbqYz`ZU5>GsSYia^IHACz2Y&ednr(Q5L3D?zW9%^xI
znKC7sEXgbbMEO=Ra(SX~T3)6F6n}w|BwKX#8$G0~*4J>sb5)~$%?SH-@X3y~#$0K#
zTl`%@onY<~U}hUcptH9TfJxQd*>J?YmK}xw`m1$Dm}K_|rbgwM<56q;UY86^n_b-6
z_=u*(>8Q1n3t}3>B)W__pQffi8g>uA3R%yfPtpY?3TcW;jsOgAKHneuOS|8t;L9iT
z7NFz%5{f1xAVj2h@v7u!76uNF-V8AgqerOi99(DLE!Jf+j-I@3cotQHz#?9Bi+RvJ
zIjmMXIhv&4bl_r}6XT*LMLfaQ8-ig}KQ_hCP{)rYVVP#R-@&gA3R;_SJv|?hJN~Fg
zg9?>St_Ax<7{l;0$$VA-#nug`po`G?AP@?d;eQ8ctPjt^%@mGhl)*{%lSRSIWh+Kx
z4E17|9x<*+_Ky!`8=n?zj=}VQptlI}+mu&&BKL3_v+IpkYofaN3&{?Ak(Vi0;PnT*
zY4<EY2}2r=I9j6rGmwzY13HOxg!dzwTh$Gy98{{owrwam>TkSfYi~QP5&Z3@0!!fW
zsDx>R0nfJ_au0fUDO_{Y#;7b!<&_){8YTz9%cMNzAjuUowN9&j3~Ix;+u8X2bf3U}
z5ra_hEH1u()L1G~yPHG7v@Ta-l-E<>4rru<B4!C4h%y|17%|WoznE!`C|lNESaJna
zy%JOJuHJ&q8;LB>!l%&cy{=yE9A(Oe2TguWia`-_HKwXcdj6WUje9YwB@x@aGtr<b
z4I{9z*q9(KcMuO;reS*8+QTv?!O6x&{o{GWUZWKy(B068W%QyhLz3o0!>3^Oth_$G
z&@bx=T}P-7_-~Amw)trNwg+IP^EeCfKB~5}V!AgY-{Aic0Btr#;I<n$1xA1PDnKx+
z*S+qCBQVA0{LY^7zUxuBMg4)*c&0X@*E#}`L>)DggKaZ?R-Cf56O3|RSD4DU1~5E+
z^Ft&*8F{KccT{{rT^mP`_s+`6B;g6k*QxIj!Z*$^<~XApz^l4gQ9mu4_8y%cEJYGG
zDt8QO_7LTxSda#P44eD;G7<IKz5C!vr!j{KL9?gy(oJX3Xrk@mdjX&-P?<UgYjYd5
zk!OaP(a;}TmxRat#Hhiqc_|cy;qi5vw*d!2$L11TOP=065V}9vTUok-t(H8wm~^eL
zSGf@}SjC~!6dw!_Qmf%%AnDtA#J!3w?6)xyOM$00so(p6e(*uWM=z$)%91`u$;f%Z
z-;TaWIezd8ey{zbWb#<+je{XXl##4wg@_jxs_|OBG7~ZCG?DzMn2XAYOG1_<YE|2=
z`~{~UKlE<0l*M`Ca-a`ka72Eu$-mB-unDj4^m-s6?0`LpvY53Jwsyc`$EkM6)dmj;
z16m;b%p`VgCcn@p+#MFNsfpEgU{p1$yk|xCr(Qkc$1s+Rx|fY^z~F6u?j2^~q{}Vz
z;cnJw5A_uPTkMT&m8brw6~)Jz5oMXAxsTxIFig)*z6$<QQhF!#Fm~h(n<h=w!g`ig
zZ{nl>YB_5E-rt`VWof5?PmUh;|EE^AX4aRtz?3v<{zaPP497WeZ7nRqBD1&2e0eM1
zaFCHDutepKq3ZNww<lFnvmgG`)c|#Mnjy}V+}|_aWl7q&84kb-a@j@O2Pfm%=tD1K
zD2daqh>kguYZ(9!@DQqmj_ZiT>zx_YcVls-z6y~Vj~c>y+Xpax;&Jm-m*r-Z)%WC6
z6Ms+8tQb_QmRT;)+=HSWj@}!#GRwPFWvl^2;H|)EOj_spehRNmpEX&BJ5IgpOMybw
zDAsnq6<-KM$vgA2eqb#4woR<QF*e8HFr~~L*OfxzbL;J63iB$5kWWcoC$B{U#Oxh6
zpm+*;+AnN8PODFX;Z!Zk@}bVR?dnq92Sx!0jM%dt-N(CXtMEHXg}r0~>)w%=3Y_7e
z?wu^NU-12hSISF}l}Mq3)3+jwuF|H{!w>)Bsu>mR6Bn-(G~TBZQYQ9>;M0gr|Joq#
zX9Y4KMzM)0?-d<x;S3wo)de>=?`Y5m-i++sK>rMl@Rp1p_?~~bz<YAoVb)S38za+r
z)N`$fxFPeD*LdY<S2%qm9xUMOw;fBwJ~4DN!TA_vn!_q31?7>54qs{m7xVnK^wa7W
z=VbUSZ5!5?mt7b4o}FnPGAZao5ru*GkuQ?Cw<9BbFd2VD9O?^@8hAwkJY{<{-y~u=
zGWkOydDtM)dx~D{GXv>}wvN$}pfOCQ1j#}kr_LoY!fEEEWPaX)1NAEZ<%W)-q_bgH
z1`jVtfk1r##TacF;EdjmTx(m^VW8;(#^N%qsw;9c^+5fb!**w&Mo$ak6B*@S=zs)A
zm9z!wT%p^n^f!KRXA#e)nu3r^1P+@3_57p(+y9sj?M--_^8>Lv6ARpSWR3u8^IPW3
zM6+W<m>7T-l|oks-D||&8PZB<K*E<j;B9VPaV<eAi_VJQ==l8v`*D*@000000WIZ!
zF!H6ib_F!;SfS+pr6c_Ws#u=@v%HP!bk)4$<F6ELj;Vhqcm5XFH_K)|-@69ME#eJx
zizLE!5;Nv!86ECn-E5b9yp^>b+0C#;28!rc92T0bjTGvD?iY`ppR?c_cDp;R8-BAX
zk|06s!5dc+Ff<G5B%DU+iVbAe5Htz@wpN+4$oCrptOjzF*0^UGTW)PiV%YFyc#Ic-
z!9()tJCx}ANegYysmVZd<`0}6uE~J`4FW}EHWM%Fj9A)NR^F%+%{jfu!9`531`g~~
zkg}h3PqL?fOnyiXY}95{BHJ6E-mY~ZGlZE(T3?x>{E-7F5;(7wLn~LNS@vQyXmu(;
zO8RDF)z^D|?i1h$$Idk7<{?@SUX}B0xGz%}*K(FVAuaLK00j<&fL_gA)4rkfUPR&p
zi=HX!T4^Ij`CreG7-O|et`Frp`bN|ISJ|CYrrT4MvZ0P%l!B5OHS&+UGda76aA<mu
z&atJ#@afCsgNS<KvDt~LJ8%Sq!&rActl<d(xKR_u;vl2?`Z!6YUD5*&02UosAI0e$
z5tn^Tizr$X4Mr?YU|9%j!ePpU=@SPcPhzDb%WQL?;V!6DXf{(YY!yGu<R;S(pgJxm
zce=MIVRuP%(k$=*di*Flk1XjtzUBKWyNH%pKHvc^8yL8hHc;&hNY<lK+p@1vG=92w
z@ZrR=4voN6s=DAZi@7{}EN_E=h~ZK?6O|YEoD0?dgtq|_b1sZfD?0ox<xdgaS*$gP
z7JQ`jQAb9F9aZChL{;x>?ONaCm-NxuEGfKYcRx;uxP4lN&6FD5Osi+ZX@FS53OBa(
ztthV`YRk(t#fyP+C{9L708jb4k2rZ5xk~oSF@)zdMmW~MN&1SHbXCD3vRA=SlMLbh
zhtD{8e$agJdnOh9dm7F(*T{nf5Se71A-qxeK0Jh8RmNi2iv9>#d=8UTt*z@SggS7#
z6Ns<bGuzIqJLOlAN&c(J%P=4UcHn~0DrWKSR7X%fLDe|I&JFQ0Ke<Fo4NStF)G6>4
zf&BhJt{p2OEoG8;@YTyj>s(r1$LIQQ^kfQVlEoN*11Q=F^S)M%ri1dp%K}G4))#3D
zSIg*6dZ~O5(o>Oo{)TzpMOdEhN`JI#CB}{|LfA*d)G%G6>8eXJw(}Ys5H|_jh9;Z$
zu*p>PdUf6aCr$1;h2qUe6Zqc!JVE$<Asz3WXzH(Xn$!o0D)p-^$KfW+3^Eu3w=YLR
z|5<*$Egp!yIu{W&c~r;`{gRV}Y02K2$xf!WLeQaOx^-kp=7k|D6{0~uzk$wqy+M`P
zs^RbzA{MT{%6BN1{~Eq=j31z?NvoerxP86Hqbk55^OE(lM8R1)wUKVpYqE_wU4O-G
zEjFZ@cn;TlUDN5WAXGO%Hh5-de%~NzBw5{=FeXU=-M?edxd!54dS6wr^T9(_@#%=1
z$I(BM$Cj;EwNl~yP(HVeosw!_B-_sXOLvwy7+)c9k3Ko;S0+4K26Kq1v`+)iA5B$I
zM*RF+vS2>jAE>lZ;N7*D2=5<K7@Fdcb+sp&(Aj=Yw<pg8on6l$SM<$wlqPHbaE-Af
z-wsjK(p8}z)34`|0t0c7hbfsR#5weQq^7$E@F#0K*cO);LmhbHaz?K~C}V!w#fO;8
zK+5bMf`MqQLlbt%nh?&!>D-$OrsqW6v9)zu%%qdkFxz2MaBWg&zZa^P^HMrDm5k;I
z@Bjb;Sqz11R1>XitPFh+9x6G!*V9yMqfczrhdr8KbV3{r^m}>dkOs_rsZM#yMWNP0
z#~zmlhKdZTF(n&;|0z51*R;IT0*Hn8rgIP3{e~L0CPB=UJ}?W5V#LddjL5gc;BxL>
zEZ&_OZFwg*HOMx5n_kEJMk|3P4VdF$J|v761|fuNmm$EGZ3u(I%z_gn9*s=wkB<0`
zxiRrM+UFq45FI?@cN=>dHT(zo!B3H1{|+swKAzj!WhMYLR{q*NhglpA#ZmxkKVl*<
zwS*l?952ob<4x-%KoieTkLh5}^Ik|a%D^FTr3&}1^}QK<^!9$6fOd|?LW@QqEjhq<
zZQkye2Q6fsz3Tk0skENb0^G-~tA&Mw*y0q}Xy2(-ik21_g-wTs1oT9Xt3X&jIU|eC
zN0VcH>&IKlF~hvHtn;#OO!xz`6pEt$#Kbl#W}kO@F^prQzPg)=F*duCw<r2Ou@<Dt
zH2z=Mc3yKN8$dyMMZs1k$YLhJ3SV#(_~>6&gWjFHL?~7rKlwQxhUy7t$6+-$AAhxB
zo1^u=T5GhQbY%eimo$S0HWz`BDZ2a>EU#ZJ1_Hp)g(+b6FyW*;z|ou~Da4o+waP9f
zY5*JiUEcI<9`<pllVIG7G<TvGH-+*s;HcyX^i+RIUrv=im#M5vVFkolLt+?ePa%s4
zB=wnlvwDvfkq==qjYfxQUGHMde7_3e`RQyGfAZr4oJS#5xqOU+!}qzGvb-dBAwgS;
zc>nGy8D=i~S18aDBZF4bg@Q$S=F{+B>OGTO&|rN)-AiQI^uxd020^+5ijPLmF)46h
zX7ftABVp)kS~=}q_p2W9etkwtdO#HABO?Kw&922P=-jRn6ymGGYaOJFgg{iPV$e7M
zfOkGV?4O!2^(Y+z;D=#tDa}KK0&Mus1~^ih>w&a4>n3s|>ROhOHe2@+b3hlzucU13
zhi{mN>7F#tATwWjQcpMU+^p;KOP{QI=q_;)=-%Mx#HAaiE334^G|wVYXNok%0}*-i
z74(@L$&V1Cx`3v6Z>HOW*^-L9efAG+%??~;5v&E=rR(xj^h`Z0^8uw051VplLl>cW
zk(=rhdWeCOo$|6&?Ob_`!)IB=JfX4la?K*E;e9KpjWlL`k$ZWjH2Kk1Pt8Q<0e4Q=
zPurSHeGf}`!szYb{%a?*;1f9!L>iA=aq*Q7$E-A0Iu<$e{opD?2$GGj5B7_r?Xwfz
zV1<t<H+*(Xg_O+acq%sk)9k{i6E5Hk`qk7YX0D4C$Si|UgXxw_;V=LD8Y99zN*bf3
z=}JGk7sH^A8>yI)4;|j*2Fb#wLcf&ImdExQ+o!}dyeGopoPuGvfq#$g&I8SeoQsI8
zR2po{v9<@&kH`NuO=DAxQ+hiKU50+aG?S{V3=W8<iX|3bdZf?|j|5u8sn)E{_t6Og
z`~-t&3<kDNUWG3hsjaeG^8pkuV;JV!IgV$)7|}V<VGQAZw(Ez`$CjIeAqwSU=rAv1
zmyoCZ@OEW>7#j-{<_5JwY}&P5DkJtzjJC2a#DPx&s7rYfH!jP%)f$RZYsB|5APSHF
zTTV~jF;dd|RTeM+0TanP5kn>t`Zd1dg%lLj>qI#ZIne5sevQ#j0ffE?n~9|iX)(mf
zOQ#6dHN5&S$*YbyK~2D*7bnw9OqFtr!CqE7O{IseJxprR|5;B2153eqlI^M}PeNLQ
zi4MFsNnc(cC#SeB-v}@g5z+(M-_|4QN)gAnU4i^&Gj$t3nR#Xp<YOuFj8rJw9vl^_
zX>*I~0rt+#On0ekvB66I2`q$I67?{YyCKoW-7wgXR3fG+>_8p(DrsnE*)f*QP5r|b
zSDBjDauDOxfZQPuTn*kSs_+p6DAyY49NEBebt2iMJ}n0dc6szci&Q>H7=q~xvTUa}
z!<GP9Ox#}V)Rlvum%~DSz=OxF7flh)W)QAX6y5o3jB8*(8V0<A3b?AJmqpA*Zn+%p
zm{tT#;L(QcLhG5VS*pwZ<61Hc^a^P>9s8q=UZZ8%A-=tSo)CQbpq~TZVYSM)mPLm*
z+yNg$<61%`PRIX>$W)aXk9}!NUiuaU=YPs=Od%^lIi0x$AbB$2leN4IU4(rYYN$p5
zGsfZrmpz^98A~nEjNKqz2<}~Py9FlPTPlt?)U=B-S$U{N@x7O{6E7F94Xy_~o(n<N
zWH9L;VH@=4Z@}~CWM{`;G?@<aOAWV6TZtD&^Xpr!$xWP6Z-n7uvCH<BJ0#CzQ^Kzi
z1*h4vI5WO~aWEyHo!qt{zk_d|g_#=8_;`Isn~S82%59u$VnZu7Y96!=|6YR#rp>y4
zmmsDMvm3#gJjX<sS_T)W-IBRxO@SvZA-*-e$banIq(w=XG#Q>nYsZ7~T`|ze_bq*P
zCoP$Ic+#Y<RBq8*Z_8HI=3XzTZYvFcH#qeEvdtxXjCXE1hTHRzk5<wHOo`rFR&bd$
zew4gT1hKONT@Hdk&7A@~bv`W)iZv+5BAa?j7dU!fhA<wQj;ZV!&1h%9;h+cp&ZJIa
zN``2#)Q8@)pQ!eY?^SuT&^QwVs-N-q@^2dOcWY>Kedg;aIF=;DLB4>@@QkR`wJ5nh
zBpr7u(li!}-39|fjr<!!ZNSHrwI=Y-`I~P{m)@a8T2i^UZM8qS+Pda9t_Ln%%A{%P
z(-wGa`HM_<W%;1Cf+D@qgS&#Q>&LG4nyB=AxJr%PF-hKo93~y3>F>1a;1;TuAX4e(
zCnART#i9D{DQn`rS&95EF*Y6#)n(l}y@)_>C2Z>p_116E+>+*+B?c%$O|5(v`ZcHN
zeS1>>flqZkp`}K&gk)j0=QYa&?+@6#n)F9E7Zv~j000pZz%NYhhn3)6zzmnSr;i9y
zc=tBRCXJCZ8f3gUQ;#9!pJEhHbwuK1s6n?9(%wWVgz1;|g$8xwJa6FTLggZ+*ani}
zQVA;fej4{7b^QDG!LZCM*aM~{L(}9GM8K|`YIwyEh3oAYhd}N9<a@eUOkv8V{&QoU
zZhIt59)gW@@l{U{v-)EhXHG&#V{$8zkRS56(ik@)Xy^SK!mpdN```V6mtqyQ>UF_p
z@}Cgr5=RElsc}5EJuP8^R#Wr%a)y#`-x2g4u+VKqje4jX!M6We@p3W4`A$LlZu=LI
zkU@iqzH1!l(z1?vzm>YK>CagMX-ntid&TAnqo5Fbd|;>1mbQBlg0C;X*qS3f0PBRl
zpbW*^War!Gg6h7=$s<PH@H-0aA2bNbEw;|C=oXD5XtR-ebjuaJpWXB&2wk_u8(IKb
zC%6W!y(Wc5WWM?>p^-}2&BafiK}Ty1_Soa(0u<G?yH$>u&8I}*w`4pL2UlhQ+M&vX
zKV-i?$DiMoV|;4^Li$`RdtOo>(qS^X`aJ;XzO9{pq;k$jNFwznG`NXEx!PBq8&(M#
zwv=w(+9iOG-kH1UUt_QcQ-FzM1~NV@1AvQ+;3~HZ^y8+WG6Hkgm;~G^he5j)6=}_{
zD=n5af-;Oxy5ol<I7cfqqUFy(=Btg<$Z(Quz@;6h*|o?cya^YW@Q2QDVEQEG+66~A
zGpWy>h#i}JZHyv~DWZa=KjzMPcf{i4w;*RJkhk-{%|4TK%?QEp28+pOPVz9`{$3sG
zS;MaGZvs86jqHW4v4xyf)#}LTt&lz0H*i!DQKI(Sx{?M7FT`vCW)vb@cAzB@*#E?U
zGZcJhMtInQ^OK%bxD%h&#3#r9fe?`p6u4PhK!~PwImm~mCXjDi)E;bd4bj=DLc5%R
ze+iOX<&U-b@Z!waX477PLAt5B_97G8p5U=wk!9W~J$T=prDYT42K-|YkA^D*1xGUc
zs{x}1C+b*QBXXF>I|ajayiY@k^77c1@@vh|=y+V+2UxgtQD?Lu>qAx`%m`Z+!Bb`H
zf>|Z=zQ68O0tx&GjhxFttj#nUq}1P^KEQ8zzV`Oe?!=x=Syd4E1Q(Uj+%1{=W1Y-u
ziOjt^e1L!JxUuMZVL&w$ak!Yx{3If4zdx|fYhk5!jw*|z*R@y{^f2nk?ID)FMGOTy
zr?rZg@P|lMsBgj;ES8?t0P34dLE-03K+k1T(SJ+Kr<PqV?S%OFE$64J%{zielez&9
zmA{lZwIo}3&3f>EZqxVJih&Xr*o;WL?)yuH86)$=Ft>d1rS$<dRD)7c#?;@Se4_f$
zK?F^uOJb=&>UU|)Z~)doGPqQQ4n50|09A|##tWO5r|E?MH!GJ@pIf4Cv;yy0PyRwb
z>(XuIdZ%#p?uG1z4!rq&VV#$;J7Vk84LtZ*y^%n|BUYV;h@+o=hfxIxTvpwQyzjkV
zHTf^0B4r{stmp2W37e>{z>B6DEL>7IJfIGxgD-`Z96Sd(f9U*df)8{kCKK<Jpzow9
zs5QgD|H{t_`M3NLDyc;g#MH#D3w9mnHo2StPe8E0jJs76c@#v3vVY>$FqW;S1TiCT
z{h7yNZ@h1gP^5Q|Jza6)f@D6#aW<!fcdWZby)ihw!iN;LavoPux2ckr-h`mKc)#K~
zH%bfbMx^_Q;-KpM&_Ac%bt5v#oulX}RDI<bgI&L@8kcyqB-$6wXpm?Y#v_O&1jSgu
zFj_Cu^<lmEu$-#t>oe3Lm>c2xVUX0bla{tw<-IkT<VY0~_aC^wzY6P~q@=EN|KEdn
z{M?&!^IEeicl|=#*5VD4QihjW6&+?ti~;Tgj^8>pCuc5K(hgpC`_IuMLMr<#3mF%h
zskM)mf6b1DWrS*rGo4--3c=oe{bAByyA)8k%OXeI;nT4rTbz`tXd2;yIr^S_fsepo
z4zb5g0TyMzENNr`9cjw{N?G`-8|`Gu`l*B?N@4egaP-9_G(>yb5xLKTMw`Jl+nBrs
zUg(u=L8hY3-?R@v9YO0Gz0(bj)u)(5Y9b3~JHF>=^ki@{djlSC4K2u8>S`i_4u@d&
zT5M1b8`-09HmHru9an)ryY^M2dNhd5{mR2G(P1A7AlLQJ$5_<LU*<@BsgYx=0^w=*
zos5h#n4J3oIJF$$Kb_uNdTQb%BM(dV<Q>|~b7(DeGHn|c_Q(-Etm{7yq6P?4*R3aT
zqCgDG=zUQ2#_I@dv(zKV%d$=kz4_;Q2U07^TkP>d_E=gGMSiP;>CQ8Rk|0@+O}t5c
zbvIfhC8hJUHTo?Kfh%_U%YKhmX<+|DAYVxypIC3Y`PvjXk$?qln)_>*26O(KnBM~5
zK`4ez55~yVYss-qyKIij&YI0aRq_bny_*Gy@<onOuYazv8+)#kpMB8BNjBf{d*ZBc
zyD5yW3KC`KA;11|TnnDpq-cMB_rS{aPu1ox#ajI*2B4#V9xN1jDj~BUh>2jOIl7yc
zetOq)pR7D@<F6u3_&+5RL!nun^vxF-=4<B+I0&JjM%;Uoc-`O((GMVMcVH3hFFEF6
zgk31=Vj@k9;OPWDI0CR+uQgJnkP=>uGAhr{1^K3H4DbG3jaY?5E(*~UALdlbs$haW
zGuHRcD@+L}vX_zZ2bqZWXCz{3UW*H409jHDz>9QO2?pTsUoF<`g05yuUeW$Fh{7ga
zt;?ePQatB@d80-9R@lyA3@1``=4`{X_eBig;DoHh)^l*;HvdipVn-h)(Bkg*&8@H~
z+ljLnyb}PM59i)^)OHX7e-?Vajgm0riq<Ls>?3x>g)_eH3~viox`V{!uqpXKU1aIv
z+T~v@c1NaQSi1KF>b@@8c`u4Ek1~)aW7@ya!A)_ww(|)xvZKxU@c*kIaMZ5nweRx9
z^THL>fq(-#kNu{VJ67$4(vEfHa9YfC7FK$uQ}@MJ97SPFu46l@?E>#k48yx%$e>>a
zT=*X@TAExecN?~!0Da3}x?dn!cLFZOU%ujZ))1=SKBEM5`o8s%6#XZq0@vAtgZl}+
zCT){?Yr7`7`}O>Ms+vO@BKiv)j;|2!gdC2_uu(0K3j(89(}FCPyx8`0p|DC!KE{w)
zh4I`mJ4~rp9o1v8;7}krqG{r-z>f+q7k{g4*6)X&k=MEod2vlfxf;g;0I9^>ZafK;
z)@S-!OlqJ46A;j<MK1AtOGkw`oa}~fHWs?-X^uKg5}bt$e8ITj4w0Q5MqN?zH+(`b
zrjZ6{mnp+q6o166eA>IbfdW%;p3&giBfvb3#M6u5xyFfI%JdNEs?gf9@AB*>Ytie7
zv7=LaVoa)t%H0;yQyAMmEgilA+8d;;fO)*CJ$fXeHte;+cb5m04{2x%E=z0W-TxF}
zfv5+DVNd>O@YI=kjM8GI(@Jk_6c=bMDy>c4E7@Wivymm4v=`Z^2&M`RL}XfLR0vsS
zeS}|JKFoAT``AGYrQTxfCEs8pN&EEyU9p1Ovf4LADYr#3$$6`}_?f9pL3=#sq({KR
zV<LYn*luJoKOGqZ(7$VCSL2B-q1ysAS1Cm(O7wT^B_q?FQ~Jt&7cf_%HPz(yJO5tO
z)sk3S(^D^Gv@sYcuGr+%zj>hUoT4+N54A;0N?LfJ2rs2B1yECOYt8MU4CgorM;(WB
z%rz8`{?rW{9N(}@1_*H=#P+`Icn>dN5U-d7DU{Ea*ic|1ej+%y&vBTur+c=a0K5Uj
zth^gJ+PTW(KmQpY>CsgV%v;eOa#1+mQ}g$EyqF|Qg0_#i6o2pvA+;gZ#67x1q|wR9
zRCYHQZF>3pcb+X1o=$MJki>Kn)=3rJ^>f)EJsSrO=w)FrlNmWyPLzK0K;@Nr4gT_T
zNG1$OQ8Yt2pq})pvZC{SKqz7GVa^k2Yd<Q$rImc_$Cg37=4eFQYm(8)Y0*GVC@D?w
zWXyV#2$b=E>{Gf&QmkYqcmJdLw!8E(l5tc1aBkgmC@h|w8Oh4yxja!NId4SfU(0qE
z4E?B8Xd#MTv*125f8E;E@b^Y-QuNJuZx4|-0?UpRD1}@xCVq+OZ4RaX2eT;oz=7*w
zBdY1zgK4M}!;UG2gZLveGCKF=Yz)ZZ1v2%wK7WM|+AM5r?=i>6EP36IRmqW`UwPt%
zQG`>w0<>qBC-|oy?&;Mvo@9CD%t`oLJl*uhlSmz#)}6g?!~gtc;)V3^&+epvQ~{K0
z=g4BXvQPA==U?qYb}quFJotF2b0r%qsP0i|VHi42{y4!d77jETK}iHn<AF7H&#@lt
zKXZsNC2>?FxMS^5+9-y4XaQ0o19Ue5>160PBu@iI76Zfjw%Qum7u{M$1sUDnLTJV@
zWc#WXhVWM*YRwet5eiM{`(EJ|OrDU@^r?X6sp+etXe4Q6$H%c^*fvwi+%N*|j9g~j
zJ(O>B4GGb8#aa(eLY;x#_j?@f+YJ4i(BeLxst3o9gwhUDdug!!0uyo{>k&$LAcJT$
z4l;!JazS_Ua3N5HZL_qfdO8KSFYnfcjp<D6H64~}BF%GUj>BJn*gWHuM0t|e2kl2K
zW^o34EWG-xYAX3;L=bh6q^qWMBK=;9Cy;Z|^wi)ZZ2|c)rwqu@(gPTXkh8f>`M*>|
z<&Ew0dL?m`($ZgD^G-Ly)iI=7;dTD)(WHt=qp1*Zhg+N0;x6|B%1-S$%8o!$KO-Y+
zm%^*XOKR-w(ajRNwgCp7@HvrWCeyvK>z~xyc|by#{ozNFQ$AQ2p`+XvlLCLITY^D(
z9NpRSVW?-TwY!w2nJWMQ0004OJr+GF@i7NNbvP&J{*wCj1kicFYz{C}>(h#mecHci
z*niDsP~!IuBFR0fx)^*(>V$6SC_^|glbg#E4AumY!HFQIi9Ah!ZhE8J=2!8`OUN1y
zv6nlv&KTDx7h+cIos%Q@Q`JXlc*=(|hWI5*b;gM`VDDPw<})+vC+D~dgPtZg9Dgr%
zVYBtBt&-XKZ$LiD-d9Nm>FCA$3O<XY_`p%JJtOP9RdEp&_&;Dm)EJEs1D5oa8glN~
zPYYG6-#ASkUV-K>`R6Id<-<}y#IBJMLIy5_s{213>=0~i2*<T6TyObMS?;ei6?x^3
zw6ZoSxTw6#*Ryoyb_6CdoH%FhRGR7>*|0T8jNUun%c_pqtwg(pmHwW+Mclj;Pib-m
zeR%+55#Y)@DZUJTx?K8!YmBOhN`LmsCFwdtf&LL$G(ICnG&ke6Cl&egaf6amtS$pg
zMpBaLrD;u=36%;`9-lBL1G|&_iq<H2RDVkaw|G$pe2#K37I-(6%Jti4dO>Oe)8O#=
z(+iXAs{;MZuou}ajX_V$4SR(uh@fk39kisYgjq#v@&ZV_Ewuqg`Zzn35pAAwIQP1b
z6ta_nJR4?H4X;jZi+CBmUq^mtK=@o!CbxEww1UfjVC^0vFhQu~n!?GG6K^7n0QqQ;
zW=o|NOdBIYR5hSd(i&yBu7yOeK?1}at;*)3`ON_TUhSDThwT`<iW8L>k?ltl7GrBL
z1!{O5gj1;pk11TI)W#%c{#gL&YFOiP84Z;;bfcVHSDeZ7$0_LyJMDowid*`()Gs0u
zP4Sfu=aFcvKwhPd><&}^I~ZIt{rHP5(%Uyjp3Wvr2hBancB<<QlWCP9u>|%j*Zn0x
zw#Di%TV}W?z~CTX4d~t5_`Of-H;}7*Mhz&u;|uFDkfyCHPG!44gx<n_pUFGkXnw}i
zkeN3!{4CFNiWTD^YwpOMpcs9Kh$w6(ix&(N-<~C!qyJ9M=9QTxB<1vs<)gmu>gl#-
zs_+qzUd9eUTJ3IZ2Q-eY^Ppc=j}u@@RArDPUn2<;oxpb1xP16dHEp+spgT<S>gjr_
z>`7{0gSx^b_Kw_ZZ^-I|q`DS`3>Wpf3930Jq!6Pp!4cl%m^3AeYK*ty?!<&o9__|?
zf1N&NF{crjpfClF0R~)>2%x4<i_K&jKsVEt&)K57cRc0&>0y3TpCivkLyH8qNd8j#
z!zj9J-m)p|@O$2yR$?58S<~BhZ&=vKAo<J(ctYcS6B1TKO*WV%5kfM<F3dtr6k3Ih
zm#nxL*z!kUyfQi!eh8KP(Q+Q*ECq14!!{<W)v{w&Ja|4WrM3?Vy^T6cLCY8`ml4u5
zv%i;IogTg=vpTFX#aPWd2AfjY0SxZAbKj{cUyiw6NC14C5+3&ZzZmoxpC{b}0a7@5
zAxR;R7V58f8e`zn>OJGD%HIZi?z*jDjg}qIt~vf#V;9S{L5^Oqu(myX9i0>D(#%F9
zDGfZIr}FsmJe%r(cn1hdZ73(^1^<)rYMLDtb0_8Xnv;C$cc;|MfjW4|$$E?s?2eiO
z%FI<BIri_r*SneQ5`)WYl?Hpdi9`@Mr()nd&?+QzpFDdfrvSOQzOS=S&6=Ar&8QnF
zJoqDHD^ohD!1O1{qm4wA=?is(0I5Og?=ey~Dqb}q7fnTdY*k#g&Kp*e;_b9a+pR@N
zcF`-a9Ly=WF@-_{nsDkgB|7F81bzC--D$@0>Xzf}JvPZ%yepN3?<PZkk1{2)#!Q_*
zvo%h<v%db~HU4?3D?IGgZtN|$IWgz7%<tu-TKXC=Q$O$q_$P8u`VC=p&8RR)ou-X>
zkrq64cM`Du_kXH;=if|(LVLI>l23xl$)UkpILtLDTzG4-u>gNHYo_J5L`@K7unQvn
z%{jfM19q&UgZukN&i4kSX+h+(LQGyF;J8<<uQ(D%%XI-<>}o1G31qyL77_$~=`Pm-
zMJA6)@I#g0QO2K8-3$*!Wf1JZpE7GTHPa_?{pbuzyugZ;Mq5Nv0Oe^*++Dxp{#zp?
znHfjkr^(-$_ihDVD;i(5@_V2hVx5rDJkd@{0G7->Q%E@X&#^8vnPd00v+WNRzOMK^
zR_Ip!Kc@)7pw{3!ax6@h9`fP=Z#YUc1IuW<^w!x#3a*n!+&3R*sT(=z0V1dTSyq_5
zMck*G(tGRzg&@Jriw!TUqzlKM>Y_8!%>+9#823{KJ>YoKwTi}EZ_Mnh_1U3Zn}3cW
zhU-00gt^Scc2V;uTy3L2_@k2oJ?7n5kmf|{B7lr^87A$Uu%W-)U)pgy+QVa??sw2*
zl8~_|WF57u^y5b)Br+D%L{S|_U8HX+HQ5F05G4eof?k&~*#f{obgXfYWRondXQA@r
zIz=wX0^qLr38>m97XJQT7n3+;W;|_gd{JYTA2tvTz8b*N(wMb}3f8f7?W4g@T)8$<
zE7^spG(8N{RqhQZi7<+3Urdny@Pl91szX!nUt=JyXs#&cnQZPeEa0NCW5<VqQt<p#
zHTfe`=uyqMYA8E0%T1q>{HeV8EvY+z+Xg^vFCp*>C~qpEBQmk)>q6PYGc!Gt=V3ht
zMbl`X%moHnpfwum*2nZ*h*$aS7V^RyvZ>9p=m};-<5M6{!`rq$cws}oV}lMST4uRF
zAB9!rrU;lv<lnGAAlpNL`Tz8N;e2Us<ljPOBa&S;RgXxvSvwg6He3<;ba+tJAT1x0
z(b>A!Cx&9b!7SwtC1jelm>8{*%?}f=SlP_*J(omS==X|7<O70w4q+^<z!?oM_dhc7
z4<nKb(gi@KT1RFU%dpC$in8<LJr6kxo7EPksAP6?=Sm$wDioCuivzy`V}LN%iDe?k
zb{D^|kH|YBcNRh+Dfr>aH3>BsqUzm`_z%4r@AsuthbT-E_dT|7?!mmW2ajeO`%QOE
zFDXnT-exhn+$9P(38_SXP=r-yFtV`9$?qJ_Dg-c4-Yjo{=LL}1CMOIRWuvC_ToL|q
z2SqosAF>RkMjEb%`CjX{*xKX5c~2Hav?mg8%YQ;hQ-ord6+7lb*{{nDg<lTN(+8|S
ze2y8=S5Sz`Xa-`=JP;ugS%mE#`nK;jfX-ZXmIV$svPwxbx;0vmBw2}lYlCr#{o|F{
zg8=4-nZ^^v7M#QwrIImafF_=_&{WR!9mDLVeZ*^c#_%evzzD8IcLCz5p$rAa-a{;(
zzO=yp>ILROY+icm@bDDhuyWD*E06~$pjzN;J%~v{87TR^jvzc%1$qG5;e&!f&s4L1
z+D`7@LvxY1>JYnAD=QTbS^(H`%q#^o$~@<nC2`6aFvz{C9-V+B3qXLplQ~QFf}w+`
z3uXqD;J~KghJGg30~O?6<*fk6pr7e=?R;!gIEM>qc9zXhTokM*&b>~#2$6#!9^Ppp
zJb^kTd(E{HemD2DnO4Ac{ic`w^}Sat000A=>Dm{IM5s|!FgR$5SU>%^-58S{BJUk-
zEO^xFcBsB{XTH3^9=sXT4Tn(&F!q00)l`#(PO&@A7&Vq+gd+5#s!MN$%-nM`GJ(3L
z^inv3kn53f<+tA2^K1^*@-eSB|H@2RJ7#13Ynb_4<^LqSp;%=6mbMoeu>?h41LQ-K
zE&^l;-M~RIohH6xmHQ>mRdmbXM$Ada=CBP)KEkJ}4?6Ojbq-3ditbmQUdJd2zQ8;6
zBuFj5yhZvZfZ2TP{PxDT;S~8e{_7SM92)kJwjKSQtGS|m!iB>O_RIp{Xs6F-XTP3<
z8u-%o(FZ>5k-QeaozwjIYAr49XyFc*9E;f~1eei(K>l#ch90!|enYhEG`j=z&8FdF
zIH@$S(KA=mj&pNx#BV;bte2FY;C~ihM$%nBcbFy5YH*6U)yJ}rc|Lgw(;7JSt#WO(
zOvxT&SqxhBDWQwfcGPBu?K1{G`-qb%*ECHGV4aKJ$GL-n;r))An%uCNjSes%#Sv#E
z9Xq5|Fw~>mJZo6#s3`^)rrk+R-3rKO&0Hb*hcTCc;CoF#a5q&=OD_qIQKVASuj2W<
z=fi}=*;6wn9MWid$dGZ$<Z-~a?~1LRoqgQEp4B;x<)^}}c9sbm%8_B^9(C?5?Au8;
zuO{NkYAy6|=BF#iD!#(DouMSTt`eUZa;|CY%u{mLl0Op11Yp4G%HtbtKXAU5tJZ0~
z8d8)noq+t(z12v+cbo3)Q6_Kz!Q}E(1p;GRp3O_LDf~QQn)?J+5QnP=iwDUtw35wD
zd_#M)pHY#M1rk#`{i>iXV4ouM+S&D%t3@Id7(@b^N8L)R&#_nP!pO7ix|hev^Klg-
z3ZVCIrx43QCLvjnu|`ua`KN5qH-bW+JpqwU+PUF<Yptw0`lIHinvm1k3p@#WL{r99
zPs%S81UylN@xVOkF)xAzLG*$SEY)66Cq#WB)z3i<po-!JUB}@it+<`XGM2#^P|Kju
zjgl6)YMV9NB)D$t$_y$T&MDNyT>NYew-L_8XR@FFABpOG!g}75Nu?-s2mnC^=_S2$
z&^t{Zi|bfNKfufGCVG!pT!d6X$tNWe21q=a;i7l`zIo$dgdxwQ7+;C;!1D$_izrAU
z-#yE@zFB#kp319NlZqXgj1SnlE81TC=~i!YFqiikDJ?z0RWCNB`Iurhq%4Y`91hwU
z>Fsg1Wu-ye{7?j+oaa=-_y7O^03dajJLvf(b36S;k}j@cOE|~`eyhAA9?c3!Yz#8~
zYn<AH<F(-=USso-=G=b;&t-CIn%bsHXUp@%C~x*eu;U=&;{at+?&GDG#msPn-Bd)G
z;h>=b$*wIliglB<IlkN<{EkkEwd-iXpkc>v_|`ndc-v`3E?AwnuQlPq4yu^!y;JmV
za0mNsVDl21VUWpxTuzCt%Y(g*H!Uzll3mwhw?!tGwBRUelb?t~&)~|HxYQiiTW#de
zhGl@GT<IoB(nzlY<?C5lFUO8{ZF>o4uR=a7##=TF6mRVnWQz<|r#Gn8wtZvY0sy(V
z28*MGd;s~f<C0M1!6(s-W}FeIWvcxwqYP!h*$^%=dV(VBn6YxG-lmbX_ITbCeQ=9x
zEn}SdNu;X{Jt;zdzYtZ$;mpvg!?=U?qLPY4x;p>DJ4gr7Z81p~4}c^%@j0%yV-q~2
zIXls@&f!>zF*<1>^(9h|{qX*psT)LL&{TfBFX+7k<o#?W332gi@`3-yX|UHp44~&=
zD;*>_A$m+X(r*s*Q(0Q_!$$$YHd&QL2RWDUw1$}`mK>4Heu_|3|2tIMM4i?~GrrT^
zKU|2W=7zp~ppckpHEcR}$XTD~mq`Mwn5`8#$K*Y;^o8ns@O9Cz7ke{({gaK-`8!dw
z9MZLaTN>U8@bG^`k}rhI_=Q>8aa_5PxL@Dl348b6ev|w%0|Hwolwq&?><1uxG_@80
z(%<=z6sK6!6Q^C)h3T9Ka&#)ZaQP9yc;PquwL7xXBIB?u5`_m=^XlCeq4IY+Jhe91
zC?OImGVq-72Ek>(L%kF$I<+|#m74QVngm4~h2b%cVAvl7ByrK((BU+q9H}kVBjZ6J
z%_sPIZrOi+I#hvLOtei=%N1Jr#yA9p8%e5jvL4H`v6%aW7x%q&L9J@YxoC%EkPgRP
z<W-45lUAB5!HnDh&5OAQ>PUZl)Y!tua;Edg19tAzAOID^!>28pOvQk5v}Y~kiak!D
z9<6@V7+<*%3_e;3@jdxFs`HfU!XU2hDY%gHE}ysX5i)-j814QVs5e1YEN2}-S)I`o
zA!;oWqm@z&<+}2t0M*2&0<PVZuAICa^^O9B(lu4V!0UNgSs@*O8fHE|J7hFm?x@4;
z-$wuT^98Z_$yGFDe0aquhIbg7tLX{(2FR~SxbISggoUF|65*L)=n~YEGDb5WVjwn@
z9r)%*?Dl`Z;T6EHQuXe-sxQ=%6O-d54rYtYFY_0@adzWxP*7k*_jfAZ*Q&-fSg}Y2
z$DeO5a--s`lFrb1!lu_=mlGE6+o1)i;BqXfN$2$o1X3=M^JlUPqy0ioLc(zy11!PN
z?)0{@$e7%czG_Y!7S$xu3YAlpTz;2I9fy0$$qNns%+3P94oS3P^&73-a+6qG^V!Ni
z0u?pWrmU>nsbSgZSs^gd*6_P2wTXh<65>e}+E=AE1#poYphJR`_IkE+cV-PUGoqJ2
zks6j^EOh+oWTe_U&f}1w4df2ByeTUp@KYpMZyE`J8dC0k@LLe3WOK*$1oT&DdadPW
zzJLk_n?mf#piL5U@*~uNE&1tfnKxmFC3HKF!{TIwpj&+{BfGU5T!@?T8$Da0PsDHQ
z8G=jgKFu}PZbgL1jsPF81iCyhq=cH}^umnJ5=2DKp#rV8<EO4(Xdt33%<a1r(%G1n
zQGWPI+Yhu}heTf#Bd|E}Ubh5Rr-PLC!$8dE<}QQZ@O1a4G@0FA1VjcDiA}_%f))Yg
z>Lg-@&9xj5Gesm|)9~OYJ*Nx!a!gGuN(dLIIikl;&#C`n4lGM_2c$he5U=}nWJ@~;
z%KTH(9fUD>_!(=6j1GBa2c53r`}aZQVaNTRbPQKynFJhzwJ%aOhti2KyWJ2OFVr8l
z+<8bRl}Z<CE>0gzc{CnLZqG^aZu}oi|GDJ)siXJ+xL@$it^mrbs)k$g6SIw#QJRFk
z&fboJ?WoG3!j6AwAv`x9uwj$T3$^yxooh(y6bR3_qvoG}S)gk5xT8qVo$6(~a6a77
zMdyAyF|fNfhWxQPUq>@#v3>qOipts-RA#1(dc3l%q>Hnu)c6A|_X5@_MYKkxq|NrQ
z@1x;mC_oUfxs`slXAtY-oE?fe@DiTqv7+Wz^LHzYZ|nBZzaW{t95F$zCO8KWVlh4Y
zp^1Zjl?H2!d4gjlp3E+&?td%ZucEobt<vNE+$zcMoXl`$f$VtK00yXK8WMml9PHLK
zo{w}z=65e(Ik8h{EywLilY1oZ-$S6H;eX^NKO;Kll)+&YBlDBP$sTj@c+50?yrrRb
zY?L10gIts>^>$j5kDk$7^;}j;U4N4FKR+1YrE^0&QF*yJ%-1CAV8QhUA)Yhok2a7!
z+V9k8Dzt(C9Zu{L!YK;Ov#r0;^4$eyA-OipCBEo)IZ2cEN7*4Kang>e2*Piie+t08
zB-lFyc9%l~`T{fi3P{!7OP_lX?C+GbNdPE{{FgL!-f+AkkV4;0vXVl*_ffx6aZ71>
zugcp9X)0F0g5yyka1eCT+6jX>jY{}&7d~ya4v@aDRuijMkDO((wS0u`k7_#!qV677
z5&f<mXcS_<f`;cP_o^9uXE;M2Jm`K;!I9_;7ZdBP^JJiR@RlT3q9aaG^;W5{=we3z
zK^Ws!Vl<nXOBb1;b&ufKOt`*)K<k7nmD6ih5c&9jXh+_V;_B}6YT5ljdE+o1*CcK%
zccb6H@++POJanq{jdZhcJnFbJ%UFObqnGBCkJoapcNnB;OPV;f;5!>j&;Bp9SxwXB
z*v79N_R{C*6WpcNQR6bKUY8zs=L;L5YCJ6DP5KJ(jQ?X~)2gE$)~dO^-YHGQ2wtoO
z;LC6G9Tg_Xc8!=`8N`bWFU^cPT8aMX67#KS_V^8`#KKRh6VfSh7hj__T*B{dLkI%!
z$NimPs=^M2`>*2Y#TJ%4AAVIF$=|xtn%Uak+pJxI4CZYDwrzi=vL9MbkqgcoBV9!N
z*eL&8<EUqfN7&oM%z@-fzYkwzE;t!`xg#XuSQ@pPgUCbMsKI+s{0lg}Wdb*mVzd4j
z<Q_=IkcXWS$ajK{Ymgh8;GIW7_OPWRr4+vAwaee!R7Eo<OlXyl5GUBKuVXZcx?6t@
z;mlx<L?^H6Mx@`w$A+x;0GmF!vFAJQ7P~IPK;X)j3P__zWTi6wF*q!?oh7w+3v|=k
zxOgF}*;i`=)9D7~5mC#vG|kk|Hw<Qn;DC`yNej5NrVtFAGjJ@<n30McAI2x~soP`Q
zHY@|>od<{H6AUY1Unz^sU`l24`b5<zTA4})5F<nOSv?1$^?Q1_Nyt!X>X)O|NvG7#
z-H%^v&zLq*k-tXD`$DoxOvpjqx0UBLZ`2Mb_thd}&5@e{YJ3Etv0k<DPl3eN0=kjm
zrdDtOG!vd&S$sj*PCS|qVb-@z&8AypAcXNAI^~wW$M5QCGsx!Bh^;@RKHQ1@aI)>^
z<C0S$iE*g<H10*-1+*-1l18XuS9lRj5<>c7cbksqu=m%GNjTOfRw7BhU%j|Ux716H
zyvtfcKEYd1gf2D5t~fj8c?sjyV49;q8huf+S|pCF&f&H|5S|~crIwZ^)6yBoZzKGp
zTsS_sMdXg<75i|8=V4NI&EW25w=O|dJ?bfm#H4&|CfRM1+4_ng0DoXIe6C_I0h290
zRc4u3Ld0*712~2{z$`r>#t2-0-g*|Z>Ht@Ak7N=`T*$zm9IEwAg{R3PaZ!o6ToYd}
z#Ip{gP&CL8)Bxc|@XJ6h{}n#h98(<zi;QNd!5PL<fDw`VnF>bP9#*3hdGOax6kO7|
zj-<!E+hk>P?HdbE6dxU;m`P=vjCm=oDKB^*2zs;76s6G6I^cgq$#?<$wh8|)G^;pG
zEXH}_9*yPX;Gp!Pz_m)?=T<Qf$&ky=B^*x0qWT|&;7~10C}{Afp&JDZYq;xBP=~vG
z2Dc!O20z1pxhd`X%rRMf9X-W^zmn^}w!u-w1bmf~0w8ZfTfb$pj>{C}XWz2Frsy}z
z^^U1F@jKXYrDqIi<uujB7I7QZJgCnSpd$m4LaGzY3Ft?;)>Bfj6xzh`hU<7Z#K3P`
zfIWfQ0!L7YQt4M<j;o{1fhu&zG70l!Kih%|Loq5S{AVyQ%?tnjiFn?34<~PIcKs0E
z18Hv~cLlS@bSAxcChik>>7e0!*`Dao$7UjNjhZR2A5R11sL3#tdh}%dt2%jWxvWRQ
zQ8fgA+-0o-LGI%rca~n0Jm{OrJ2m=_1}=#T-+i%*s;*#$fKzpGBdcfyfYqX-EkfKO
zYAtY)aQ&wOB1?rx5rfoPH0YWK_iTwIt-#XafGp~0^kJq8j>0Y<*otY)c2z*WQk1~x
zG)d%x^(7K}X_G{xx*;?}X%aeF>)$)3<e~g#$=SnI*C_H4WB;jgom{C*$o*9BGEpIU
zz@%+GKg1b;Xegwql&mc=BQ88-E6|#&3E_5MW@-wkWJO;I+Ljs=j&FuSY-6^-ncSX{
z1z~B*eqvnfWO~ETzuuYqekQIP+M2hP_XDa3sUig-p6~>eg%1laEiy<t;+Y=lAdH~g
z(DVNdvOaC)R9YQY1C9boq_u(j4cxR&j6?a!#h^Oz<!);J6PzbMq9N6ofjt4IN{(Jo
zaPDK1a$mSJ-k8*xbrd6Wy5BJ7%OgcSfR=3kj~08>I6RpND^B+JG0n7YmyosOnU-hE
zc@f125juyCNU?iXDdp65kpb*|t9L!PilL`*B9qj^I@?)%8E0)ivZtRwiTwN64fH$a
zf2{x&KA0gtIJqgP{_+e36n!c2Pl$n~{Fx}yh%E>J0000028`snsK}+gh@Hp``a=I^
zNCtW=38$Do>hXTU?&rCZwcgiBr@ZBMQ;J9sMdhWK34Gh1W*Vw^5#J<UC?Vx^5!H@l
zg-fmfs&x2AHL;BS;>1Y~YWbzDgH<nF#cI;h@!B(_M`s^=@lJD$4Y%xge|f4nZVaM$
zz;>2L!0QCWuLW+#+SU0GC}jzHfB^};MaFQl4v|)G;u(NiIf)wI`Bw|l;UZ}WY_`0V
z)T8UGv0BWC@Az1VV=vT)_|EvcUcIM9(z9QLbv2TSTUbDOla;8@t&1pmWhCXuHG*~r
z?bTI+ybe%x*F19!az=*gZBM*8|8pIrr0LI${k%cLv^`!$T@bI`cw};edgKGCc}T-z
ziaCK5`gGg%`~9H9Dwp3gzCSh{)Cxc(AHt^AQkT1-GI&k`Gf|msZ{xVcKhAs6qRp<j
zhw7Pe@8^3HOF|81e8qo3g?UJiD%yn_TLcGCA0-|LayDL1vl29!;<DYL*mk=8_2oHL
zGOUSaqS0+1cBb5~HLO00oIn0;Y(_7nKzDk8dCxB&;VKt_kk>T2c~j6~A?Yij!PuFf
zLlQ~ou%b;z!=-dxsO8(iToe;~PqQT7X5bXN)%bFAb@E$I;hVftP=K7<^vR9L9-%+&
zsB7(Sc+vppBOciA=dmre^%*&zah3KqKOU`Sd#aIh9bknXN3?cT<W>7{+E<p}--~n4
zPRKl~;ceG_vvEooIJ^`1v}GhRLx$D6gR_FG;<iFnd|3x06l~Bei?hTZ!v0@$cyU*J
zIdNgxV|Pa3sm!S7S+WPp-iaD$kw`44_Wi7T)tw<ZkIt1{;_!>5y44~f1wFEKfL7ht
z={<@(i8*~s;t?T%_a*~V7KWE@27WMd^c$@kU9Imr`NJ_5ORTyYO$!g?f9ZYyJV}@&
z$xKYu1ME|xwzVJ|nK$<kqP1*BRt^1Hc5h6(a)Z@M(Qb*W2(|`QeHHsfoEm}#Did&i
z7c7Y$P+caGdGOUz?wNa!d5G4l%;<ET>c$h1Ckt`E5ZS$#<G;&Y*8)C>Nzhs#6+$Z;
zC%2zr!R;!!^_(Un=*o+Qxy&URaUg#%Cb8?(yl~vMdMG@=_qzwB*T|LD!vdX{ZWJHa
zkHA63KUAE50j5@#oXg*zl4zEL0&&^m<%ed;!WVd%SBtfD6XOiBv=dZMJ4$EcCKV_)
z4ERgIVq08P3}2EN%op>!&Dn8EJZ0o65Rb+7UKt?y!ZGYql8o|Da=0jlaA%$rxO&?*
zMzMg^*PcBaj}e==RoXiuNT|1Etmk~$#Rfd4wf90-d2?}NB6!IsM(aTTdz)jMqH(vb
zBqnOvktwO0G-+kvMtW`!l*gAbB9z5ALtu@(?ES5tXR{N`0Mg2P`#5|#);`uHT&y!<
zQj;BbKk@%R7Vhgp;9mG0xPE7KyKMEJ%d9NCsWa9Z+FBfJ=1)bEjv^g`W&*EJ{j)?%
zxFxi-8D)s*=+FtqYCjv?%(0wl7tswp>EHd_{8cpSzvj!c+Zf-D!LJyOkuIsmO=Qc@
z<OjBx0fz4|B?nss#bIGppIg&Ac~Xp`O|}{%QQZ{S89#`GB;QXdVF`z*rvT{MM{F=1
zC?p)ns|V|Mbt>7%zQ#o8237?O3Cus*j_H@{3dSC`#;RQnzIFimK5Y+4HH7+^e^>?5
z70d`!ZrX8ml7~CaK3-B4)m$uPa$vS{y$f0F_=q~#)??85JMaqqrX!LH-9v)XP`i2%
zcsLWOkRQ2bYiD7d5GYx*omrZm-cHu8ocFL&jS5ZRcOYi>ZNw{o^t=?R8066(QX5e!
zsSjB5t~*I7ag_vTioo*%J=ouySi`%lh&I2K#M&UwonTSzZK9qKj)=ZVHSG^Ir-OqG
zG!Ayo#5l{3L+F{=PGD@1)S!1KPGvp~T9Nbr$3O2lV(ZOj^5^nrvqxfA<s9r1T4`Pf
z!Y5s&xcZ0?1#w9*ueTPG)R)4yBy=r@ZXD;Dhu^03DCXC&^VmwZ<Xy5Moh8D0{GOch
ze;BEiTV0RDJ7y(&$N{5`*cg9D-k@!2{0BV=)R7q37hJo%O^~;G{_$b4;_8=RW2(E)
z8&>?$1lmD#jQgbN3BxMjM}g!H3eK37^Il$Q$f&|-#WM08R_-}t0|PN5-4-4DYuA^L
zpR5wEnL=Vy=ZAR(VX)4VCZ>q!IFl6?f6l8s&aUp&5!6Z!3pq@{=KU)%fFJie=I{B%
z{!%~Qq9EaZIeB@8B0pfnc8}5=^sD&29M~7mz3K4s@)B9mn-OZDOHa2o2+(Bvll=MV
z%`CY)&fjaeBrsm96LjZ9lUHAE&w=ExFgJqDbM*FK_`a=Lu(U}`DF6a#w+)R6Xwtno
zA{&z>W|}`{s!ydp&Lt0L{B%662yx(VI8q5~Hwv`p6_=~DFutqmv9gUkM(3;DE$bZZ
z$HL7iRTgf~qV<C;M*lw7K?Tt~qJL4Vl%;@9%ElYJ9;oNK8fPosNL*%>Z*6dekPLj)
zfBzpWNRthF!sp74^6yhfNWx|;z!+TZ441<6rxWBTTUl?-GOL7@ZUpX+yRnoEM}}}#
zv+&`1!X8dLq*c-bSCPe49OfG?!>^Fkn`m5OUZnQ>c_LC$_}~M|y|~=<&=`<imOAat
zD(~q<6zJUQ7|jB+FutF`5zJ2ExBg_0Da2u_)dJMj*6hR}O*HvY9G!w4S4h+&uyn{w
zMsRK;g!Mjl7iu03MG>hlqylmi6=ni(KJO4y^dKD%Yp{;kBM!L9DA#tXOCaDk2y?Gt
zW*;sm&u>>dMiD3=iM5Dy)5E!?)BhQ*L3Fbk8dVi{Ik<u1_DFi1YTDB77XBpvR2{v#
zgNa@}(G4m`*cE)u)N|heHuuY5bsHJY^*1li_OQk~G7B^EyjbY-Hu?T1%P43XuCoG7
zCeFSYbRaM3dB)vSpibYhwKGgRacdoF@XlcB)eLoG@zgbMCH5OGMIY{yf*Lw-TLdOD
zMsQt<wCtkzS0zv6=fE4_rc7oZnKWv#HG6<Cz_t0&{_S<W?RQ~n!yz8_&P9r_I6LMc
zsTv3k)=eK8R1R9XNx6pwj!Wxlokz47K)fGhm;d6V7RYr#=@l|4LqUe{L=s^%XC%sn
ztZ{WpI{9v?ylkK;?%OHe_Jfe-oMG8hr#f9T2fiGKdoRD9;Hrj(=vjGaLG&~p#Nx(K
zX{95aX$^DK=2V37j&<Ziv^VYZd7=Q}=Zkljpt_?yb6OIDn?q_3uiVh{=65AefJ}yq
zY5fqdyr;oXIF51C`0E902v?M8mA$rlkcNv#mbpN1Rjn<!ev-&jB1G7E^ijDQ;NmHE
zHfaO>V~^gTL{hvNOxOZ&7(pcVuxD$SbHHcQzXuIhVK#${4!A_io3wZAnpMlz&{d;8
z%r4jBx@tMkISVO^=r>dS*l9bFBj6?9<gH!6HnRn)%9YgShuRcEdKlz>Omjm;;lVET
zMat{z<1jZhm34*<2B1jklljVI_gUyiEAj4Q_7qVELq7{T9PFKn!zkh&pA0_Bx<D2f
zY`(ei$9{70-KaDm5zr<Ak4J_Z3zAa=&AkMY?yejcRFF{Q8czI*LX~iU0t-sCTpv$_
zAsPFQYUmOoTKf$*=%6`Tg)!(9+)$Qa`u7f!*Xb$pF03zEt8rWqM7uWMa#5m1vTEJ6
zZtX(*2e06$_n2kk>Re*yaVX{5r^Iz??_=mD#*Ze3tywi5#~qT21SaaRK|qd)nf9c|
z^iH<0##nOtA2?k>ZSyn5{j`*!DfU-+4Z~rv5c(`~f{dp|xnB=<%?e(kIQEsY7d(q0
z>6kqxe+GaQ)u|tIP|2i_4Z}#R%EY~2c{zRCPR1K$)E#W?r{Sq7uYFJDK;$>PSTUIJ
zj*lDe`^d_Gr_;M8AuYc3Ghla_)y#x_v7~plhv>?n#hp1~TXZDmJMdUPsBVUD%Nz@w
z!gnwTtQuBuzsbPXc$4Iq9ud{KA-y#t32*u|1O4|Y(A(r~C)ti^|B3v{g6<{o98Zoz
zhS1u|U1dPEw7g!r-n~>pnth6R-QZHwn7Hdpn%8-N_HF}UBKgw#=R1UQ|FrF}2;D>z
zj=DgC_yE$+N7Gxju4D`lg<hznF!V+kdKKs1()z2B2lbT0vgrGrE1)N8O=>qTZjJ#2
z$R;6TGQnVsLBIdNK<Y&$!@V<BO8eIjoEiq&0!!}~a>tc-6UH>zf@GVi*QWIC@t29p
zq-VXg93O`sHe=owV#}Dm$o4TZTn|Ji2tDF+Q70Pc>=oDU7iAvP(z(2;%125Itx-RW
zV3IBL10RmIaKI1>RkAaSrSGyx0R@;(Q+iEwiSLe3wEs<2eS`ZwL@4e4+(JaeFM87x
zVs0o|4lD#`wXnVoh)D!+hC2BQL4?4-=G?$xjpp|;LbOKPcs}*589ph8T$?IFy6UkV
zN>sYz9ew{sbx{sOMs*v=acd5qL-^~gfnP4Cnw-iKd=;VH3yQg9$$fv^Gs59rRzM~W
zS6Ka_cQ(+@nCT`cF{}-r(=4qCAszsi$)$0eP4zdDT8{H0U(Vq%E=>5)z?Fo6jBVf2
zOigqaDQ=`0_FB9IqFMs{a1ou`;+ohP*pVacYkBl?4V8$((b;dqf!m$evZR%tg7lF>
zJKG$6Fqak0h?;>L&7^3a=FD(U+83K{6#i%(*C>=5GJj|<<4PfWSnL&7PQ{pyWV3y9
zLc4BSjB1B@Jb6GDrMz_-9Wm=q25kA<i2FfW4cXtjN%$&z<&#eaAiw|s00Jc+3M|F~
zgzf9<q3FJN@uVZSW_$4vvnfwfS>8zHJ8bu^_8zFCt5fYoKoX^k*Hk+&wI|X-k=wMn
zf|6mUbC+$;exY^Rf~MegLn^86ZpylA$BjU`z)^jzQmrcUYjf<-VgEdaH8LKAI3Y&u
z-{NEEhH5}M3XAzHZbsM`=<LNYS<+QItdZ*rbPeip!BDJM>~(Ans-WN46)8Nnj)K8v
z;Xp$o44NR-Oq|L^Amb^1(FS2y%cP^{s#1W#DV=0DPU^|e!&l^#KP`={Psj5UJVrsg
zSNX&!wnc1lB0U7tsceWFT#eHMt!UFYaWaGkAhc+hw$>clLa3joXT#l7irz{RP9&hr
z8@!c2WKEI0(02BR!vsu!4Q!F@Zw!SAH^dV1730_z`Tn0I`cZS@elgP7-45AMyi~x*
zKi<O)4xSLG-gfT|`K~%M5`dt;jdM-gScaH3!<g2dF_>enGczr8R$RA<m|oCo8n5}L
z!RI`R_bxQsK;7zLeL8u;+Ms6#H#ozYJ4r+3*gger5^nCU>53I3SMTl*g=JIkk+)1q
z{pH?mkGwRFKDE1d^C8DK8D4)#*hnmk6KTk7Yiw_A5A=kWY1xNeQO%EM<@Ee_&mklD
zAlKi$+2ww@rcHYvM0?3lyN3h0@|T{oKKkw}^!^Z#eduFJzTzadqvXykIVK#1Dq4e0
zW|w<y3$#D+U?m(g@bZ=S&|%b4JUP9UKOk!&wm1ZQJ9@mFfs+bsoUx;gN*D~^nWABN
zmPl~SPPU6Ef#N%0!IAq0!Z9jKz8BH;oW8WnlcD+GL-=F#Crw)t!fuYOO%2oq0+{>L
zvOCG8JfkgFjzkyY;vub@YN{D8$Um5h^t$+ipk_-)6iVIm99{6Q(vtxNwkDN*r{H-<
zBeqaabRv@wxUSL|JgfJkcg&U40|hX~%Ew}Orw^`2f_&|7U<8mb`DDBPxC+@OwPXO{
zMoL>EC3Y!59}S;$$c>a<{}WK9v8m1Eu;<~`a$l@cXu16tnrVF84b4|+)=G0}Tx2)+
zq}L!WArXV&DQH2S{9lOYW<D8WO<Sfv+wDP&M@gXut@Uwo;F?9k=nKs~guk^hse457
z85?j&@hKYrj#u6;B7W7*3$xAJqJLF6n^Zckak0atmWx2uC-oE_=$w`a%(YL#yP=-g
zBKb*VRlOztW*8#xVjH}3g*sNqwC=FCN~~B`Xk?!AV3ylbA6UBQ&+rLVz>CX9zv+fW
zA7){J1iH6Vn)Zpm`KK~0^Be|R+rJ~2B3MNL1jjRBIXrVttdb4Bk#*-TeZ#oWvb0->
zEijV7HSqvax{F}duk&R9b8|5{nQWftRqYXcQE=U(7+fG<@|xE#+^n&dBUB={3!3;~
z(i_cR$b{J{Q4|Rn<$!#A@yxA(r;0Ot@d5SE)`fW&J$Dt_lBXFWGl`wjmZ3zs0rWM{
zIw0-VKITH~3AFCjTtHAR94q*sqq29sntU^W1%}c$Vo+NFp|mrIwZFlJ7xsqM#jzm}
zx{=W8&9q5psIvV%1MgE9H-<FaK=JlGVuivhD!g0Br?jO3za~pJqL;7EQb%)p1pR9-
zcJktY(|yWhm~cOc$u6}U>_n^pv%<E#S7(}TKNU|B<1j_DuTWkiY+h4*vK1Y~dp5h7
z{`R>z+Dh(7&D;j=QtXFL)%IJ!?r!wWxI~pul#f;%2MQuhTO%r_qs@U!<=-4uL;xnB
z`jKkP_!v#wwYOqop&F-gQG$1EL&@i>YH9*P9SQgvWU_-LVc#h~Z$ZI8_GVRbHLP(>
z89_xEzq=;eIbEzC@h>RYj>IdP((rx~(Y}8hpcC@Rsx3cv?&vsiFPpH@)uenYL=Xj#
zZf=daF9qUDYz84Ioy^xkv^fCU3Zo<yLH|J$+@gfBTU)G%!3L*{<;n*ip6YqvdGd?f
z^Qs%tQxrw*V+h@C%+NZq7dY2v??wOU=+#ee;36Lp5;}z?S!j1-HC8tk^PoTbTE6}#
zRfEKP$J8ngA<QZag(3KGS8YIKmQ-1Ci8d0~jPToTz1ppyW4X{?nCJ9p>e^ms<g`V}
zsY~q=I%<ndOu0!huZN?(vovq)7+hB9GDeNC2Wpc*H3s`lM=|_No`7jR^N98)T8}%G
zJX9rb=x;e9qMOv&7aDJre;{Nd8BCgY<dwG5W!E$&PloK<AtNs=Pt$U3e^_HXBf+IF
ziTF{~+R$lGQQvAVswOJ!y|O*(ajyvN(VWbog(l@ECDG-&TV7Zgb^me#fHVHu8@P9{
z0obscTL{71>C;sgdjC&NL%P&1@&YOve^scH5zwL~u_?8isYrSdog^6h*n`!-(~rV7
zw5x*-THqW?y+qY!R|3kOpF1)n|D)F=^(+JwzN;0id4|pMP|$aoxyjg{>n-R92-5nS
z7kn6>YjL%H<A^Q(KfD4AJpk9)fSDLVkq>cqeH-FieimfGW&)RcDaLbWx&%-?c&Nxc
zqFS>{)Ny*Z=V~crt|jZ_>s>l%-hc#ZeSdy1)2GgBEtMU)&)<42-p0~l!4um~I%rw4
zC9P;{U+)Gq@;8>@^5@;hA0+dwPo)b)vQ4QuD1h5xstTd;Z4hkXxjh9YkCbuI?IU|g
zFaWpo8<?MY@6I!0iWBp+aI>EV>pkE5zKgqOlbxBG;I2+^k;7~K4ldaKn~2q#$zIgs
z@JSr~B5{v7A!-DC<R4z~DYWDWv`S<~I|C#CwP|=B7V_OpvVcR;fAVyDs&C(ER28=+
z8%a$EYbNo0H=_cSu_j;Z_@!8xIpvjJ<K$o>wcOYrxX)-YmRbFb)3)SzNRX*)y$`Aa
z;TG(ij<y_xr2AP#Dq5Ye_+ne?Tl{1Sf4H1QNx7eS+3V*Fk+hZ+-T3$&xe!bnZo_i&
zvb`qlC8C)B(&)bJ7n#+Fpvp*JxV5Um9G_0sT3IOb>&W39Fy&t9X!r&Si7I*(<j|z3
zE}vATuwjX)cgMytKk(Be#p1(YP1~7qLMD$qBvRB-tdBY~OoFuld94JkOZ_+Y#iG11
zu1S(L03+3dgXNI!>0Ux7#8?*p2Ez8bAqvHm&ESd!3vNq9h|aDfj@;V?p;81OvPFaF
zRu3xnK!JI)fzzCR@Yo<-2&pRAC$i4}%7of=x{Tlixj33w+hT;DS)~(=?v&DU83V%t
z;BIt}6*UVx;%SB40NJp!*Te2!j%V@0PtZG`{MXi`s{ud@(s_rKzhN%i#u!V@;E*iY
zttj|Wk&dn#eG>j8JAPHFSw1;`9Z6fO1?DOLRbH2!uA|PU_f@w0XTI;wnNA9bE&UWl
zr@8w4@1yEi^>0FO{hC<VE~wAK8x#PZDQFj#a(z}H0|`_x>0cQ5$;4P7As646yw6};
zSpL`<T=#1$gaP7xAW8GPf5(E^2nz^@ccl*og;gd+hf+O3q@Q7<g}n0aehB)cWBj5m
z7%@Yj=R>$$*p_V@V)RrS0X`YAn|Qa#R$uJ!sKDNXbn|$IVi*=lcyq+la&)!GV1-Zr
zG#}vF6GYqBPAqGf9e7BKoV|}V3^+k&rW1Oy9=U0#!TE-r6mm0jIl&^4LO~uH@&>un
zFYZ3#=KA8S<g#U0_PYcdUW-Ya#F<_|7*)jzsY5geq>4aH9P>|`QKoWuC}{&6{ggZg
zxc+rfxK`TOPTZ8J$9IDLwEPHzK+kA8NfJw13Lp?GZQD8~_?&2!m)=r^OIg*aZJ*10
zn8)n8YdJWGCO;Ij*Mu<LLE5BdVjg%^|A%dMm1g|nnx(Z+f+}~#8kXG_3(HWIyyzE(
z_z2Y;0l1Pd)OY<a^E)ih;ZA0yFeHY1dI6v?&g+~31rJI}7)0gnG%fp$-UHo`En_SM
ze%*b5H|cIncydAcB|n%RJY+$QQesSFiQU6TCsSxEe}dqIhXot0UN9YS3iH4ls)`$;
zE1@bVWM_0_)qWe}w*7N&7!f{ZYQQ-Q(^?(SNS}ak<Mg}vLagw0>m};PI*l9Yw6Ylv
zsG%(46!ZfzbGATrDe`9&fc+!Y5i=qeHX&jVirRc~&;R_ZV1<HOWMZ)oYb27bUdt1M
z+71(#RH$-Wq|J1zOk2G-_ot{=zdpFwXlER!w9fPzE42#^*QDpMPBo3pBEaNGfnT?Z
zc{M@#wZTP=Utak-5DmU$&j6gt8skf{B2dly!Fw<sQ%EaiP0cMx5>NQsT{;Gx)h;Cj
z`hO8g7q!a>%ZL1=7tFa%odCFae*BzwUMv9K`TD72bRY%@ka;xJbAx!`F1AlqBKq*!
z9Zt!ipFYb^Bb%)NMnJj0gt*(pRl?oBY%k?(42e`aE`UV))8sZR`pGZEBKxIP1+<){
z#zVgI2<{n0aqU56uQf3}!$_P3r-m|#2hVP$4+;8TVZ#1b5IJ{P3*(WUo%)|w)c>My
zIpkU&VR7TvJL;QF2=_2@jC=Hd`4z@-#ICvTUac*e_z04Pm0fzx7hr$@000A1))Y6`
zT_oGYW+sa~lL^faCXO4(u05APM$CVA91*(QLs$M)yA6hiVaP{5$a;C8Ka*LMl33FB
zw33Xn5YVwGA4&UaMi^dRj$(E8OB0mr!AQO%zkik|Zn>9twt9%|0{+?uO&}wfJD+hG
z>>GGBfo=iLPO#wHt%*C6|K<4Y$}hg5M0R`dNneyF)Zg+15Q)^i4M`+CDl!u1oO4%P
zQ3;Vs6P6lLTj`p>2%O5KIm6bsrOvl{lkrC?Uopf6m`v%~A)xO>3TaYfCUXGm_IZBa
zW+Izct=GBA5<){bIL(19Qj+2;CwEb`pTVZBK?~mRo*8FGjwP6RA4w7!2aL8ma$k(H
z!s=*WZ-iLli!p{qn_i3EuQCDqb+d+SYEFpoQ@H7FP~f%!u@>BCTIMD>+~RvA=G5M7
z+_eaUU`EWjhiX_TJ6mdMa2nN7APyA@-VZR*L%nC}4MCd&E0YloObUV6QOdeU?h<zQ
zO?EJfyL`aK#WTMRsm%kCz!*jUUT2!kh+mr^CEb-yrI6A>+<&<XzAhvoumbZfu$Xlz
z+~hu+eMd5q{ng#AQ*0L!C&3DG#z^5feR3^?LF)Z|Fbgu>qs+v+#BijrMj3x|JH22D
ztcuY1YUA2_BWW03H9mXXDey>}HD02Z9}mAI`qX>x<YoOG0Ek)h1Lg%r^3F$@4cRPD
znX}C%cg#3Y&pjF7$(+Q9>&O^(1XTM<x{T-Spsu}ZGF8f`SnginyL!IEHma&QM2i%=
z(&!6<X`e}lU4*ikLSeftvQ}>lCnarkdV5c@=>D2s@2uZurYyjO)})C?6Vujx#@&-s
zdw=10{SY@u(nNaKRZLB&pwBz+n^zI<h^G#G_Dxz|TbW_*HTX0phk1T3oA`-(t}bMx
zL8#sV?I!aCm2Vlo;JO_bn7Ah{_gqfh;xRQSA>M7>ACxDILTOq2R98zU#OR3l{8}RZ
z#Y!ExtO9LnlhCG}ec`-hU_kE0trH7)`{q9-`!KbkQ<XYE*!9?*y*X!hP`X5OFvp0m
z!6Im{))02cI2#{GY=bqBq>EfSL(6}o;}84u-lDX_<|(PX$5`g8glDzm@OsSuerge<
z*!-7#AnviBk*J$jiWL&hqud`II+)XilIF%tWb_<*HOg-Zet}<w<|6om%j$S?#C8U7
z0?CLBjJ7IZV^t>Ud~8J~GQH{rsyr5cXj>nPI<ciOxHGvqyi2-7Ab9q<WpL%dNp|IM
zc<=mgQ$e#D`$h--s{ZrBi#?kP^#naGhPNzB8p&Y{*knHbwn345lC_kO<^J}$M$e6u
zZupuQ$20K_70nj!gm*56Ce+swa;isO`K0(w@=uuTuS0P#@Au9nTNL`=4*VQDUCx~n
z$^H>98L8#K{$>0AzkI&#>x7h45914|)cg_qd)nYWjUHe&udm0ddGnvFkL0PH3_GBZ
zvi+t<O&faQE9XsnI+#D5q@cO$Fc!z6&CQ|p3iLDD+*8x4beX$EBS1hNbIKVJ0_$(P
zTVTD=u@sAgA|^Q_@w^K%n$5&6i8&!b+mhJl2e7OH+XVCKKF?~0fOi9<+|dfCz|~tK
z%!GfQ?3gLTvH2!6XGLb!&pNtlWD(;-OB}j={_FTC!Q?45oTC!a-tURU{9QACPEdl+
z^-n-H@e%P2nNT_`ta_pWOZ(k{jpPGeV><mdPv0|eAy-SuXZAkCmlQUo#jp^C;zn(Z
z0syT{p!*qrjV1!xF6{#~5%iFI;FY~0sj(jd7))|MG?palztx&e<NDx)JucfRi`dtK
zre|0tkYG5LD#qW$70H@9I#D3`M1knTjOH1E<YeGswA1FsJATU9m!2?6d%Q}^^0IV7
z%Xf(_`o8+??Pb9;izp{m^(9l^<$|HvI=ZN7H8UAyH9h&@2;i6X(@iYXu=fiMXEdu(
z9?xYS3UM7%B&I?Jh;Q!jNtQhaq#dsFzi_uX^d88}wxIXC8jht`8{rh5esJ56<Zcnw
z=y|%+)ZM`8Po&kNiBt6q)q4L#6qezo6jmDcTs}lxh63I}9dT&3&EroQ_uu4?6y9t9
zY<y}Q(OESY`Cd^oArVA=FHBFH319huk}`M)w{;kYXUIP3uU5~_n*K?S{nl4RUwqwg
z@ch7ahlhZ7KM%vfvX9dS5N*RX6;KtJL<bQdMZ%vQ7e8)OENiOprV2YkL)3S!7XM<^
z6G53uC6ivb(Qspdf5j@;rJLf)oBt~B5yKT*Cz<To4hRwMq#Tp!5@d}q+J~(vItBY1
zPlW`p#wida`~S~eU79zqT%`C&4ln1Jkpr!6eTE;j>cpA8&<!&5O7o?!9|+UC4|;E`
z<kstNjr+uJ!*&Lc&f_gYt;=lOO$MVeh_PSZ&kD6myFu~^=_DS4>W<b#eu0y2Paz3N
zG3V=*&u&;pJ8rw|NUjJ9o!NBIjioW6x(Ubhx7YyUU@>@&{H4%?e%Lvke-6jl@x6O7
z!a^PWjI2j%B?V4-`_#b7o1g-7v^09%=@$#pQkl|cUN6<EE##6Qc{fz%Z7E=$@PT&2
zjicCQ{JV3i&R?QREzEWn^8*e@W{`vB0B`+fXO5Cs`}fPxi{}$a7ja1Ix=j4XBvgU!
zi{ruwo{u|G;u<7*1&)DkD&yS1fOP^IMukPc8?Ye@P7M+5R3{ywVKoXgLc9}InAs%C
zF9=Thn%9AAfXOf$plUu4q)W+Q&2z2F%83q@%fopB(VguTdykxb7FQjX^V|A?Bdwz@
z-~p>?S;r-Y;-QzC80e4#(`#EldytRh+H&%_9>2-ucbsLpqUIQor6f?-7{&{eGbUPS
zIDOJe5s0nMM#t9_ya(9A_+Tew3Ux2=3KVG^lZWv|UZF{)J0LGJQrP4@$T}oJ%t+h>
zr&S%}8U^ajLR;U!w`9ZN7d@;|{kCu<tL+A=RzkFbQzDD#d$9Behl?G5)-pV529cD%
z-e*pN7_2WWCGPD6b%`s5AyYCTNxtipso3}GUNEGt;Kkz;p;G*L(@|@p|E|r0Z#ZU$
zXLA*y0*7>F%_fko^2&<35IO=qK9j(9?5|PAsc*Sfllt_NQ6H?{+J~Kc%wPbH@wgDX
zoDkM#$zpo|GbNuHN7V<qyiAO-vE+EMB{yMBWA=?8r(C1|M_ZmQLrSnO+o9bqlTYE_
z6~kCJM=o95L5QvkBESm0SH&L!(e4#A61&S>RrDo`y_?cT_Z2(e9^1hFtKzfWK;g@6
zj#DY)kL9MnRT-Dqj@r%Gh4lk2%x1pKf6>kG7{Y1W@+0+HAi<;6g758JvR2x8hZ$qx
zAfW7QsOCEYP<ZwHODaLSDVpVcoIa~(GQtp;^)Xf=u%g9}A~g=NlU0o%UuTa;oPwaC
z4;@9WyqugsF#SAGxr1FUT;uiZd(v6FbtOtaE%O0t6371eAgTH<hwz^tC@Q&HIaBRK
z%K=T%w`Bc#uYmT44IQ(IoxD+&(q{V(A1zUj;o3RYh@`8Q{R}n~Bnm`md+6Mbz2=R{
z!0(dtijZXQYYqxRLZuc=P7FXZ^@#ytSYap+2n`JmqJk-W1$*<$Fp?%C&Eg?kSkbo&
z)V)rGROh$u2s{xITvLfL6T(HSj4cx%VvvjKp3dPoGOiDqRv6scz#KbjLR}w;u3R)%
zlrV?z-0$#?C8C<BgeOFU-Y<lP`Nh&%5*j&Q1I)G<T)!ibfnwt&CN$tM=A%+)9Xt}p
z)!i&+!D-q<$fAExZcoTwxG{D_>GvwlYdwZznmB!|gD3UiCtZ2|&Qoc7c<ob+{NZG%
zkTgiI3-7iCC9!~h&W7hbNxaT^kM*!NLmv*RO5I@-VHMv^DJ=y#7KRezMJXcDib(u&
z{Sk>`D}H*&EAJ<Px266*cnd+>0g6mQXHI5d{>OkmyceoF%RqO5wYpYpfxGQ<R-LYJ
zDmTQ@#%*M(!X7$fBs(a63}&jxjkkPiHb0SMBB8Lb!w5Mh-S{`}a$7^nV5~$#U&xR7
zr?#s7S{BhAyUt<`_u=ukz{3sDlGSmakqWn0p694xfY7v62>J;n+c8dauZ`=PYx(71
z*Efs?DnX=JRF&lE@piS5ZU%{nY6{`s)5H@Hj<?=L@U5rA3~^9NYHAr-scXS%90WgD
z%TOm}pk$4PJsaCnpn!wqjeCXDrbaN!J?iE;Prlgn*MUCzs|+h1#n4Hl1Bfyjymk&Z
zCFj`lJk*(f?P1A?n<*k<AuT!-!zR!UB;}5s_?61ht2-G2#ur6ldMkwH6dA!H=kC|E
zI1{IKOV=2*X$YMSH_C+wK_WTMO8;!pV$%&cW-0X8^y><^tpGbpV%)df5@>I6nkcgp
z{{F2jJBVKe4&!C)jfJB7B9^fSLYITW&3M(6s5A~D_jRZKt5!8*5Gziky4W{`&sjD8
zU}S4@?anFcfJ~I3?%r2(NzenLPcV^wY7s{%g6%fXb~F8&B9s_Q@d@vg?Q4Nt<Svkw
zZ7V68<{Kg8waA;}?dnOcxSkif9M{}-apnKmd*DElp?-CYL$CTMZS!!HiJ05Av~Y_J
zOer5(mF&3pR&b#%L>j=R;BM3Zgcp$X76Mg|n5-hqceMAXGWvVAWPktw000)eyh|es
zzf0E?0lbrWG33nTUcuCfe|D1b_=Bv%W(QRa^W~G%fja}TB!23=MVWu;ufV5gXeRzR
zsM2-H|6QYFnr(la@+_eUrhq`{QA2;pPG$u{G`u5Gqxl`IcK17=S}{RCuq15@=QTX!
zH1H}K)S4>7Z9@qei-G^?DM`!`e#1P<-!-<TN(VL8@)VxvbUE0Gk<v7Y@2UO5zs<I#
zQO3Vt$@DIgII5&sEd`$XxHdPjgn)kK9#iBSrs1Lvw<_y+YJiSs>8-wc-3Kk;g;Zh*
z&nC(#xxK=LbxP63TSchvW=Hr=&^Va5-US2s01WO{VKc6)14@fF6$<GPX|+eXc*VRw
z=nLP9Wz3zH+-0rU=w^OT>fX+2ClQV@O0_$Uu?tS5x2~psRWV;tMy^F6O(ls^5J-Ps
z#z8`Tlbse&vOBDXsMO_xe7R8@dr_oOaTk}XI2WbQ_SgE4{cGu}AJQ{UjXTQf_2>4B
z1XMep#GG{9Qp9va%DM#cA<U5ONvuy<INi7#ah?N_>&1naLTy?*z_${p7%-NN{graK
z_|rYazR{k12+qcBNcKgheeO9ndT?`kMfj@fkM6D-S`On1a$IXFwK&VQz(@Y}Lvp<W
z1r_G_H0YDu_*#`}!L9}@K7XGR;aZ6i3_KNgxI5f$bhCP^{(c2EVsESYWip$L`hO=Y
zH~RH3kp}Ijbv)`$5a<CDaS5rcO%4J1w!(EEGgZDlT!_)Pz($$~Sx9fZc#PzPE`n;D
z`G)I9WmNse)GbpVWRKz$?-EFDE<skJm5LMGeCl}Fclcp_dTZcE0=n*bh0s1F@L%fP
zmdw&x=K5;P=3#Mw>vJf&>}d94<gI=yn`G*|U-@tjJup|+kmi;GeLjFHd#j{l!=t_l
zHW%2^&Nyq}c*u}TNl)5`tXB7<kjI`brAB8idm$a0RX%8M<(1I2EwwMx>X2y3YPbz>
z>eZ}CegEShWo5kcS3Y5NNVT!3g!r+$S_LluUMT+f3Xi<-xiZ0%97^Hye)%`$Q2X*Z
zjZMU<r|>Zl+!vB>04q(czp<v=Yt@S9HdH_AS4LSeRaQq>!O&ae$M~JSFNFgf#Kbvl
zSN;%`i(15-zl;H|CjFH4ebugl2>r~=7(92jSwQaVik@S(v-}wuUKY7JN*xjux$e#@
ziJZ^)mb=9CApOUFaFjRHzWP5nf`Hd1cZ&cabB5Od6upw~s3W7&f+6;9QhTXYnzt}o
zpt!7F;HW8!@`(=YyR9M&mFr&$Aqil({}T=9@C{}2nfccU`f_6MB}HNYqs>TE5t7(a
zW&#Y>5B=s>L>wka$niF6fVE(pthhsLgU<43BTuWJa<`O$o1#HCgRy`G^==q|o97=r
zq&Tm3VW^b+V2OMF?$MRlEE`{T4eY<S@)kB^uQ60lLnN>puw`J+sTQ=2?NW#*m;z#8
zO=9&N#i0S2by2?dOD49(+HOEvqb>WyD@;8H{&sUfEPDE#Q0VxSU$s3!Y6>l?fcy^i
zuB=uOz!nbR6+O8P+zw{Y8#Bk`hRBg>+Hr5f<phw~4$U3S5wya9U(*9cSDq5rf<I!$
zlpZf(r;0BJ@;Rq7p>HRwLOvQ_>HNsBKDxj$n2YLgi3ZAYWtCVRmAZwp>FNy!w<}<R
zbMbmkSsjQ_x=@<W5>^3W?${m3{WKQ&jfq)JgfO*~C}1<J?XWMKnl?ES*NWz^=)5T!
zCSX{kh8<)wW_^#)qJTt>%qQK<y@5t|t+|$!_pTa)SLL&fYnDxrI$i(q1qjpKm;KzZ
zia7Ilwso7@2;g04xVh$l-`;9gUXE~fr=@#&`qZSBreHjo?PMy~zg8Ljp@rzw1sjJu
zE6vmP!VmCp!*{N{9L4S$61e)ZR4`7k1@Iej8r~Jl*5;}K0?L4P%0_UX`#9gozktDQ
z)x%~-{1+O+E$33k|2#=W`#*p1lY7tOFkzCfpAa&Ya0xP|X~@O*I6cpt&E~ENy@0bK
zE7zG&?fBMmpGB}UhNpVQE6u_tj&KnorDxH=F>AHCNkhWc%%kSiwT<^S$dy9j1*1Gj
z>gJc-A=JLw=O%igf*qNt6jC!?y=e@M_8;?ApuLJYikDMmRERK}#RZpma=8SzJfk@^
z7kKDmaMZ7@qt!5W;Q3PSl&+%V##-Tv@c7Fj`}bjK7^MfeoA?@j3lwRGWIdXG3i<y?
zRWs54IjRrCpX`ayT+=>Zm5VW|Ly;hQqumUsdbga@{mGV+31B8dFb<T76ncVq*OAqo
z=-f~RU;^x_2Ig|$c)O2-j&^azA3gFnT<lGYL=P5rpQMkD!(iN+VDxq2UKw7)e%t+<
zWPIo}bEnvEPjh-iO}hwQ&7!Y0@C20a$o(Bt;C%;EHW}kw&nFUq704LkN(aygU>y9j
zXg^t&+O7b^{?Ox<E~EBSyLbvpf-)sq48hC)mw)p8C-$o4_bbS(3nx-zvWcMj9enip
z{rYdETf&Tw_IE@CE$?~;Fnc6b!A;`;>Cp?WQ$Zb!a)YZDz^fq?Sp1oGcX|17dSJ%e
zY8F$i!5r<2V4mQF*-Qe^kc(&Xs^L9l)q5+`goOA=C(8i7$N?N<8bMcf?0@m<Vt_(1
zw<gkQaQXNKKVj}+tL)0*@{pir%@(&5iG0b&nWr}%6Dqg6S-AQm^ek57{#F<4JYGgE
z5ED}4wySwZL`vZ5QRVC=_A`MD)dIOOkME`kx6+;)!U$3CO~X@43rEI$7-Ce1*uN8b
zr+8gra!=d%L7H&=#J|EFW!@D$qm<hP<|wXo!GZ4vngXi6-j=fG$ipcoo&9a`GTBhP
zjBV25g_x`TY-H;sor8aQZbnwn#3hW@;ndBgN!B9nu42_Y$OKE{@7PKfCVl)0d@tQq
zhU)X%ZV}RuDLr$zf3guM`i>Ufp0D4&Q4ZV`xmBoPHM=y`B~ezBvqjQgBlA0rHi_+G
z;!8Bm*VMu)`{=hg+?$$>pRB&8n?{U`07vKPz*(SZg-p3@e<?-wl!Z^`Ka=8t!*L<2
z`r&Ue2T6%<BSwCflT_;X6ZL3-BWL^adzbFBn05e>iZK}U>$%|#)C)lXU!`PN72Ar$
zG3n;K$u)5MY~kV|<t#lANE9vfN9g@+o7G(Bl`uJ@5Di^AL*d}f-=y$07rvM{&JT@6
zs6CEuaX?)Zr-GZvh&W+5&=!;v#gnA&1K?NTLjzXvCY*u8jj6>4ei{6BY)Y(OfkldC
zdMQ}8P<Pak4^d=Q2qJ_j>a=W2`F^Db@8n_Vt*23!pMca*!r4_%%{z!6LbcYT^;<M@
zKTxTGd9*cTt@GVW&n#hn<Ut2EIU_a4qiARV8Fkju17M#q{)UuakF1?~$B1!gw=50r
z@8%$q2D-d2L0lH^oJ7ZWgmhyhzhjuzXKUjPy?&$xj|URO8p$)odUOPnk?Z>Yqbc~P
zt#t5K<35cy!7KgrhcnFt1GQ`;G-v{-%$<iUn#*%mp{4@u{f9ZC@=@&X(vTF9Bni-y
zj@B4OmklsJS;|e#;Uw5|sggfgBW+uo4rjW@6Ts*62HoHMTh9J4zce*fTE7IgEJd^p
zHOP+2-9Ebrl!Zv4^21%Z>=RF}*>TFC8~X306(PXcNTp=^^z^(>7u9!!yzp3hx+yII
zC&pJmYyRp8!zdb=%4WWmDOwy*4uim&@aZ*52~EiSDHrf6liapmW41)U7_MJe12o@7
z=e_(hkC&)h`anN1wA;Q(L!2*qx+pB*`P?+0N&36sI1GFCK9G95uO^IgL?UzA&S?p%
z$;<M2J5*tz%(r(7Nc=<%)g_~WW&Stj3(DTpjPjX1c7UTz*?E+PkT|H~P=*xx(`oWG
zQ{ZCv!@du5{dUCdx<E4xRy>-SuwW;Ic2*kYDngq$-SCJiFr;s7|DAVFH9jS?ZfCWi
zXp&XrWP0^SfMkkeJ*ck*dHuot>JkBfvAK3nZUMYIRZAMF_MgKwnL<n1od<D?)Danj
z%lHNUvIDs_NJ&;taltE^wH09~FHHtDDUglbu9w3+Ex3D4B^|u}z3r~Idk{IeeK5Of
zFrMj({qM%ue)+E%rOgpu%v1XA@+ag521@3cK@KaLhjMu`E+gz%ItQ;T$G!<_1OX_~
z6s2u1cp#P>aCT4R?6-tO`#8&HTwjhe`x4ZeOC#dx)*-^A)wT1ytMmHkPQjFX^l+I^
zYl#5~nIK?Dgc}5CJ4qa_MThZvOFC9pXUsF)y%G?``dc-W+yBrx;gt1^b8^Wub6?fa
zcO1V5WZBY49$WrIiPlm|@R!Mbh9N@buO>Ucs>O-=_h1Z}nf|~wzvQx{fySS8$kMzE
zrTe`&Rf9o@eg7OA8<LlCg~^0`(hWljUGq>l000002J&Ba;@!9Bbi+nemp1?w?}JSg
z1>7iCTDp$X*EcKsUSzx8lUA)48pSAZHc(y{?b{b_Mz=}7_e1-=EtZv10~=3qoLw*w
zhsp{sy;6|13IZdr`e>Mj;IA5U0)u!r>|g3Vb{cq{UvBHDcX7a4*(m_muB-WKzT)1r
zA5niXH<FqLTKb=@x_T2K%5RMZ9RO0NaOh+tUK~4-a28J&8plMO9E^XW<3LqH1tY)0
z&BDMV?fLu;50)MDM34M&Y*weRJ1>!jqm6?Uf@-Q@ie2DKP@8?M|L!tE;-Im|ry;6=
zSH<Zsj2WoVog|N8UQT1H3cvXTF%1|uQ|8_uE5DN(*3M~ir0$fEw>uvQBJV`TS88n!
zp-W4(G*64LI5R~eVwtSIE1fBZYVL8!5fzm+O0enqcbR!qX+y0SUZBs+5M7n07W6lf
z<1ztiGjn-kyA&H4$;@CE0wr!)JS)yvyUX;vX%*lxJ#3|XeyKC*kq|MGrQT<6$Nb1X
z6}+nv?b>Rc2Re0?ONu$&Pd=qhTy^(<#yKAU_zPOsN0Ix({wXcC2m?M4FdHwe7J#9F
zar1t&Wwnl$`ZG%qBe<nsoG9x~>EG+fmhK#Xde<<Rq1qYNMK8qvJ<08fuJhZmlfBPt
zh4hUJyI&$#1t{tLYf-yzcw>M%Jt|qU7}fUOL5}vYT%0-T3ioc`h1-^xL`?_v2EaQ7
zq%#6fk*y~QiMs7K`^Pvb(}c<Nb4%t#8(!L5;&<3JcTPo=c~D7yOBx3CZW0tJ$*-6G
z75|o`>M<@pRd2ZBhQ<{R&9`5^sVnWMd4iOWPv95aQ!a~N4P865;Z>5TNv0Lv)oj3#
zSfz9lUQw88pv;Zqi6?mH;kP<?Om#E}ZKI3;KPRR}wHu&T(_5x(B$tg@$+W2AOBqKX
z`gG3;k;t>j!?Q<r$33SSxy2iZD{{%?_)B%e-&oAR=n5HXCEK5th&1NblM4=;_wk(2
z@W{KWFd%AHyd{tyoR_C<{YvY<N*gpo;Bt_$!35GAe=zd$vYKh^eEF;eZ@=DndNlrp
zaQ&d1>jJpFPK3C#G6bikf6cFaDXfY~dW9uF1c)aK&Y!1~vo$-R?gSu@D{CIETDyLB
zy!ysVYPGyeYVH%_CS`LB8>(^qdA4@0tftyC&JHJLeXEIG^~e6jQJbN)AT7fkoU88A
z5lfyP7#oywd)YSRxW{YM*D=2FZvzC}NA>F6&nat`NoyQ>b8IWutRVRE0Z=p2oiX(b
z2)pCS9uEQElFt|F(JPv|oklw8H=C&2okx)FK43m1ICn+1|EbehNxC)1ch!yw$_(%2
zX=vHoF6lkOYT9utsJgz+@sZ*j_2QyU7_V7~w<?YhnEQ({N21Klf(=qSPqPQ-eE9fT
zy`nqQ>?^~g6;7P5`J=o2PU#75Pyli*Y4DZ!xqE~6`Tor)DUb!y8--f=jmBK9<D?EX
z86OMi>g~&>p~#cpWhNzieriis;W<>3MmarhDbH|A8WEH*q}t=Ioovm#g$zS4#tOci
z4625HCF;O^M!58=<)8-3#8^cPis4o3p?RCucWO!=45T#Bguff7*urh7r@Awof!iha
zLLNpTkeCWu9I9C3`f1vsrN6F2;xzaAt{Fh1+=zNukC6;~C_fQ4TcZ;&v-F<g(<%mr
z1mu>BkU%`I2qSq~@5I*ILHqw1$)@jB-Kon$5WA4;MANStl3?|92wjz&3mOpfZBS1E
z@vVOC{3nq@t*em~1^OG(<`lZ_aI3AoiT>|+AxtPKjRJ1V!vuVaz{-yiQ*E?Uz>)~b
zIm$M)XD*pp*6ziX-o_sH-*O~Ypq59&Vq~>dAVg_6V(Z2p+Kv9n0&7l-sTGQM*FkqB
zO}pK;7!dzunId;(;!cz;LjZVoTcWdXMHeGzHRJtUQ%A~Wqe$P)g}9;&1Wok-gX<Kp
zG&Al9`J{-2sF`h<CiT@MrV%<UMPIN4LlB^A(hX8{zuavlUI-IzV%^etBj7E=>2)%I
zo~i%MWOp~>ccI{_c$roaOIq(cNyCe(y)?=_BnG(^fOb0U?l!44<d+qLEFbjhfu8AY
zhqsW5Rd9X*M`79w#!&{Qyu-%qj+l=?x}JSeGIN39F7M0OR}*{=tO&}4C5HSzjie+(
z7>C`aznlRBrSBNxpy!h^KN^Pa!f{cE*I?wk;d+0$pcc5itDb5`1o}F*72{*a^p_7>
zMevWZeT$D)|KZ$9uy9FackFw0T~tgsf-$g7eIoBC*<o#6J^48KbRHijQhAOL>fT$?
zxK>;(`QnO2{Qv8Ly9g|Z%VQiT)xf;PIRFfy^_1ioub*p<HI6hwBXZ=l_X-PwLQ;Bj
zzs;#5i2}kTlnE-<d)005H)bUv<TtMO?wT}$7;c~_j0B@JrdC(v6b$Oos<r<-$p>gj
z%-SV`+$dyOZaq4K?D}AW&kl~G9bALX)|Wgg*BQJl)AUBbA`uvu8x0o%V<zyBc!3x*
z@?poJehRyki=3t=paKxNLaMIXVHJ_#(RzcwY3zaWqtQ@%?HTCY^$d;J?4nZetHUQH
zcHR0UPTcVH8;fa>YQINXoT=S)xqRxom}q@)|4ZAwAjkp;^c!HutalUebIU?m1wZU3
zs~`?dO>sA!TNEvH1;@2OwL{Fo!z^ak(2ZerFy`qwtlJ*SyqM0A{`SV5|IC$XnoVOy
z0BP5fg&re>L&VPnM%1d3QJx%RBAH=x9mVKD$Ntc17l-Ny;Kl$>*<z;WJzb19;L%DR
zGWrej85mly?=h+qXohOl+-0`wnW-G5{G_iUwD3Wy5byJa8Vfn-z7fw^Ig>Y-1w?m~
zvPLvjd#J=@6-VDtvcx=Zj308Ta=$W5syRy;pjbdCr2Ow{b3gG6R)IH?Xce`C9F|Br
z1^M%*tc2;M+KXSb3#j#3i$m48YG}UK`x+fkOQ=|PRNTh)>WkT!93*~lHG#=GdrfoM
zg<?lVj!o2q0b_*0jduIucGh>BL0v;nMH}0)hb{2S&RqlS+2Bvw6?-pF*#Ip-Ldy~i
zl9!hn?A-~h2Qhk}jJ)%#C`df5aJ@-ZR2`Sc(@vuS+4y${8r~|biyF(XExxU>G}YxR
z1k$t#>unPYfPe>eDpFwxswWLG3aOON{IbaOB<5M(QP2I<P5p-6^h#8KX+Dl<%{`>j
z4nYP0cQ39C|3ACDGy+lW#MwLX>&?Stgrt}F47sj1ImV|I_WM1JE}viRb%8#J#luJu
zKN*;58|)HRsOBcE+CdY=%B3Au09F?*N^u}l9FdF88D{zpzYEAG_xcfnpXU&Dhx|H=
zk~X6I@M?elk*)d>H+y1`h*Mh;G^GS@GAQlC)Xs37EXW6@wb6y(0zr2=fGKM65iaij
z)*mg|3K0`_q2aSfo6`PzHy})k^z(az)Dt}GDZzLovF=X<nILoNU2J#y!5Jr(WWa;f
zNX=>STf@DIx?>DH04m)!l{-I4K(+To@owT?CP+$%iJFwt-<L)g(irB1_(+zX)cn76
zm)e0eaQi1kAG5lYQ_dEyC_qVqks2$f<<G-Sb-@5k;XWwTH=(!a5$GS>69r+DM6!h`
zVXCTnEvD?cx-6hseg4rWig|X{yt=C71m(Jz80Ca(_38zc_7+mITlA%?nspE82Gj~c
zfyuU@=NO)FAXyFF%ygQ8NVj%lv#b0QK?iq|dmCp0IH2jLtQPzqTxzH2J+fl~R3=id
zBTh7Q&sQ<@Apx`|xJ59P%U??Zd`9)LR$m01o6UxU3y@9BNXl-=UySy5YY{yT@YfF(
zZ?|F@%|a=?9iIweAGfZg(0sRdH`H2Xs@n7TB6u3X<Cr8xpT2%o)9~Zml}D#Zs>->f
z5QL593M8oREY~^&xc{pXmDD?5orvyCQrBq89rEa=NjA#imThB}oSq$#=VP9Fvdjd&
zKK>i?FVK-}R1hyX*jA%Xi9r2ywUbp3rFttynx2!LZa6nTRonfJ0|M;82Ur;x8gTrb
zr0F7hx~b5Qcav`Q@7@ne5!kDxspL>eH-j@^EE-Icab7E`R7I?FLy&*2qkbug*+gQ%
zpKY#x;^D~Vlb-wZOv+%=pRBj-1Eos<FlkF3vvWK*Sn5N~M<tNKTpr%I$r6rRiD^NA
zcm6!G@)hNO6^Pi3Z}sXxsdTtx;Nd4y-wFT#0002U;TCjfzVl<lAM>RX&B0wsa{i5r
z%ihiif%X?AIf7DpUe#UCX$97#JUR?4?9GyNd=0PUd#wZ3B2Z*-?nUcywSj`Eaomo3
zB8<ZryZ05x4B^i7!%xS(ta0)jnx6l)7!)(M{&yDE)2(3qxf+xJfgRA5pgi|n8aOrx
z<0^@T+lMD|p2nq!amlGyDKUHdqJH|(j8>}HhMlbEbMaW(zN!Q}lyJuY<PCIXJDxVu
zYt$^ID+HPQH>MnADc{*&Ez_K&pa2-f7^706!>ELCa{iH5#qCx3MqS&Ww@Vlc&b8p3
z9!>V+Az%qQGt_GBj<8ylUJb_c=?3_841F`;@c4mX3*3KC+z{*PhG@C#8SF@W#J`3)
z<w_C#CzaSFG<dC4DWiGRx0A|u)EC~6fe8M%&khv=>vRW5osjw37NMh5!<IJPYuy#a
zOR;Pv#2;=u|H8SysKj}#e-nhLUs^Yx*Fp>Df^X$KHxO77_Vx^Dvx!idCn9Q_f=NZZ
z0Co1b7+K&!n*pZ$WB)kc5HJ48Co|eFYQO^Q(*ta*aV5OaBmW}d75@!rP$xIMIcKn&
zpjP$+DJ_(<&z$3Et&bTEDxEQPvW?#kb-r^Q=ciJ<INA3L6;uAVh812$k^flK(bG?z
z8{9OSQA8CSUkIPzl_bDD5NIT+H}@gAse9O&E|<^Sx{0u}aqkVbfCjPxRXje$#U+{*
zhL2CS<v6&hRzP1kRqp46(`41_7eG&EEA>OCbwZroEH7tHWepgDpS#EC*|b23VwkSO
zEHO|^T9*-=&?1sA@Xv73(KLL1M?r<zUe<F^*3Rg>b(3B6VwISoH->)iFQp)qnk{;J
z)A}vbb6%0MznNq<-Pybw8`Z+|OkxJU#(n-R0%56e>a;Djp1eihgxNfgK0oh!A^s^D
zN&$5qsgoTflNstuE5a>x(6g#pXm2Z?{V6)BwaufJ$I8GI`YO%XTp*r$U3Q|KTb%1P
zH4ja&MIt#zCTI^+@OSLDFw}7HyGw(cUp(P`A)4Dvwd(;WQV#I+{KeW@bfyn$AZ9z$
zh{kidc^pY<F<F}Le*uBlNn?tpe9WM#TN1Phi|Z7Iw=*hoF3M*XB(1a_{1wNHeEX8P
z$DZcMBJ1UGzz@X+`1OU&eXc_fY@sku-SA}w=G^Y&3Zi&I@P|oHR&dq3q})qQaq<@T
zTjFX3(nA{sQX<N&0e~NQ1Hdhg!HXK++jJQdvQGDQVjS9YdR9$sRQbzE4b3Ij^LuVG
zh7Z9{O~(ZKLuE-KT@MwhWCWg2Ij8Kqk}|!fVVPwL;f17U#YUj{5zZd>JS?6?RE$gx
zuVp*^r%B6~d-`>~t!Qjx=~sybpzo0+cmd^Q$g^h1BCOOm`XY?UBA=pIu0mkIWN7zK
z2;O17cH}fOFBz<`pf_5f1<ozfs4igQT76lSTIbpWk78~B){~MEI;qOJ{1JGzNbp%D
zDv>Q!2HF7UZNildU`@e*!Lo+5x*bbh)x8eEVq=|n5`t}4Je8)isX^=W!zjqV_at-h
z^s%g{ga^7#npWkQ<HyJvcs*n&O$E!VAAylofa<RQC5;h2z5r4p@8wJX1<L-7rZ6F~
zJ(9jS8;8wN^FV(v-iCP^&~J&`eOva=QTWjO;$;I?{I(s~L-xBp%iGmG`Xd5#en{@B
zY{*RRN>UzI$}%(wF%p~p{aKOV_(fhr(3)704!?4x5f}~Vuw*RJA~iKVBkcg+Ov<l1
z_wzI$Z!1%ASp)Ij6fJ)nv;&Bh@#7hpe*OS&hXU>%W4Znk7IWgbVZ-dY;*CaHgjl3J
zrx6P~XtL|jPswLKS^JLEPQXUUV*HeuI<6GX-;)R}-8nKQ^;^Hx5M_jHDG(p=a;>V#
zM<diFlWb(2%UC8DT*<QlA$(Ywm`-aj$<a_V)f`IZvPCr@cP}QaxZU7Df)BWfC{O>f
zmvt3-8xLaulBt<zwG`r~H(ZG@%ExKyq%Qd)oI8$RGemm%@)P0*<(|amBE7H70>5J2
zPbI~5AQM#cR@utJ_JoVLEi?$KDptHVXBZWv7=`s6yir5-1uh27{voy!<~-UBe;D_5
zXBLa~Y9^rfGei$YqFMz1lD<>|{gT_KZ{9b9z;{ZbyWSjZs=Wz9RKigW6u&KzqpD*g
zCxc<ouTBH?5QH*nuD9__nQ$<>BC~70TWZ3|vx2{Pr(E{t&J`Ryz}ebcfIw$!KVtrH
zSQ<qw1j+|8KE?xcHNRfDiyN&Fr6}0R^G>){{;2ny+CR#uCY+HnrYzOQ-L=nCFSoG2
zS~0h9Y;72HJX!qJ%}{4lkv<eonAutg%e3%);#(>V%lQ;0e%qxK4TaQwbZIiD`njCY
zdPuZBCO0;z5lBr{->$BgYa+v<fS=~r_^{Y<i%B)YcX=)t!AGBiB#9%>S-&xm7i*SN
zQ`Z9jNs(WRxbN+@lLq3YA7mO4r~pHne!IO_M(XcnvjG#^G1N!frc>I|8av1u2WdOo
zkoqhTPq$P!@3g95F)yv2r#88wi0Aj4TahS?aWe{!TQuV|nx#Hvi>y#T7x^ZK)y1g8
z<Z9nI*(>i6OUx|66gRyjF9urz+dwK|>)}vz0@dWw9}h4>`gy!YwOj(-2dW_;n)U0Z
z5K<Me;L7;)@N_AJd>ZHa%XW#p9OmCi@b$xopKa>L0pPPCMs{+r%QELzp^PApnt&(>
zkke{`0U6N1<qDB?o^Y#Kqdd5cfnKNi?|oWSAk(=^B>ebRb$>t-Lz-)4BA7A3N;Ra}
z9!vpUO}GwivRzjJ?`NiJY~SA=j6iI7VO-J63>N)d%WRWp^*h0HGmL~upilD@XuFec
zT+=CjxB=lMvYkaMZ0Ue;vCI>8r!Twh=uX7S=^nz=g!ewIKUs9Qrly3FLVgi;Di@WR
zeheL8d{l(aGKC1DmY|YKWs*aWpWVyUdYK97V#zPCf<24H_`+qQcQcrDN6(_j#!{FN
zC{qAx2ht^E{+zG!d;n$#38RN@g(dPikZ)Ricd@{1stZ6yK}Z|dW^g5+7$JV*e*I~6
ze&xiD1yy^HTFkyXI?Qvkhp@3@7mLbf`k_o!j$^H3DEiPo{4~*E;q~B8Xa<{X%>F3d
z3Wp<jKBomY^dxR4iN9ZS;D!N~H@}9W#7~cA-bNzz)L-K|HkRcCK>J8HV^~af$0GGC
zo~m(Lsf<+cFgkC2q$#<*i<GG~W`G1Bw<kq(ivPacw8)6oeJMgO`~%+S$ACbBJ3ec2
zkN8usceE$+ILP%!TK1a^qE-o)%0ih(6tn6O<;{@9hl(j~GYY?^twB!?dT3PRsJ@=%
zg`;TP=G-IP>Aa(+WGrDuhbm*Mk4AqESsGOz2mWphND}tMXckf7)tbWN^6TzwA&&30
z;uARsipU=iNn5@6o;#n?U-K|H&&SAmyf1{=dCXr`6IUF@yZbo3iJj&?&)3ZIm<=eo
zN_Rf|?3~|gUf|%;(nD$UF9J~w-c*rT*8-(8`l`de?#<g6?Cjymg%DhdTZ1YD0YAYt
ztt9P2;}j>l<@SdiMGG5^qR<L%+2Z@j){v+wwT_v1weZP?8ijU9ftMZTG)YCX@avlS
z`=l2rS?Za#c_fNIBox8#+J8v)9_yfg?;z4Gv(y{MqG*^Whu2i!YLO8Ijg{|dP?kha
z!OMx0hEKzBD#LuIrwWN;A~iJq4o+Np4{@ULFNX|gw@W(YA($?FW>~0kOR4Cv;nRH0
zg<X%St#d5!bUsjiy#eelnC6o*7q*+aT~Jzyl6jox92$8FC*B<~E-#{2<dPVLPg!Zl
zqCi^PzRd(a@jc$Ydn$z;O1-hI+0CqX`-md4FY9O-lr(@{EeQ}Bc`na?U5kg9&STb?
z-JiKH3|sIK9)IxeNm_zFVPDMCMH~2ZXm4R@O-mZ}Ei)*6Qnl40fxfUV?bZT9=ltMV
z0`~#||5}I}q>*FY9xCZyEvX<{{ew0#!70rF*i`A^Yd7Mte?;6l_V7cJT%el99knz_
zZU=O5wjl|^z+J;{B6WAc{L!ARxF~qdh_n^sc$1>jDYrNZ!PcewtFu{?2LXt1cgvKR
zeTsx{P-bTO(HA}K#d?Vfe0iN&uNrV}>${|+g0qtloXx!y&{*I$wFP=R_kjeh<9VCF
zD&M@g0N9W~tOEg_?BZXP2MOb5esNj%2dM7<{C;5CuCrS%65cE4H-QjN0Qe7;Ir-l5
zJr=io<CeOj2Y>(o004K^Iek_`7LrhfrW?^S01_J<^UL>gS{W<N8=FP=qrJ#)enz*k
zpt@N$%*v*^&TJt(Bl~PTzOy$R{FZ+NQPOe-oc(b|o&)d!j_w0gE013UuYwXcGAZ+z
z-s{hvq~>GVbM!VBkh23ntQ><Q>~KYslNOm}zoKa!?(uDbX!PqZ-{CBon%d_<`R~v7
zodc}J`4N*egsmLoExgWN5kkhQ)cN-8=McDaL3j^2zotgr-Ab@0vQO2sL>#m@t>@K5
z1Q!-T-kjZFq1MY&{y26Bun?Xal=`oIsKjMx<*Hwm&S2_*21|I{laqSBYKzyfnXv<n
z8D~y{*{rc<M}5*<TsYPU;4BM1C2iIpg9b(VQ1T5QW1lP3v>NPxt;;qOc*Ur!!pKOt
z>=eNB?6GEE!klI5(G%u~DWn5Jaq;h$Vs;W^8Dc+Tnw55h5qed#T4zFZHVs8y)t|Cm
zh6T2I**y*je3zMEu;L1W%+k&p@)?N#El=7SoA`ABfBHV7^ME9486xgWA#iy60*C#V
z&Xb6)T}3NPDK%*{pV#t({T*Pe(1|Xfl<|}ZcKt1D7@cz`A?HS)GbQ7^>ssZFT?Oe^
zRF}W&e=qP-QMd=Q7C~eH@113;V887-W|PtTS&aXh1qMfZKLns5F#9+gF{Q{^kK$Tp
zhNJDipKz;7yPYO*YiO&R&^ZZueCPolBXgW)rhLWjjD3{5i;E6E<xzi-pYVMzqX_$>
zV24#I5qt@D+P+qeU2KJ{H_qSbmH-A~sm!H`7IFNaDf;Ab#MkDc^SDYE;V|>#$J!Q6
zA~5@txQZ#DgH%<FB>(+G&~Tjinn>-QZ5bK%4chC*IZD+@GgYH!7Q*tkL6PKl*OCQU
zntbWWZ_}~7fH>vxyShR(3g99VeDw)&++W=ws2nuTae&_EoH{qL;vpgz)_O1^;9sA6
zsZ9_T>K?OI&3I}(P@hYv*tbW0%dJn_&P%-b@}1${`)c%ggK~mXzb<pcD5VDYAv4E8
zK?4(0Yi2{hjCpRUyzNWN7`FF(zk)p3>xWo#_*$e^aw}_C_4Lzk0&}AkNy0o1aYo5<
zx$xH3^E`ejRGB;gD=?q33lJjt1a)mZM}wX8PR*K35mZiu$}LVg>06mbFGtjdM&Ej`
zue+kCh?T5!eFKt3s7`STE#KqZXLRz_)UT-@tb!Xv{z#WCqtkla?z}ZA^+-qTr|4Vf
zSCS|j^0qbbJq~e+%mUMi{&pa~Wt0dec}L<B6#)(P2%ya#Ir6Pyy7HxF1Cx8v;Q+(2
zFOnY!d02;fH<l%iS?4-4(()P5*a{=L3HqtS!=0Zez5QUW%Q653+?BQW(M&)qslg{X
zRAWz^Cq=d~Nw?HrWyUz}=L61%wX$iZQqO`SF0Axkpli@TGs>yahGbZE@zl!F!S$Cm
z;^()O0AMBoIJ#0Wwtkhww}{P`guOKQj$l%h&wj5rvC*4$OpK%}MAn%xMK)%!#{Tu}
zvp!l9Uo$plt=^+2v_$-5_AQde5;9wILaiZ&lMPSd#BI!u!2W-!l%~Yd7J9U3_c1lc
zv)v*nr8qg9Gs6b_UKb1E{SMHAQD7@<;5GN6rOrnZz@_c(S1ZO|nLY_W2N`I}3DeZa
zXFESe#GK%$y~R|!XZ0gSz|L`TXKHz|?F41vhWg^RIMDdA1?g8KeQ8%h9|{6;xN=7m
z>tW!4k$=e;E3IY;0RyJP{UKH9pcam6BimhHdc7?>Txhkl<vxSRW@R!p>EIUI{-6F!
za?Sc?p~Mu^Cn`{lX)-BP@cW+Ebd3wY*FwJHLvL$zO{sF*)~ifeJ>OoP|A|Tt;~-@9
zroYiJF`TzN%iDduN{g;iU&;9oaa3@RkTbitop?JEM&oXcmrB}&r>qS%2B}-exSFA)
zzkt<BKcW(F_o;EF%E$68X)82c;b5K7+DWGdjVj$CKprcCL<l@>XV~Lb=lbx83kjpw
zya{yi3*Evs(qEWm;LW%uRFPE&**bIcLA)QO+(%!cgfu&x$m{2$_@ZC3bxDEX(-9q6
zc#9VED9IYRJN@VqBQdq271Y1Uqs&-&I-qa4DTvWo5>XJkcZ%(FazbI}W_OXwqFOA;
z5!Ie?Ig`WQ_Pib1T`MHWEb?Exw+w9f3I1xKm&d&vwf~aDvFZoy1Ft!VfxL8;`|hX}
zKvExqWh@=^NKtS)Ge`cW%bgb%^Uyb)ensJhfJL!8Wd*@|9lsv0B&$3Ht$I2&tZ=~+
zBv;M{wDYfn--0e3DjzjyF~+7)M;`itrsYHsIRx8uM541C?-vi~{ok>x2L+-fIU{Ny
zP$(D8TM0*vloOw7w)OA(jOJIhG)xv71iJ}evvICJf!8_MFmt;zoEM9($GV2Da$>7o
zy2qBm6*_MR=*1<YZA~47Sqm5KN!#u-G*JyWfB^Cqa9G};505ND8FwrRZAPA%LsdCt
z;7K^Vx)F{Oc@XE#s`GWzZqBH4)50s}f+oLJo0%^qfHxRzkshuU7n$^!6ETU3wfbfC
znU$9u(3n>p>>>>wEw+cWWzCMQ6Nr}@r#iC;rr^VB+Gio#xBf51<>ZQ11QwNTa5j0n
z;}m1W6>ih2n*Jcd-duSe(o{)kKSY?)KQscv;1u8GJiTk@bYWCGwjjH$RDX>*fkd0U
zig+Sop{$ZC=ARss(D`Z~S=}$;|G6FtU+1~Y$lxTXEBP?;0nkEnyJ<0S;QPZDV{tqt
zKk{NUG=2aNfwPCc(aMC7ro)uw&^B&2wa)<<01gZK;+-Ekt|vsR3kcuAk@^kM8B8Mu
zUlzl}tu18QX)@YnA*(yI9x5GD*~>a{G9eFYPYEbNhH{Q@aUjw)x!DFX$0_<CE-20M
z(~z@tx(MY3!_6fvsEKd93HkmNjaN2Z8poK;OD%Iu!8{q`l0qcEZK+jTvy7%8&9#}E
zQ48<kg27IhC(w|TSly!hBW#jXh9rA-%6{)x45*n*`V`>rx}LyNXbx+aSqJf|m&5vU
zKfo4Jf^}}cx<9hL!qgWrE{+Ma_mj`G5lI31S&j#fXtKU~Xe0d?;|LS^oNFv=LC&5t
z9OegO!AXhkivKnZwR%LO2zUR>|IVR)PUXnMwWdaG>ct?5K<~>du>MByc^OdFxLak!
z_SxHet57mLw-AYYX#ym=4gdo4S`&73(hvK{pas~?1rt=cyu36)%MweSq*ZiBPJ~?x
z%1DlW{hCaCMI0M7P^K<hrvbs!wh&u7^->;Y@*QHAQ07zPu?ycj`988i>J~_F*LOiM
z=aG{+ti5-&VJDU=g&(;ir{aNx*spLdZ2k*~<DxPxtK%teL3Z=hl4kext@tqS#P=GC
z5qfQrfD-oGTq;W3c2k|4%1r{2AElaW54|(*cA0!@YTAseuak!@>I|`no;2PX(`62r
zQ!J4}7#^JmvQTKYTsfPkm?QuN>y-iR#QWG*DHi91NsQsMfx&$<81Z^hJ#=t+(StHr
z-{MRTDX0{g9|KGeTuFx9ZO5Xul$s?l({tSbV!cic%x}Sx=AlL~DjB2Kh-JU<PaToe
z+MMNX8f_5)DMX=)V<fIAA~aP<xZ>dJK9F*HZ;?(6o^8!Tee*8`S%z1XWJr_uiRFjI
z%?xAaw~_rgFr$f<OYUQ^xv%a=p@*wOAwigw>Qg5__Mb;?Q7y#6(5Yiw>3ZI5#TFGB
zLosKXW{|7Wd)U%7AJlNE?uaGx)Le)VELPr`@K)7JBnN<Z4EMQ1vzm))X$g1>DvDbD
z1?LB@sGc3ejzzytp|-Gek0C2(27usm9#^OVgOr^(>HK%)TRGi!-~Qb0zayt@j~@D+
z#ZK``iW%b9q-4*t3*3NdQAkV(0CAo_D=xpV0KiklgM#CZLikonw$ZEL0000021!&<
zdVftz`S&Vg54Q_*juL(Fk9p#YqQ2)%B!s6+@z^-949`CwRfyELIIK(_*$arYCuVzn
z&vnPK!vjXaGR~JH6@3amHY!?ZHDJu_W_RqL>EYQ_cch`yuRp`)>(R?ZBPxYY9@*LM
zHe*&xl#s#=Ku^zA93qX0BHQy%uC=`M*urpv2Z`~f%cj1Q=AwcEaJ-VNypI0^OD>22
zn^ew4tXBik)5R=|bhP88RR{1yht5uv#`8)h0M+p1>}1SQUS$ANK&-#LWT4B(sVwY9
z@J$RBjt04oTPqfDrMLmJUtUBl1NmoCn?6H^>vA63cyS{@Q5e4{YWZqTUrtaRR)4YQ
zYGcV=;-Qo?U>GTkU^F)ma=?hUMN6f$Zco7#IGyS1eMuX7n)2mGz&6*b8#m7?oUJ5&
z2YZLX^yi-%#X+*1SgkfRJVsGsnvZR-qzwXP9I0TwIZ^%%_H)*`prEw8z*XzxGGwZ0
zCEICNO$4c}G`k>Z6dLNdc?rKFuyKt3#9`cY-fBo45S6M9V^c>@As%}7_w|}V`*cub
zCIyEnK-ocn5-dH#*Ecko?73TCyYy$(e1I6-ewRb9x8am5t3?bJtW55n2YFIjqi%3W
zD1GR77zGaLi1a;QrW=%t-Zr<{S0FDx>C_wyZRqXKIDVt}=$;f&&6;|=;Y~G;Rf~|{
z#@$kjJ<N-C7KnZ&X{;(()TsS@G;xINRZAlKHoaB#U=2_9J_1hx1!x)Y0G&lV=k!`m
zp5P4}$#TFrvyq6m9CCTBLkF$l36NTg5z@_(42fSGI``bc*`Smxb>z%jA@;WS#sBX)
zCHeP>kok7|N(7bVPq&{uD=Um#52q7(`E$Dd<4)i2rg7RE#Q{#4TaeE+-{|G;&HFil
zLnK$y9JiUs+v^~3ak?cZsM!_zDnFHeL$40>F-P;Pb^+i|2q8H!lVJjtLyG{mwnMT!
zEQ0h4squ`25NN@gNW!a(zaRqk=gUc#QEm)}qy_&d#OQ?zUKoq~lHeCb`9~D8Fnj3M
zfa;-NEh7)!BOm(5QyDJ6XRXn%0yZ7#AFK>v^FyI}WYU}jEk0z{BHpk?!2eO+#SNhW
zVcML6s|8coj|#Pf|GiB|N;Y+7wTw{Uj`<R_Mkn6=sMeG77i?6jk>z~a`o~5$qOz2F
zctj?Jy_KYSZZWH$xpHNTdQrSS6#!do2JXM)L)~=eqkv^Xb|=dXqEUwk$e)Je{8MM7
z>CvNdSmjQ@7^NzJY4Dq(jRy}qm{cOl=2I8muJPoA#m!}Z*yZ9`%YYDPrUB!bg}T$G
zRA#MsMs+%on~M|tI1qrk8U2MztJyQ9I(`jUmuaq!*B|tGj)a&8U1bL|1CW@kKWS&h
zb7?YH*oA3*LRD;8MD&JK$)3O}d|dAkKw3k_M{Ka6<8g)s+3;G^CQxr3$jH>6<dR7k
zMRB?}RE-V2pir1zXB%-u7mA7CU6$=kH+O4UHB%3*Wtpbde7mL<p`iFwU${F2;N^EZ
zEzin|hkAER#e$i{79`fy&#}@{W>^sMF%WJ`r84*q6)`yMk&cpxc^B1H_zKbU!SkFn
z)NKo_Z$KL=tQsrau14w!l@vUKQ#%7A7G*KP1R;3y{wqr|IVm-z)qC&w6u<&?qBKRY
zYN4B%=c7z;UyJ50T`Amjc6)s((+8pn7{a;{P#(p<DCJN|m!00N<QI7C`TUyo$dPjz
zR#Y&(91_xl4>SLxp4hlIHorH#hH>vvpH`ni2!)+U;~Fm<K!Md4ABBxTg!Z<Gif#y8
zUPaw`U((XwTT2QddidUcmFG2cD6G~IsWh8@T<&n_<GL}&W!SSob!53~V7XQddCO4z
zRYVDi`rsQ{Wj<7mr36olh6ah@*l~cSSVCoKUKBKZVEdy#)*15jzb3M3zRU{WnOJ(?
z4lk+q;nAlgmj)Wh2AM)_T+Cms$SAhR)YA6xAH33DB&4E*GhEQU8PB=$_r$Dn=q?M@
z8*XIH1St>FPhwJPqkeLjSd)CGvqn)Nm)}x6rj!OtzTvOA!DN~&hm>c-!@lW*5z<v2
z*vDW81-xpQ1BggudQeD)#hv)ulj)ddL~%T>_2Di|dVb$Ie>Yl9wAnoh`f#%ij@6EO
zjIKv;5HWFp>h6k|#OKg_9fLQ?QUUts^x?c-Z#7Yg>wLsXg09f5#FA(<GBfSFOW3o(
z5hCw;m$pBxK5Sm)5Pf@OM#c34z})FEN#30x2Oo@Y$yQ9r-MII${i$jo25l$I`2xn?
zS(g_mxkD1F!bdZwD!9$w4zrt)D_WRcYey6v%-)sm31aTS(ddsVHtmsWgxWKijW*Js
zQ36_s@})btE+Oj04e@C@n;GZhtF&wmK>_e-;t35VlQ>QL5P{z|i@1GQj4+dQI?=4s
zSBP58=S|!|FhU}p1o2vQXY9NM^?ieo2Lfst_ncQ6yjo9gUI&bJ`+SP<6Boj5#wGD_
zMQ8-qt3GPXi|TeD(KK^S<uR7+2alUX%-WNtWiRndJ$N`d#H-IBt-v{hVZ))66F?%E
z)`)zdmUb`nj>hTUcsO`rn$HBXO!d+FL8X8)=g!wr)>r55f&}x`VEuW}08lY3Q!^8;
zdMtyf)!ndW5W>RQmeSOR!<E@4!Q0PoseDon+}X6Wdw-Th$VAw6C+%@2)6!S&b1oI}
zu2If~?2xZ~PEppc#hbel5nAMHgDdli0S8~1#4P<_ah0~;h{P`vxd{cDZpZgtr<Ouu
zcaV{EFoF@~jb0E)dc}|*%_D1__U6L^H%c5Rd)G?-<x)B1!FIR!Hr?2`UjA6FQ%iCC
zMx@)}dq%u+Ra>6E-=KUW)TtC|uh6F3V2aJL;u`+jEj&P}5lL;Kv<9CMxA_*r-`LGa
zNZyH5+F}w0{j0!V_?f-r0#ycvF7LuZw^C3O4)`_Wo}9oC)Id;Jl?0<PrjpZMW-nj4
zoHk8lPS5yglDCNXb8I-%>LrgE3muz@(8-}`qtCaE)O!RN?2+)y-q5RBXJ+JuV@Ly|
z_|Va)oK`EAafGPjzrWYC>~g0`myK#YJbuP!#P8BU>`>MfS~;YMIGF%lXeJj5?thW6
zj%(a{k<~Ma$vzcwm&@taw91T&y1{qJ`S{biTEMAEy~MGMFxx!-jrPON(nxw$YQ^Qd
zPI5=uv4f6+285~!%<}Fe1j+`p`p;Tq9fdDC*_XKg>mfi{epRK}2n1CyRRR)LxzG?~
zE&o9{p1Y<YTAR4P0HSD&5uP-6g5-e0@SH^&gjx+quC>rLB}uHFGI{=jk0ms8Mrpl|
zUW{IGm~jU5M*x-ti)$V1DU`20mQ}V)oaCQkvx7k(fN^1j5?xt%YFcWshRu;wlv1ln
z9O6GEiW&JMxTZ2XqR``jmVO1XE7G!lL@pVmthNJnniYg%04fyNBu;5{tc~tk!G`m}
z*VpIHnYq|8xm+55c^-Wa{Y-T-1sQ6q2#@XwA1C2+o0X9WLz*B%Z!bIy?=^N6EY=HF
z&8|;e-M~jg)0qNdEb&+5X?5rGCCR0!*s|0DB>d_gs8u|+uH9ssyQ=E&29Es_HOm70
zAwFicl6FlG5u-zm`oYY)<8KWAmj+~p0X#Epkco8)_`&looOeW_iD?pxLT)5Zk9i&}
zXwlc^)!>^c#G%fXw(SZU09kS81jwrgWs3d%xr6Fu|JvnO6ms=lzRK6RVj&2LIMJ^I
zCv4>QLENV2Fl%1fw5Ag;{UeK-Nd_LCON|e3(AF#)J)xjZ-&HIxmZoE~Lw*`nT<K|D
z$L`7gn`#*`pf1)tWEwyK01EN|I>&;0P6(k!wW~c7WGb!mMlmn0S#R9fqM_mK``@RX
z1=_%+_VxTi8S5T%Gp4g1syHGn_*JRyCmXuRnMaEKp5nMhzaR*%w!*Y$P6y@Y1}a+r
z2oCg{kh9GN0ZE+L%X&k!LaZr2iDL#p3+WLb&m&P5C=r1Urp(jF<^6N5-bb-aCzlr}
zcI-^P;ZUDZ*0}!GbIzAkMW((72{y$a@Gi&A@Puh7RMRcL*>k26WwUfGEDrNe#Ro%0
z?Zv4hfV|Nf8YJTe5E;4t{|r*kU~Y2;veC7z;jS^hh9BMAS0>hTX;t43TF&EK5i&-#
z#n(6Kk;roPH){)v$@GvSqJm`rL<?d!E&A!&)cKgM;PZ(}q~k;{GJqsLnKa=DPzZ`f
z^h{r0jd<HxBx!l(PCVKmdhYkpQ?q^NJ+XQqog3j&nZX#+NHk%L*cAZ&Bk!#|<vPwt
zlNzi?=rmZ16^6mwnH;N~Vc!f~xZ(LInb7itc_Etfz#f_UE@{R*2vgS%op2I2&f%or
zW^$}sQPzul{)+2FtQS}Oj|O5VAR2^jumbU5<mVB!!3ZMppIl!K58S^?>{$18SzM@o
zf%faV$#JwTJ{;uIyn!=U@I#2H*NK|kVa@G%#WEf*RIrmcQ}b&t2#Wz1q;EndTcVVA
zvpyX~P!owIfxId1WbBHKm3b?kS;j?w;SN6>D0{GqozNENICXFIcuv&UR6hP?!z|dO
z3(I`hbODs;7<M<I`ssE}3{BTXvSP@;iw-=hiOE23Ma;R&*tZJq^XRLkw2)4bVHr$N
zh=Tyiy>;mK$z0_YWO#h-B}HL5;|S<y$fZ>(47&Kra3G8N^!w#_U3Glw<#+qDhxc{O
zni%MUU47XLz@(;v)M|9nB)g>z;uj}#Q6+msWO?LB7Bx2He=Ld4k3cO_h$@bYyNl08
zxZaRffMh850x>S>8G)UOANsqpiRG|BFtChim4fLBCbQ~rU_0RsJ`(p1<DYwWHoiMU
zsv5Jf^0oZl*^v(ob250TPL$?lxLPG$wRre2Ctwq=gj>$%9g}|p%qkN7DV{iT16K0*
zoZ?V9oxjz6NV}1C2Jw`W;^2iH-5Sy@pC}ODDo|z04aw}ky;6ka+taDcqf(?IX}=ca
zLVcml27aYlz^9QtK_UHt-8$OBbV|HuyLr5zM(dR0)g7vJ$MGgdzidPNm0i81w%l2B
zk?KX>TV#&g4=yTi0UKF{>%K&c7=rZY=LR%%t~|~^uY#pQbL2=Xz%bJm&^=MEj}VGA
zyR?W2isXd0BQ{DH0)FI92RG{)bsI~%Eg$7%MkPv;U7H-h^Icn&YJ5RlCO4OZ2Gcfv
z5G#2DV^pyODUn$nK$|1@V(YU$u#;~*;Pl-dnTY&nc=KCC#0^WO9?Y9oX1gog2ivF;
z%u~_~4WEpvSi^q@dfdYne9&k({A!5Iq4}Q#qeW3!64+fxHdPpc16}rb;wH$}D82|=
zW9k$dNdPNI-(lA%%;9_~T@f|-V38@&IP&rJu&(f}F>}e9;!)Hq_+@_AniKK8_ma$J
zCiLQGq{q>kgT5l=J<T#IyeOB?oK!Cx_RM{;^-}Un+e82%3_6;8(d=SI9m*McshW)8
zo1hP@ra-$Gb670=OU<s9h(iRAti5)hMbsVd&(hPt&n%mtHLo*EHdz}1F)|}W=JJbx
z9-tvkW^HfcH)qSrY>Hoe7l6nLP^vkDmH=`B%~&10SWlzfuOQm^MbY;<pEvsC!aQP@
z>}l)N&0*Ag{3~bCn(rX?*u$P82PL_FRXU%6*;%)Smr&s91?Twy25D#mM>n7*M(6+a
z76LNr={5&Rvy?q7AxRWx1cT+_j%GFmo9_?OyVrIUsc^<s;tAR{kUF`yd`?E7Vbf<7
zVa_e2w=h-t&q3KN?0@5(hY9%wUh>LM24jER$L11pN3#R%x?5|BaS}a<CyIgNOR(w+
z$z=dA(U;6Z&|Qe8zuQ@aYsa4eU${53<ebU=1EW`1yZgWhL}){5U5Fv+9t&2mbLLl(
z4w7A8ht!tQHcD;aZ>%}8F9^+Y;u*kdlju?$j8=XC?gV%h7hFVY;F3r1En<?EEHC;}
zpidKq5tJw!UT@^^alA0y5UAxtmvBJNl|@yCIQo!;DkX0R-<X^&r9>>{n=KIc;l)Z=
zsGrrzi+|cUj1u2=8wTFqj0Z>!8YeG#!y;w)f}1+_B1FTfAI3WC#z%iXC~t>>3D$%L
zSXVOc6Qhd}Dy(I6L{3&kjd5y67HCUl`=|ym08-k|Nr)loXP7Iyhw(sb9i>Q0>@K)m
z^)ZT|g+pr6)M^fxXQKCgm5hfopspUC#af=oZioc9iP~GQ&#_1{x*_jWy=L2%yh38R
zZ$z)2PmW|#@^ntiH+JPk^Z<lMd7%I3Rm1EQLo|s3pqnWB<@n(eFxEF!Mi>!+X~ZqS
zx=4KqPQ=r38%E~N%xD<?zcd{4FGs$8yT|uW$+VRw;etjJ^hHzob<7#n^|TA9g@Ck9
z%Y?}7jdkc%iG<z-u<+_haJcl!by^UgX1Yi1c+qf)yz_%*K%icxfi5P}uvT$m^q44A
z?wNik`?P$r0e5F|Ah6^xTc+J00I`<<*}@gLlG=k4x&sD(xoP)X3JX=HN#|qWz+M>5
zj1y=HlI&J^V4Y&&{u6UntzUc;zwv(iuNqYxw8{jaj*d<RPO4k&razitSN|>6(gObl
zs!lU^?@2k#6J(#Rq@i)0hSgUi@cu1~gZ;h3mPp&0DQ%)n?*b4z;0{$UQnOMM>Wf=4
za>{p>8kmOyk;sK`<Sz}VjrJ|XX*}+D!thP8wQ7wB>X8Vw#56PZV0*Dx@p@3F-j`0G
z&C8+K+DM18!`A;y2KsIWOV&wkt_R|023Un9O(B}*4zz%an$rR<@&36**Mx^=jX1G|
zf1<Hn*S`-y<_FHI4dzL%QOq8ruDqB<aRDI5t#nEeo<$A0I~NXay1qWp&@_RCuO-=!
z2|xe<9FQvbLo`QE3Ir{A<SAx-;2ayqT|&2@&YyPk`0lOY3ct^JA^Cm|!oolxob<~n
zGr7rdP^*A3pybkyzQUKwO_BoTagFJYr-&xP;K)&s8VgL(APE=pwxno#n~e{g$be)W
z*3r<xi14ruFkja%IfZ!2JlsJrG_So6wvACzz6F?fkWyw945Wd=QY8)3Bof1q3V`d5
z-mm#<BP#};VgkWB#=hY2D1K5b8{!alR%+d8h*k2&qtDGb(G}TE1JILyu8GOa;6|VK
z5WO=V$2=Y`U_=@t2fu!NG@wKZ#8qOh<!HD_Sxv^`)M)s=C=}8AP2qNnkdVr`H}t1;
zq~&0&$~SvEjg#zfWz!*R0?Ol-X0rZb2x*PTxdF5QBCC<?NHdhqIU`qX&~nc0ond!j
zGx<_i%h{k-r;^<R5@u%N6nIYbLvQ6O%Mtn2g08ZYrQ~lW?d{zU@T$=cuj%MFg6CO-
z(GjPw%19>ySanC4qlkeBNs|?yC9EKZC=_jo`Lo*e$A8;;c`<fQ9w_L6!)Du0n<U${
zoEXVasSx3kf3Z0vBO~t31GQw1V!~|3(^uU=^i`?UCA=Jjpi=7i><o;rY9^cj00005
zOl47*-Twnm__J-l<-WCjR>|pKO>&=$F+4jyKlA^GZx$)O;9npEeU>2ef2x?vMEr%B
zpgYt$)sD!Q7}f`pv;%eh7XB2OyjnVNYmc&>y2tI=f4i4D_xFR)AQSmK^`Lt9K>H~>
zlw!a=woA*MfoFU%fqfJg62$d6P+@w`biz-bW~nwSKhV}yni{e1zv0hpCQh3>Jm_RD
zFbc?|8;ibA4E}n<EFVVa3O+HQkhEi%mWG*Y&_X8Bx51E?R+`o*hCnGH!rLW5OF4>R
z2VJ1kz>W$!rWaDEQ3erCQzKfTeB9CZ#dIIx66S#ozvy!TVAFRK|3AVYvG(?i`ule<
z@%8ee;pd7mQLQ&I^%+udYbPR$^vnkRHfyWrW*03?DCs@t59Zi25e?yk1+r(V#@yz%
z>-@Bs4_3d{T%nTKQrcz7j;wOX_8ZjCCKNpudD2Mi(9_lQjG?t^X|f@}FrGNfJz|W0
zA#db1UHW7R*DEvZA*OxOJQjNFnZ!vCgTnA^{#~_$BHFNXMDJAIMf^Kv%4c+)Vl#ok
zqAl*xxQq0gak1EVuQ2VCd;vF=LMNALB(cCONTD!=xI`GVa=KrR+Uu*@f}>QC*~2Pc
zU4zoGSGx#B#Xaa{36S(eM~mJBzE^qHl!mG6TWh<Q=D;dF&ZhWn!BTxD_>O1#4p|kP
zzWYVuN^Xz-$-H-5>%+I=oX>)z+t;ec!6x+P!PpKrlP%$e7K(34#{)Q?<wQV9o!e$k
zrv!YZcLe*{PnYMY&F>Y2J|0C1=`t+vvpOJh9qjD|LxvD%>Z;EIRB>^|3Yc6#GTM2$
zC_4s=F2=%WCd3Z?Ie$5Kx+aW~>_F`aY(o$!3oMPlhuV`N!Ywsk%d-z26Tz0-)|w5%
z2n>9L@V_RFkG8ja(rAJ4c2jC94kHjP;<Sn6E~-})bd@lk?8<wHx4k|xiBDs%3zoj<
z5W`Sz(7;wwRCGdDGY*}o$Se_Q_v_83n_P+5$T3dC$?}nQJs(-aNAb-P{Z!VrP9GEY
zGj)cG+x0}7LaT4_g#>eoJZ;b5x;sUxRCZ+FIUMRd@qRJ{!8nq)HX>AMU3`?Mu;F6%
zye8lDSYKv6^MwQ|A1^#YnXv^1ML{WyT!yd5a7s#UVQG>5>gatqOS{DUaCf>ZuDyt+
z-@MOva3Qo)t4PgD6bD6TN&Hrj_^)pBX^`-~upb(FZsJwz9H2K6UEu@ogG4`O`9RyF
zL#zo?w+(^|GFU|HTA{+C6_kF@l%L$Ua!q^U@>MtYSSD9w(;5yRyed}luN&U6JP=!N
z>b5^Jg0XN7iW>}W!KQy~IS)659Q9XJ0-<hgdhQq^IBN>YM}n%58xN+NAstr*lgQZL
zl8j<By+^~ojIMOQp&aT8DF^!ab<SZA4674J{EnPISc+)Z$!=O3{bdO>av5=#yCKF6
zCd0EPd$7t1zAM|N@SyYJ^Wr$Ne3~jLdz1Z=Vrm5Ah#|3~1PIH9DYxx6ZI3;~{H3|+
z&S}4|rwXHjT*PqJc#3~_rmTMo_x0MI6(D}V1D$Wkw)Xst)!Hix_^i{3h(Jiz(j7_O
zm1o%4exQ)w(I-Y%4v)fJ=hMc{bJJ6ic?l96zEZ7$%ey6!($^sSmu%Jtg@~|g`P4j~
zlbllaAJ#C>$YR@5m_3|3C@q^mO>3wBGw&w4MjAuTFu$=<tp)a@TDQ2bvTxSEYAipi
zop@LL(dLfL?t3la>x8zWH#AAq60cSSNrE^eZSXnba!BmWz?`0}zZ?D%V_D!f#!OGS
zg=)1NZJ^g*>mLwXIQB?GdN^#F^Gdz0Q2Q@F?j01YS|wH*XsrXXsg?K^yAa;4T?swu
z*#$GfXrvIgFc26EffXRxfzbWUR;g;(_RcF9wk!)+4b$_PTAb6+Li7fR^Wq99OY&zO
zY9p^iJD41=dR7gS2_9QwB{8Xel!7|&A$a^_Z4o$c24z)ck;WxgcQ#(KN-JFC(zh+5
z;W_9Wp8!!%A-DKFAY5`L-i2ydkp0Z<4=I6gVFTOr<Wl6&E4-&6`wFbhMT>#mEhUai
z-Ov35#MqBKN)@o!sXAoNz5$Y0dkoKOl(i9m3R7f11?*3s6wIuZVD~plA)LGRjFNMa
z6kNYyRm9Qj#LF$#@1BoD14sao5;K<25c^l?gPx}mO}8*WNNyca=`6v~wMSHZGGe>b
z+xw$oJhz!@RJ8;&GdB3p8352v(L3qaz3uJB3fVnF&Ea!EhN_&YRElhoWdrEoad-{n
z$Q`tee6(Uj)*u~$J%7u!AI^SlkT&C)6TQ?=$N6w<M-r_A!^0>QFqA0Hm*KpQu%|Li
z?6ePfg~H5~^_72&&$YWz^bnkv<-pT%AMIgRY^#^~hNq*L7XDCWrIv{}ODPgZ=Ibkt
zOgdyv1p6?uit0WI8H#1K`v5%mI;j1K9aFN+`_XR!0h`x2va$!Q2%G-xGFVs>q)4YV
z4PZ-WMv6^i%PSXE9(F?0SZSn~1!;@37=HCvs&6VrJ-EtML<CI7`}|9Yo#oo!nB~2e
z^fTPO2%bNDc|^I|v)~8Q{!|MBRku0cMjpqox*STpdv-1VNoQ^ZBl3I-sNudJ1~(BV
zjId?FDjQ#{e;7-&yG+<OoUi&%?f@?>jdo{7u$XhbVO!?Wl)^Hg8;Xx9k66bS={7$i
z@l#Qk?5+vZOgqjwR<c?oD#(|PCRXP&)Pbo!Po`98ZH#ZR3lciCGU2Qa9RC$Dvm5ca
zOqZ6D8hbwhh~VaykKS;=gv-445FTeNu7ch=lgE+0jxs00Qu3qi<FU?D<!k$_XYXp2
z+MzidOZ<jWrMa0q#8;1!N`}ndIUROu>b2_rham{q3o4XO=*_Q?bg0@8`c`k6`#n`h
zq%^0p3U^WsD2G@Nf~hov`evDgYdxs!5#H&>K`RhDfd5M=C&UO-UJK25u;f?p1&Vu2
zqa#CFzo)+%);LCHvq3}SAwU2C006LB-(&3ysRqVku>POz@j0x6HluJIXGrDSj@Q1P
z@5Cs-BI4-gs`eS+fbLOUP6=1jhZ#KRe&I^A{6?Ql!m;+JO0%kNZ^REU;vyDIsB`((
zQk&i6iV{grXzZM;<knj5R7b`!R_eZqni<i;^)R%*qvRxNpw>>kwfMd0|ExMgxJN#V
zx=iaD_zv2r&q}~qTaMj#!O^w7Mvy+(7*qzn;71_lS=hkHNG;J$WM_Gw4^#_v!C~1i
z69%0;H7vYj!nWk$$)WqQE0{uYOo;jUZ&9P~@+El(jN-jsnv&~z-L&b;nMi^^JhJ9(
znV9`DwzHA>#%v~okhtZQzt6GHC2rh=Nn+(%DYMZoau)C(d{do}b43Wvn@bzs2G&&8
z1!li>S}tR6+<F`ucnRJV$Xz6OC_WSvGN7$sx=`BANx7~GvI;01sEfc?c3yIWfk(zq
z9Uh3>J_`ek;HsxEZxU46Er3(wkvtfbfONHvcuod=Y>u8_KDBu>c_<Eb?tRI;h5_i3
zkqw@cVVdub&y*c`(X4mckutSc!a9l<HrKkX|7ZwRnRbC|deps`?e~_+5sqBL*|k<m
zOAykWgF_z|%J=-<Dn_Xk2?#0(p^48oos4vRM6E2*J$Im>O`SFT=%kF)sQrJ#>t8N%
z!=HJx!MwXaayJLD!J09(Z|yIeb;rL?ydkmZ4M+GZ000000015Tb4)<`R2`GO2~-!g
z=uyzpZ?sQz)IsUvlQGI1_w+{<871Hr$;dcs!f5TLV-zvT5TI7X;2)P0MhCGJIsIfK
z-9)~zK^^ov*lN5qejQIt<6Zkf$%r^FMUgLL%u_Bpk@2w-4V!9h6?wd4NE*%-$SaH>
z&}k7*u}~U^T=}%ji5bzW+0G2|v+Y1E_WdUaF%OQqk-6AuZ?kDpOZ!lgKwkHwU=<Zm
z>$AsR93rCled9N|tD*3&K4kxvSSE-$cet>^k*;4^Jq;=7H;Ncfu>$>NJbNLLix;Ih
z=ee0n#>};Lg_JM^=3^JCy%q@EsuK1AN$q&Lnfu~4<u3>9XUhNTy!Y2wcVK0P|A@AI
zBY%opOoA*;>W9N=9D-U7!=yA<`%jWm(bP&+qsfY)_S}+_UUfC3dfLjiIby{yq`mH>
zgGTf!XgMg$zY!D%XJ%?J$Q!Iv2WKe!a8)~a*qutVK?|<3Ln%3&)o8&*Bu7T?6$Y<M
zzt>_$^$-PimRW(yU`;^~3#f=Y$n{cl*!aK7sF_O4`|>`EuZeO)A;f}>{zX5v5_M5n
zu>~n~i0^n36bo*${h<U!Q5EVO;DLdms!>7h;}Y9vSy2>@taVwxtPa0L{BNNKj0G8l
zE3QnyB&qF4!pBER^*-*NL~`cqyV@aB5#kU)c#hK6VZQU%0DQ$zMc@Z;QifSG>&3#Q
zG`sg>JgZy@p2q*iZ(e;Rlv~}CQU$r>?oZ6Jpz@aZ*u<}hfD%ge4D{ruAbD2ctBT?x
zw#1X#lAUly^pJ|0%Yt8?0(>h|q@7bMLXg%HC)CsALM5jqE6plGPC>L6g*43ja|)t6
zj`e0w)&-!7WSj0#XJqO?vbc2vTk)=H9<y624&^^bKH+!S8_x7q^?p6bE!%k2Wn0jp
z7d^A-%#KXFdiKb+tavg{v#Ob}C@=SboVi%$^-6wO_IdN$PF$FUgxkNEX3#@UYXsv$
z3z)X#{9*_Sk?A0N@2O^gVWv|#RuI9*Uv`r}8NF&FJ?0{XZKXa0(>9O!<HVgV<n#b6
z`168497emkS0CxO)CrwTM#>C;?ekl``I>~BR?KK9@yq`)Bd*wgI5r5`#6k(7Uoe{c
zUuXo|qO_a>xWcm&AAR1)!nNB8{2`C&N;F4KjVO4sSc)K<o!kI%|9dJq2o9Jg{&NYB
zKtUZ5x%^SjuZ@TP*ALd-5(V5Z6;YSlp|cyLwY&x(3I#ASm2v7pzE}Qzfkmy#dm*Lk
zbTTRyccH*D#}=HMK|jB*M~A=t*<Y_(r(5*3k9m*p!O;zbj{>DjZ#OxTJnLLGC-?>_
zm5Rmt<^f0HVuQC>e-?cNV}A>;+dZ0s(GK>fI@OQam)~EsssI<gKsY7E2N`jaxYh$|
zvW&yX#MSAvrmlvGUQTO6(vK@RLSXcvami$KbtUf9^ER<sT&M=9KvpiRV|8N25V_&d
znnPj_qBLwcXuKb%%>1OUaHKqw?^0!0ovqsgOAs06YEb?o8+4!A%j~F3gC{aA+hn49
z-69DQV1|Ei!XyRaG-&uwe-F`#cyD!bN3LDg<J;VAeoDp3ge=x@n9X?3$%NYK@jFn3
z-v~B&@fo}r78aC8`68#ZMVkQwz>z|a7EXrt%W(Kp(vyx4mS!$oPFmgY&cihP)*Gtv
z@wLI@)hUtZgk<EfO6tO0r_J*|5PJv;5JC0~<mm8?q;ZiHkbGb1Xx9HaYZnb$mFajc
zg$jRBC^No#EJz#z_pD8DBHV=&?<^6eMR~cz#wTXsi2jQv8jBUt+e2cwW*)7M>raG6
z;~~wMn>(RsmF2}5Ei2OwVbr0AD;qIN0?uiVtj>&1q-3NRWW|$6?7(@iG!)5+_!*D`
zZXlD}VL4$YiASL@vH#|TRe%A9>0v;dGi^$RirSb7|Jd9dcn~J?5)J%z_`nyZQ?r&G
zW_-bkyot{zR=2G$`pI8=qpZM?eUsL$4{j$~E++`cfU|r3u*?^^Wcg`E22UeH`!bQ*
zX!Aydntq5UHuwwwZ?x{M7^0&`tM_X!o<>BC6fMg>G|MK!*N?F#6yJ`#S!~YpnK#0d
z*OU3ttU?Q4)WdJ&d`{1PB;ykq?~HAu$?cw<b$dZ8IX#-eF(BOM?3ciL_;4fB)RB_}
z2<SWtXxHph3eT^2@&sy@K)V3QQ;hUuQQs}T9CF)q&(Dx(le^JkAF~N;{m*!nfOie<
zX(Akab-Tk#?!aH7)S1a<nbnA2f_#cBrvJl%k~eoHK7@IPKCVg8D2<(~@(i;$-%g%?
znsVYdFK#M`0V!ZpeMJkk16%Tb3;dy5%{qJI)kW@Y&{+a`*TjmEOVwLja#UT#j?ofP
zGP=Ph5pI%qa|$0jdt2gJ;YUG=XERMmd6l92qqBrRWQnUS)%i(O4Wf5&M<eZUX>c6X
zdW1FLW(dAx8tp|QyCd~^-YkxSfE;YkbS<*tT`3o1G>jgPY$%#5IV%vn+Tj>ywauI8
zKLTDN2Zggi|IE|(3d)MbYVeePx$qXptfe8ea9n^w(fqJi4qbjKqs~!nrg!meYchV4
zL|wj}>0%nb!&C76C6yz-7zXYtc7jD+@ygcQL^j0vfdtYG?(xX!Oz0rzJ%Zxv&_7!E
zJeTcPa<bY6G)f$ClpFL#`d1V5no2qeqy3i%u#yRAbHrw{=Sl0=;-4hQs#q!Uf$)n%
z7&Z7OA#Q%UVmu2#+UH0w4ANY|%2}a(++bzXu!(X<NKV<i3C!rK;I&z*bBmuqk^1Z9
z-53bhF5kZdY`^GymfB{aWxc~j3=^6g)tE|xIB-;);^`Qa15J|`g!d*>-&p6X&Sb3B
z@J^oJOaGbJMC@~Y2R|iRLk)pz-T(jq00Up^-8u<(rHwc}f_iA)%K6M~BsxwYfpLU|
zhcCsQF;dHkBj-yj-zT_0tqq&9zMlKF4MH;;oH}hy@|7Kaq8}3XRZCAU#pe&WUn5H-
zdiP2TAuV{wj2Kumz%#bejY}0b^a)}xS$_aoFZ|W2G`!NxBO&S-e<TInYjr|G*iWAB
z9t1Xt<oFYXQYsPN)NDBGVx*^NmqK#Yaz~SyF~s14rWLX34{ThL!$wYg$t7*}dVp@7
zf$i;o9IKf+J7RixRs=eN)Zqjf2J&=N$8Al+bnsV3C{DhyJ73Rvn?AcKeXKod%Ln37
zimCxMMLY53YXv|)odd(Mf*C5q=b}vL=JdT>=;up(tk178mo`2<eaX|>-Zq+PRo02^
z6(iZqTS-u)+Z^KH97?{UcvpPEd7_^@9nU6W1ts8ykFLONI2c(<{44RNO&gyxT)){h
z3)%dpCpy1ZKp(CsJD}pOmJZ$Ruhd-0^vFW1>HZ|~f{od_Nr$n(y`?)K9pcSI$*{L9
z45OPCiI>16uhc~;l6-k%1{`AQ=ATcVl?^xUB*r~j7eOR=k|>JY5OvPtD>0cB0Y|{M
z_P)%}@oad}z`U_WS~J_lv5h<ol?zk+@{iXi9Z5Ro1QP~e2`&?1jiy;$`|(cPMW0og
zdHa0wI8H3>y!&YEqtjTUGPe+P^QHq)46e5SMv{O400006Vf}T{?C2YJY?HR;0Mrs~
z*qyDCyyL=(l6W~`?JsJ1Ep+pagWTQmF>OO>becjW(7|-XZ+MTRo+MY{f(THqE=7a1
z4@c3@3!}RvHdC3I4&bK}zTOv_DgIbIrkN{Xl}F7IkXj5;vqM{3fpq}*`Ze?>r1;{)
ztFCUJ#ls~))JXP)r+S3w3p?Q$WIGDb=a{oXZ$ThCUTNqx4f7Pu-JsMZ(m|a?spD^~
zv!Cp1wHZVuwmui}N>I6iFPQjgLe$CHfj0kW6#D%FWGYi(2fi!GvE`a9nEu5v$G=@t
zJ)<MA4JS(LTLAuOU$oP`Mb;zDo0GAp$@R3#X2stZyi+iK)T`Hn%x*r(7+5`dy|5qx
zYsOJ-@9MiZp1X92>}E7(ttOgy7rqG~TRV5R!}kWL%Ih=5;*h1ZL)*~*K~Yy3L|v=?
z@iAOG&7WqzU49oS5+9VID+po8c0U<KNNqXFgqcJ*v_kA0;3i5qo2)$X4yls!&kZo2
zp|zV=mfd@34RM~!8UB_I|0=Bv?8TNG<Tzk$G@+gL=La8e$rIDVggW(?vskR)Q~6nr
zCwU~hQC4|{X~^#<pFUPj&7qyw=wpPq1LWN~UWQUbN;XbKat|hFQ!to_tBBsZLM9{q
zCsDP@Ht~Rg919yqdvYR;+7eO8+xEf5i}FjdUEs_(xdEFKYSb_<&+7@teh*7hi95wH
zT(RP4n%Eml&ugap`oy!L-lSy<U@uvFWt~#&Ah)3LV&c730QD5wClTAsZS^Ny<}l+@
z82w*O=!a?boI%|N1t|a*dNt~<{~DNI@C;V22y%;Zu3mW^yD_zAN*%{9S-bz{Wd_>2
zdy<>Gb@guCSS@~HLyxa^G?3l=Og0X?Tvet#N#8A{iYuIFaO&C#f+;1<;q~I;(z2>e
z9!P-@hN}T`S2zA}IT~W|RBkd$LH6V-x$8(C{gjLclNuoTCPxA+$U!EFYTSfzU}*`+
zsO;bD9Yu5(#1e9$_h@{xtZLWE6^ne<pWb8NFSr;Y(z5alC^4Ty8!FfFvr+=1aqv!=
z-NTzTVu!;xX^yLw2)X8L_Ee`Wl<1ma_SgFO3*@o~7KcS=1$s0o64wEzV!F7x9Fqwn
z)jP&kdxXOQ#`AhMF4OEm&|X(81+Vk^PA^_)rS+&Zm6auwa8@HI%FIDCX7*q22W9cy
zBC}ZX8^ZKl4yFAscjB&!B!Of@k8H9K$)if}H2s(dIJ6EK6v2WW2}46<4=*FKXes_5
z+rE1dy4PHSQw0j?npV;Y^0C<yF2^L-ed|hW)Oon%VB=I&z1QNv9$>_FffoFWZN+%P
znok<Z#A(6QtkpJNR3{)9ARI<=6$xIaboiCV-Dtg(U}H-77mv7?JpCB1W7^cQmb&<c
zoxMCzta$f)(f+FCwLBdNQl}HW!^ruu@eyChWP!Aytt~!ES;SK**KU}hu{T=uhB)EQ
z2C0`aq?3&9tFH5M$+&VRT7*AXw>c_p+<azk1u~T)g8BCfEH;2D6E9BjZb-TPH{u+n
zSxG$?cZOU;p@m$QTWnm`7c}sq2$z0r*~)ZuI9qCM5V^_@)pq0Of0mdcJj2}~(<I~<
zIJ@D@mY)k@DB_F&i`9<b{WrF0M-78hD+4UTlMHTGLqqOuWHe^Eoe|iw*xO;>S{N<*
zOz_$#^USU+5qn)7a3I9Pu)Wyfe+Hsg=P~iq%rbmP8e7s$WN6xv>W5&gDUZYBB5I$5
zGE<l1sR-^Q<`*^;{*I%}J()3Z;%1yS!41~Qi<O7$!kKGZ68_1x%3ExXkwNv9dfDy4
z)8i_Y5FQj69P}~fi>oWjYt2=&Klh{tZ#wSmPKlIFCbdpWU?n2u3g8kijLP9u=|r>K
zq{NXVWR!^>>MfUy{$4jVzId}AY`W^bwJ-wc?HmQJpl>f`BMTD6Fo8+K$R5xkLDErG
zehVm^cr%)=gDt}M6p6#g`jNaM91Px)w}v)#K|EH_n4Q9wRg#F+D@nVau3iM5CaCQQ
zJ*=u5Ni*8c6>LHa_M$Agrnqf8bxLLEA)8P!$&oR=>VaBv7l<+mCP8XTK?XqQyij0R
zDO8jOA+j%Blu}s@V4vP3r4hW;$k5v33K_pU8n5EEcBM&yhtCuNM9$`j81+DRoFr!q
zi4*U@tIm^bQ`K&nHV`vhgBcB%dTf&R1SLB|67f|3gQyZV8&O>22bc^D*v!0^1&%(c
zE6JqonMnll1(L+kFf8Uyuk$?bU+?SF$~xFSHLsbRC47sb<>&?p(#w72KD^tp-PB1)
z6WF1~O4B~r?a&Ji7l5z3a-L2G6#0!P24s>GbVI!jFQ?i!+s0ErhhwcOoouTy+)1+w
z1bego$n<Z`K#47-Q)4(V_n0lhV>vYr!+7PB?yj{J#N3!XDWa=wCgRi>kMvQ3rrX*Z
zXuDf}Fk;(WB30%bthMKPvzS!v#ym0=x})zKW&-xrUyFb$Q4;VI77>k&h%<Zd$`Mjj
zkrLBD56Ze`IAOPm-Qwic(SS0{U9F=2C0Sf8Q3Z@wH(ioGTOK&qzPFw>^(^cG)LD(*
z0%n^%NP7;f+iX#y{8Y!!#*F0UNlHsY^1zK8>o-A2OEfCVN^tvAi=a+UGUDKyu(C!~
zgG?cta|qoQpeG%Ly+`{EL+T_P=rDB}EnotpY11X^3p;mRhX@kyTBV(}`gJZ(C&}pl
z-s!MWWPUZ2LAeMGB}bk5U#<9Y5va`Ju)dTppOPmnX1wBkv6`;XOk!*aCGx&b9P0UC
z000002Oh)ghPLt61KE=2_Jz7PYOB5+h?Y$yFTJR|w!I$kaGvz|TF!n}_5?I+B92+>
ztn-g{YSLEY;w~tqA)bV|*!jB<bJ_N~ml9Pyb_V*Gx)L*&{R+>Jbnz_vDmP|Y(#@Fb
z1K@fY52v??amVH&)zi%!z10k;3uS61g*oh!t2KVQ9oxo)h>bCrP~%888O75q?50sj
zx<7(Css?`t>>Ab@04&Gnj=mh(3xvzG;~f3uPn>rgKRAo(^ppToKlI7f@3PO`;IHzf
z`r)~x+&dEkzMCV5n0#zY0tJlXmlufhWmxvwy`zyvZpL%3U%AQVOx~(r&NM*5&jEFA
zZ1Y|UM^OlWO57ta?Tv?Iedu}2POvmTAKgPPxB5M5h%>*1cyxt%4vh25M9(w-KAyw3
zjXW?z2Xa-c1hejeG8!U%a(bJjsxG4W5LGtv9@G8Xx`!6PI`bdC)KZ86#j-ADaElzX
z!uov}Cc)4Xe#C+9>yKglFy3G+#ra4+Xr8JVx6TkUz|=q2Ex@vhYEkl*#Wr!Qg?dDt
zQu`qA$Rdo(cabeBOj|=%`wc^B6pHKdv%B>lMg7H$mC6HTaxtJ0uJ~1tcAGhw-0xXJ
zOsq`cc~iQ#>d;nRjETOSp0iw<*#Qh_BQ^_fxC}%D58*<}X)&>a8|vs#bq)9*Lli;D
z#1jCU0SY9Hm-Q`NYFt74ckSP@n{3U1v9oVHM{MqEQwmp)kHU4UlmVCex1Y4`o9~q@
z|9|54LD|xJRTm<7Uu)cb`e52~+~SJp#CT%C&a<)8a+P4zU&V;dA#zV5Z?jyaoLLYT
z|8;Z|b-uB{000000MGJaK>Z){W%>0XdR%ibc-<*77O8lEO{JztL+xxOE0QtlgA<!$
z{s$jR??pDmQ)4xOjK>0Ti~2`z?f;~)>M;G=j~61X@=h?QvO$v}UgV|@c^apP0xy-y
z%ICdwxq`a}nuk9mGCU{1_(&G3fZOyeQ5A5O6(1S?EW>Fuz-_xVIm97<?M&v8sXg-z
zNdD^NHzIfNfbIS$EM?J%gXQ&8eQdIj4=Ccf%;E1q)3u{vw38Gy$7zEe@HM34@KoKr
zqm+%zdhruOom%_hqV#4l6?_G=<|I0YVzUa%jm?!^$_r7EW@cb#hvu!qkfNs|l)h7C
zzWs4QGkdw>y1XPCnzf-+j5~p)Cz!0_%z$K3F2Il9=lj>wo#(^K4)|#jueAx%GKo*j
zBThi=bx((&Fpf}w)vZSRcr(4HZkn2V6dVfO2o|UCo2a<fJGrDwHb&s%#wLZjlun?`
zKUckjzRzj5j@t-8%IT-nEcJ+7G7(sSka{2=lUPWTqaN)GK`QsrH+i-ZxuhX4tSrVI
zCRMh{glJhJr>Pp$&(ywz-HAWNl00yCF>K-?(Z7&@k)kl__T(Fl$X><fV&e7eG`k6P
zq+9ipYVinIPO*!bK)c;b`HqHg1#idN=H9-fBf3pETI%8f3l2D=={c^vnZ$)Bl;eg`
zkKU(wIgi5yWvE1G-{9@z`7En6X^VM~C?TS|7njUo5D#A_2-8f5-Xii=bp}vdq?5^)
zYIOBuu)qmF|Lp{SH;|Hw*)(=8j2>Z?H3m5M`_4#io^60=iaY@vP5`A@x;PDavDweN
zq9E*b8^uP^$}UtVME^gs?&uC>fgJ5_aMquy;>_y|mi(uCfEl#c@pfYv1Xahbb~(lD
zoxiO+!aqv3YL+D0b`=lyj3D(R`}V3bX=r5)SI`A7FRQ4sc~hNb=znuUy9ASFX1-KW
z4|>Q1UTz7g=F@r)1ax)*9+ITrsi5~(se9{W^i8VHJf5M9;06c;qt)sr>NZyczRI8@
z?n{aXdDw67qfpt{B}j5rx<ils^kZ_90D%_x6;QBCC#)Ac_|u^e3!UgTuO-&Q)v!Z!
zFp{!32HthEMLx^T`yy={@xEdOq4Mo88tce4GaBjIwJ@V=>1dXT6+{{02qr=)@_uGj
z=@k1M?zRj3603UjQS{2mX=giF=<zB`=VyUe(Gg_X^nJ>1q@u=yY=yu4p$GA`yOMs+
zIeY3OQ<dv45)$tO0M(Tqg%4nO0f|~TK<$cxMhC)*ttIhTj9mvuBhhBLWf9%WTYS`#
zmDNa)gGjT$USTha7#A5S84cF>{5zHIu9mC*<2&3Khg5NY1lAFTbdgAj)K9Q1$;L|L
z$^|w-FkWV?OJIPulyXI#JBZz~jf(C39xIhgUFgEo8CoMwLHQ5Ut9D(1WsuDpjmKOZ
zE`77}ZnX}d!tf>VYdY}wsjAE+vu|j{oGI@hK5VvmWJlo&-pN@G0TyyCkta+3CocJU
zKVoEFQn;CtEptJrnrgO1249sgPu}nI*#tL30Q1S^u8#d+`cy_8bF#|I#iM&Gy76_B
zgvGNFh7)?cknoJPA?VGe(71oem&$DSU91I~9Wkkh*J2aLMfED$`Gv$fSqH2I(ty!k
zDTzVLv-z;o2B%afP^_0{GCpNa@SZy=()p$AoTcb6#H297j=T1vk#3SK%*wZr8jrla
zHM`%nRZw#GA=i~Z*gppI1%yRp@|VwDODPoy1k{uW5Ml6PLp<4XEm$E$YuI3gm~bo#
z?hc<s4G`2-JS*`rgCCev2uQ2<pt*8$ZAts;$v2%mdCC&&>b^rqp^JK<dHEHlLlWU@
zb}oGLxH};ZxwhnAuizi%*e|9ZHIq#l;Xq^j`ig$F>(IfE6Wu++gKkby$GbiW5#Ue)
zmHnUk<XCFxC_;$%K?fzbTs5`1{*L9*0Yqj9pZE1}sMq=9VGvP59;}@kA|7oG7fbkx
ziS!#Ob6?vD;|BL+2pA8fq4rf&(<(=mt4|FBdD?_~`_cqlOqMlcz72=zg5q~{wvBmp
zX}_W+FV0lZOqyO6<PcsRQWCM08o+>C;pT*rnQzV|gcy>R;RSP)%w$EXKULpK>8E_6
z(~oGx#A|h|g6a5{_RdJLsdqh|1Y*4`8Y8O-W{NSaB7?1lMF7^rOn>^1-Xc<={Qut(
zWiL{G_E)&H4c7-!^(167Kj?T(XyY&~F78`Lud$I`AFy3`-=5s5Rh7BeO}Xx&5AY^H
z#^G)D!HNNTd`O<%>LLU4A}o66Y_X{|sUt2uE8~QB|LNHc3!0QD%-v3}GbZN1vk&t1
zrMjG4s22_kZ1zVr7&<A>0uZoFzaK&HpoJ&Q($?(x=kpC+)1fQgqqOy=AOySu|BQ0N
z|KOE7J7{0}Ey#!Aa66X;S!w*oG&a<;jucxWWcx>CN-1ga`5Z^Kxh@g&DOOZkitsF`
zP9GT!S%d?%j<S>u9NHgVj9vuWmv?vlty9Mu3A89Y5pDjHf1A~*O#2|}!3MKOc+9fR
zT{-`5Wf6g)XszBDffEh(HXeMl>AX+N(zbCwAYXsfO_t(BJFo>I+q+@XJjCNX(8+^v
zS;fR>?KAh00|2@hCljC%#=!xhDO_cs17(Ho(G?eH$|_!mnnyZkkRUnlYnjUgq{TDR
zm-i{o(iP495y<^+GuFnVt#ch09_O1sL@Cdr;mC{igTbPCD|hO^YSQ=W1tC@?8B>5H
zPU$!2(unRps?Prg(2WMmYv<it<H#fZA0E1|_QhwQ;)4!#8dW(`&ev20KR+rti@c@T
z9#k*!RHfXuj_N$+=Lg>;$XL}w&S3Yd7r2o^IEB3pN|&J71Gu9m8)6RbklI#><!l)f
z9r|361os1f57HAxVS?#LmV`@?wGP-DlNvWr*xY~s0000Rz>@Gzw{_L&nYT4>&%HU`
zYez!N%35u$f%WA!^5bP!avl@~)Jc{1w`3EvJSD+TEm1rX#jx_dz-p_u1~N{spY6i_
zh(-P+BFKhyVetC(sxh9H;^avolgI<xMZKhb{V9yvzQSy-%2cl!WIC>6;A_Ncd;&w`
z**G{YK|4CDlHHl9xlzxgmg*^=EVO*HgJ11s5i(F0kHg$C;GZ*qBgOyKzMV&z_70H0
ze`L8jvl-te&i7dRb`~z56a=uE{!cXr^O(emKIe}_zcm<fEu^LZt!|6Cr~Q*gbF;g$
zg*?u@zyJ?n(>_flu@aE>_9s@A%8fhq^|zYjBO6$%PtT^%8l=h7i77cFqG&iz9_THi
z(}C`x>h_$j__drh)!vf38SSW7*M5=ZVBmR4<LnuE3eDRx><rB9plFi=k7sd(HQT=F
zL4g&Sa%5yy1UKnq$==R)<{S<%&Jln@>F|JPq-<!`Wy}9v(A>Ipv>BfCxnytHa8+_W
z3Ft~cAIW#sEgJ-%3O`9D5PF6h;ENOk95vuScVlcnx@b*-=7`Z6@+`xa=vg2bXSSDD
zIj`k-pYmsvWxdGUjI(-a+i}yXS9$|-1;0Iuk8c4|(A4D+I%pAKPUI^o{&dSE(v`ub
z(42n>h2h#e^>!4ATa?gcFDJ1kpd7`!7WU-u7rILv>|z-hb2ZjYi1;=>yV6_0bK5RI
zJxJSDA$PcnJSIVl(655yU-lb$yDoW$Y11>?dnOVBlcmY^qi9Ac*n#<tu6Q2+0000I
z{=9StrQw<y-2%?n_=fFcKO*g`cazRO@gD$kK#jkVEh<@d0Jt@csk&e*1@_NZ(xkf`
zdTKh*saX~uwP-*yh=!`Bc#{P&3D{a)WZy<GB;U$`o0&3wIj-e*I&@GO<MwcN>J3CD
zHvY!{PwT2hEnawgZ9|nEV52x5_?7HLgcyuO9C<z}Af5-S*FMo8wb&g*o#kLlUz-lI
z?Ed$EaUE4)V5Lqzz}8zkgf3k-%i&sMJziM2b`X$*w#pLV^4NzoN2cpwCxCb{$ku~$
zz>}MtK~R&3zC)khAJwoiPCiJ4#9G;9(g{yfwf-#(-1E<^APRjeP|!$ym_I2U=Qo8&
z`4lh@3ls@-SoF;6Xs<1@pXe!*EYo2Q^lDu|2f`I7cgkaVo+aKTBDx}NEP>%4iRDnj
z9PQsrRyk$c_S!rj^NL|{LKyh-u&l;Wj%*28>P}uYoRmwBe0+Yx!!bXIFlzg0bs-5W
z4bcnV0J(Rs`e?MuGL`X8o$Z_g075~(U9|Ag5>~}sSUCF|0hrFpiUcj6?%I-xM}K(3
za-k|>2GC!j7uL+haHKKb&$CI!RqSy65(VujQ&o{m_5b!ETkCK9GH8EJ`=h3tD;U>a
zB4C=n7JNXA$OX2M%0jM}$3+FQ`3yEM<W&zc3JC<)MqA^-!o=swOTVX|k<?;1SuPGe
zAQpc~TKQ^~b{2;p^qs{4n?`AmZ?fdQpwb6>w=gtFuZBaWe*b6*th_qf)H8gx)jti#
zVR4UT@9@n#t_0Rz;ma1spwlA8gh}kKf8hUu2vnq0YQz*<Qj;?x7a!EGwBUA?#ZNWl
zTN#jS_Pj=50rLeltHM$f5BRQr3lRaKOH$|SeI2UZm9MSF#Q$U&yqPB8L==_sCZ9$T
zBS)O<TU33%C(p!?n79{~xwl*V*hOKG($?~?(8yRs16`pyVb$_p-fJk)SbOID5PB(V
zy<o-<V_p}l`C=N<hBB)ojkLVPc-iHi9YVfRTl5e4#vkgVhoS9B2`?(y5fr2+1#6wF
z3?eZwcU%K5$DRp{!j8;SdT0ep{I-XoW=hs{QkBP*M+-}h9duE>#z6;qgpL@#PGZQ6
zqtV+>p<YI<FEukceDnF*Es7tl!&UFkG5y|xMZ`{aEnb}ujtow)0O|JK1?hVl+E82I
znM27qZS&Wo^4AsidjaJ=YX8{`C<!lbJTVh67wNSCAk&2Z+!Hc)&zKlofe+On`~{t+
zgA&4TFx>pZd3%`jkscZjTM>s2v7B*>0Y#@h33$1+Q2{@@Fq^UL&JyA^ILQU|+`1BS
z+N!%btva^YQiyr-`3YB*eoAWH#&<!X>i!7loPUTs9-S&p2oNj1m4#YJ(dT{KA<%~_
z_#(k~g%oeA@2e4Nu+w0>;F6U)BwWQ2EdatKl`N8taV?u)*;~|_N<DE;2O$2>&o{sL
zAMW6RUKHykN$1O?8!9i`BEi1n*^6Rm&@|(DP8ipNTc@W*7jT=F;rcMR!Wi>kKCv1V
zJ;`72eNV({Cfh|q%B>C3^drcQ?m}1Esn#rBjlG<%qcVmck7XoINU^5Y`L}gvq{~<;
zPhW7)`W|_(pnO15!UqJ?$4wf2pG%jnzwPnS(m98DbbO>NV@gh(SWSB|0xZ!nGWnKr
zim!Tf&4RD~b!ZS^s3Cd`bpR$}OGn}PS$(3IFa1B+)PAC@I~(081)v)#qF_Ek(GTJ$
zy10CAiwe0LF~*ZH{*XE<N>pNwF^%CHAxrBp2R(aGQY?mPF@?4Y<GqP<C|i=zqJ_fl
zf7Irw1(G7vM<+9#&xnF3<|6bGZC;BP)?XJ?s{J;kNfiJrAjQJ6<I3LnKA#5>T7<jD
zwa~4UtLQ9Q-J%;+9(Z4KV|2&B%_c3#47$b9kPbWIow8MH2#bfOsk8%$_{5+C*u3Op
z0@)g)QBf38CIit|?e#J}*@5Hn4^(~=WKr!eG~oa>QhL0z<B8ZiUgPPtsK%@Z_NZcQ
zNM}Az@8mSdgQRw3F)QxSBNI{36<s)2F~Y7|leuaK7kN;tHi8!{#5WDJ1CQ|`1Zlt?
z@U*v0gB{K8X!e{j)+ac}a``%X@?L8M6|#D$zFJ#l`G6x8CD7#5K%Aac+n&(#g1h7$
z_}rE%!^-n(REo43D#Wcfy2Yr^<Q9{})CbNeU3q_f23nQtHT$ay5|pmWy?+@vqm>i!
z`nYodGS52o4{tEDS1=>G>XZ%lj-7}#Yo`0zi(hL=|A_-KMWTU|4~Xsz4Zom?IG86)
zb?)KFr&v2hZN&OIYe4o{gy}EM!NkGw`Bw~-(DSae#95`ao{96ktOgR-227oab8)14
zQ09cYdn!IlExp(u()cr@zw7bJiG>xjA4uWefYe#Rj=*OBqdE&>_8_wd5@Qnvmbj*K
z+d}#5g8-l*S0>)<ql0MlKa}KW*xtI1C$rQV5bZ&hW!b}X`eQFW45<fnzFXZlp(KC>
zc-+=dXKN5h<~dMeKDJJ;c&!{VeO=Jqo~Hh=4}6rBh2_!uURE7?n{_9M=j&Gljq@6R
zf?6k0Eqb^l$5H7>>IRjh$EjSe19pSu&LjwHiz}=aa+<8Gg$77%G=xA>sk!9}xm>>-
z5^}IB2DBD6W<W{IJRHq#VKK#|jvQ>x%-yzrmDR|-G_i<bQPH@I5l**Ph|QrA3z6bg
zgdm?#vYppLVjZD*reaCj5b5-6(Q!Ek%QYNgi&iUod4qr(BVDwlG!UGUNlFt$1kwi6
zDJUE0nCUPO;2h<5Fc1I$0000tYd({?Ud(9Y)uI~1=qcDF))dk*3L`uFPrRwCS8JY$
zaj_F$T3%;>ZV8*N6`170h$s<8W|jLDvJoI$`o2*N8}AKgU;nWeB1-F9B4L1?i!EMS
zgF1eF9pUC<WV@{9D28cM5LkfKP3p+Es*#me<oFLvKC%}QGwdO+|9?AB%QXksQ*Ewn
zU9SGJ<xv@O*I7MfGSuaH(UfMlALq0!{sZGV^o2pbm{l{O7(dsDW3S<%=Z-QZm&8zT
z#^O5Md1~;1D=<B{%5=OE;dd=V%c2m6mDAlLP8)Ai{oY&$ONt<TUA|8I>CidXzqO=6
z^|xXD*}$W|+X6=OlaW1=7Tz$OMRG%zwXSZvd>BT6vyGL17gC)X?FrLmdxa^2b&^Ye
zF}XOi9=8vg5d*#v(lfz6(OWsc*M-63!}$?71NvyJ#=*>4&Y*&X;&0rO?x&Ot%l(#R
zcYjR7-zqe|_N{g`xdE5nyWv(wpN@Kkywb@T(|~c0EleRX%bKGEj>Zta{ZJ>*r^}MD
zbr7HnFq;iaE-HF-n+7~&*KP#i$1PskqgI+Q8wD7K0WK(!|DmZ@pDQlEwZDFFJj*J3
zL{4N=NLaT5cld0`GRL&2tCD~0j|_?sAAVuoZ2@T~={Qz3T)REkjy0pV4HL_{k6}0L
zD;ea5Xspydl>%g*rx7FKuCB>Bl`U@}6XxM>OZ0^eVp@=tj8}D>=;jnndn7@XLL!_!
z!b#Y?RJTt?{{<F~b(hv$+MM-}1QCw(NPJRTdXw$&6@_iYboGEE00003(dVv13*|{I
zF_cySFX<($hWnJ%k%`CEYFLUN;`a8ZK-@C!4?Wv{n^20OJ0*EbE`=-dA4~`_xI#Xe
z#&N}PiV#0u65>Y<h403nD#<U#82%KdY!1g8xEih-g3~kzJrX{GDXvAKO96+j2o7c*
zJ4$>RCA*?6HdhYPskaH;6zZZo)e>#tr2cMZ6Dc9Gd<!e2vxfaer=p#}qYT8RI;AcK
z9MO&5>iE)>GsrqCAVx^C3y31kx=+rbc0C=kC@-JSH@i9f6T@UXlBz}veA&&H(#9oS
zKL*+hSClzGo{WF_DaZm{ispwJaD=v~<=0`;t!Ss;*4dURAiUjvki$y1%O2%Z5584T
z*hD%ZT^!RQ<rLG(C~~MI!&_*v0+2jOOsiJ`lUVkRSBZRX2$4I=BuQgCw_8WVpCKVm
zpZJyWt(#dcGP@tla<DA)*D3-IwuJZ*+e@HwTa}sRC%B;~Ir*{sOblSX7$*z|aw<~k
z<Mnh~>+j&VsNVlx?euY+c8n>LuZIgBk_(L5>m``ix=B|)KE|=P2jCFVDHu*fU8=HP
zcv=AdH^{qUCZ;;O8ZjhkT@>Xe+#Jeo>%iR?Q_qt6A_#N!vn`fV&ittiAha%kOL6oT
z%er!|kl&`!MbNq*oo^RAaMX(~Y>^!c6s=wuu;@vByo<z-rJ?A-)W^@c(*v@pMOKHy
z3!GfA;uB%w`KPabdw)b<JN903gez*J-^Zty<S{xI%(B{Y#AAL|U{t(=<6-OM9^r+F
z$o;N8V_7$fE^bslnN{%D>~LHNE9B6@EgqhL*=_JH!@DbzxId<7YnXQZ;h^8odj=9Y
z46%%$(zAc`{RFP(1lP8&^GcEOEhy@rEL@!s!e`78C9aPk_62CPXF~O-d1mhGC_q2k
z2M^Nr4@SI*(Xm2sR!fu7uq3XYHq!r7uxO3w9I&Xdc*%}FhEeHrK_7=~+|E6Sh?|;X
zNGbxtPqe9Bsgha{4T8Joss8CxMXCG3L@%5s&owC);~RQV2EcJh)uzOw0ot3e@jaWB
zBGh_{8iEGU489Awj?_@~YNZyX;ysJG845?>+pJ$0nku4?04W8*)S|=g3;#v9u@FIV
zLL<GYhJVf$b*#=-^2)C9`S3N%tXJoXpW7=c1sOiN+dZow58^V|tLrf#Pu|Kv9_+Y^
zHLF1^rz@)z%tn$>H8f3`hhIWx-qqd6Eqr<JDnLWuFO$dG#1pFu9L*D_S-y~j!Nau(
zyz2(-{KLF0H#XmZ6E%mWu@9z9!Eq^omU;g!tWInq30+f*Sy>V%?Npqkz_zcj{or}~
zT*Tp)E?X3#=}W(~>!1i(bw;@W?UP<-F!Zb7aF`#R(6AyqKi(6Cka>M(&El>upWBh@
zXW<G5PPF}x@{;Q>oRp3p7;xa(%-1hx2~Wo&>$fZ^C6Sp#s?s&5XTaQ63>H0$*~X?h
zf~<ZpZ1z|S%!d^!Z*er-6#HfrN{BCn#(1Tv;P6m)Y0nSt(s^YLB&QoMEwr;tAEW(0
zVYv0SUQbB?VefOTxDCa>pawyoZ!!LgA=Y$c=5Z8|5hjAOZ5A(%JFYS>*m~S)fyOJP
zuBRCVR#c)Kc-y~IKl%jg9n3hryohMSU4y-PBo1#6t>k1Vb9R1+s!6Tgp~MP`6E_0*
zc+ZgJN8o~hT>5M~kA90Rfd#d5RF}v|mOZgMTPjKmsFva3_c}n7Vnj@3m`^LE<-1cJ
zs*hhyN;NFf7%<D~7Q}CYnYn3C7)I5)8rj|e1(v7=>RXo$Ze8eSm+|LfhdwZa4GF3l
zBDga5m*HBGnTr<%G_mHs7=j$A_D_C4xqW4w=~a@au=I!F%djEg19*oK+2v+oxUr6K
zIjdxTQmc2sDVWQpEa15*KZoNj!0GWo$6{fez&H4NoWhE81=*cFfmrBqbqHnos8J6E
zr{q1*)m=$J=&YDC3n95^pkP}~mSw`I!|d6jVDRNLKFHOMxycY~!ffQ|$O>g_&^dS;
z!9u>`J)G~87y9K49JqfUj2Kg(86Cw%+wZ~JY8Ev&9XNnQCj{o53YH{Ot!pd{u0W*9
zBPy6v?m3gUEd0;iSc$9e--CHB%@VI|>V(+MOv<}gU$d7UoF-DKng#0qwgiq3V+EJe
zX6l<_?)o}fPd$CYHC?2y>v{S(>euQU*9@hNhqIAJ+c8}5e7s415qgG$qK8{l@c1@z
z4tZzXfdHx>)@rnZ3DCkwT@Wfk4)Pqr)8v5`&_f(V&2wRs6|rirkGUg6$<LfA0zPHs
zO5%>I0vx^H4Id#^DO5^#d7@#6ieF;9hIw(`UWh<ix-L38L6{COM`w-=P--A4a$R}h
zZW|g)C}Gn-$`7r6XWA06e^Zpq$0c_zi)5+GTIFN%j(iNB%*mW*&E3d~q0^*Xy|p=_
zpRYv6tCpC-Zz&vd^Mi-A;JvHFr(DONiwTseRn(QFEkc~<8BbT`bc!<vO2v+TyaANy
z%wVYXxeLqNqlFue*>n)owrvd%$;Y;;=ZO!YId9`thIz!l$fZk4_U5rhE<%yUHY{dI
zEsk0A2Abv*f}T3dpyey*L_Q2ghN{_4Ho*$Es(C6n(QODC{PSSoO<5<QX~Gi>y=N?>
zK6mvqxD8f=iPOeHzH%k18L$<je{h4yP+a8XNyUs=TQ`IeDmJJ0K%43wxSG(90-UTp
z2#RO@qa5xe)c+Ff*nD>x6WK{;yA(B#cz3z2sv~nMI9Zi-4*N6%{r>;}000006+IY3
z4~ekr?>~{ilofS5f_o%wZMNscx^%y?c;`@YZs6_&*p0qw4W=~C*rUd2vf@LIHRkn(
ze5d`jj^mDHUv%+}tYX@1YGqt}$x*SHdv6bsT*D}qmEEzY{-879)KNeSDUDgx2;hwA
zPoQp|13ftlQIkDNA(a%|VAQzYr|d6{(^a<t|A{#iRhb*)R<O_0gE}erJ~6tJ%AWkP
z){ewOTdxz@9>G==5%?Tq4tOr-n+kan(2u@y2g9@zX-H3ur3=$FI#h5r!7VBkAK)e2
z;@EHFI5qvj0KEt!2S;>v7Uow_2oF;-BAshs-LNzwtIvFzz%Iz=ug3)t)@?Ca)8F1p
zx#>R-dyy3}&a(mS5W(WiDbg+l=2}&HWMHcQ5+eg<eku_9`Ex%JxNdDfP?9v()aM1i
zWkXa=DKX9m1&GEOK!kUnppoPQpIAitlgPvhl{5qN-cB^tuRIlbKP5k-Z!@CXJuG78
ze<1Jb!M*t4C|IzK1Xuve=p!SCj0s`=6{}>KGEYReOJJK+KuY8-3@E{<6LJh?;#nRQ
z#Ina@-yBt-pTYADqP@Nr<or1oV^4BmHKyQTN}-@LKU?=P9q*<lf%;@Gu=1pTxkdcv
zil1;6#ctD6dtbIcEO&mQZwD6+07|UO=w%o!?al6!E28nN1tJ-+m5M1PQWzB1l0|~v
zA<A*}Rew48&wq+9v;b~HZi5IgOJ>AvJ-t9&c@p=1&G!S%Wc1!eHM}CJHDFX#F#wmP
z+)>}t>yA0hy{SuCPAw59l0RWcI+Qu~!<rjW4Qfz<s#%`J0AJHz9PjBhkw8uz0vD|-
z2WggI@sK?z^lPq|pC>ki>AzT7n-NfFpPZViDX|_ar+Chh-3BFR2@WsV&B1_uBa7|j
zu(sw_lJh9S>(RJ=q^5dM!)f`e0CfI_V}fh$+0}pm03HGT2p7=xfOmv{+4WSr%My;}
zPn_$Hc4}R9*FUc!0@;=8tx<jbbO@-G&|yU9ga$m#rpqua%|~FLJIKeadI}A#Z8&Ko
z#gLK>K^o>cLu(vQR56w{C-~~YgB&x7cWDlYfPZykExQHGHFo!ZMIX{kiu5bXX}bcF
z2<z%n3;pnOS*g{*JQ2#0@3#@vzb_v1t1$}n5HY!BK7;2-C~B>ak>Wx*_nZ8)D;p^l
zv{CkGlPJ{#V<9YbeZcBd9BuNQd$Bv=dsZ-+#;p#)I;3cC@-jk`RzrC^OS$fqMnPv#
z-c*?78Qf|(Bk$l^N;zpWN2)?#li`rBaZYRKRm9>eiZZM*S^));a_!}vaR)#+>SUyw
z%IVi9B6<yLCyR}y5YdjuU0C^3hb$pxy{j40O}I{)J<n@=rY`O`pwrb|x2A3fGrgOc
zy+Ia{-R4;JbOENINkpH)(ZH_v*7sEK$D3M#oCyosScQAfBRLDiQDm3<gs|L{07Iq<
zeW-Kur>CY2%RD`C;I2rj2Qsf?&PiWYuEv9Fv1-Gl>0LJoQ2QIs#bmDh^OVPi3V?H|
z(A(MZHe)Ve1$`Pw?<wNja)GjG4Al6L+PyLd;NM2VggfRnt$4~t?S<4Bs)h}qo3FpH
zkdv~h;`e`#&k>5VUSU8PRO%|=A}n`;s&4zTe?G$m`;R}zqR!Ou^EH5Sqlpg*k~vPP
zrfzpDno~vp569or2%I5+2(T<V7AmcEyKLFFv}`+LlH&=OOhuUUTm-(xg>=lTz(LUU
z@teu!fGyW(Ul9`xHXMX`w0!=GkQq;2#)b5RtCtXs24gsrxj#4J%+~6++r;U;aq<pq
zZd4-xTBDB;>69utCIuu(%6SMU8MJdrc2j`WfB|#?w@HFi3{a3E`cB8Fll+&Gyf(9k
zYj(x~I*%tAKH4El=DKVPMrxn{8n87yURI|W_T?^?<;7V|<n=I6B6Gr)oe+j6%f$=k
z&OWq0)t-<@j<phU#NSlq*g@zI;8}YrOJe=QGDu0=+lFU-jN)>3!9DH;p#7U!Wo<ea
znxfaeb9@@Cx&-72Z*~!(W$Fxg3-YPjHA4V!nqc7=0+otOS4$twO8$Io(kBAIjAMZY
zuY8z*46!O|c3gVYI?0YKQ2h2%Aq+=q9hoc&cDg0nbcfNH9Sa-$ct!<~@TY0-`iF(}
zUPAVXF?pBBsX78xQ)Y_j9fzy`I}ujYW1Ig7lllR|ff1R#YYPJLN(o~2*oNMXahi+-
z*WKnE_OtCeC45cT&D-V>R*VHtorWVsaKl>Nyvaq+omrOm43#~3iOW!d%iZ=V@j~&Y
zA~sJZaISxe*K3z-tms%#IjaI<^t3KU08s2Z{`*gg&0K`viA{VSNO_W}V0WOrPnd47
ztsJC$$y!lo)$kF0R^<EzjX#O!SiAETe3Brzb1BU`A9uYQBM?orYZ{bKl6wV%C<l}-
zXOabUBX02QdoBD#?uxe9(CUxlah?#jCDB{?&8~R&H5l_B7~R5zfkQgA3~5mznN`NI
zK~7XCzrVr&!5{3L(TzQPg{r3i6_BW2%dZdrS8AbonuxWXRf1bD!}nznRK;M^x;CY=
zN|YatsO!((L(QPNHU2k@Hz>A(+I7_y9CBz>9EAKZvbo;R6}cub8KvIMc7Za&hJ8!z
zo6!ealJe?$0`TIn2dT|dnTfu~)=&OPssS~0HF;c`1d7Acj9~J0=eoD2*3@U0k$9h}
z<x;dZce;><Maki*!kqF43cWRFIkJ@gFpf3Aixxk+ZQXf~RsqnLz$FeTC=vaZ1R7?+
zi^uHct?ggh=oXqRrw&Efq0zQ7owJwq;-|jFaHl@1sG6k$22G-z?@cW-7@g^3;)LP*
zzOToE#grPD9wRov4*j8tb=^e7jZ;e*ynMcu*^R`XWn8U~9MC@b_U)Y^Fye*GB=M`b
z@<LuYW?+}5(1lh*`$?(WF+cb&ScY(+WQV#6oq`H`7pL^fNqJI1j5&mYZ*u_CV<>O2
z{WL{+ioDxD^;t7pM*^XD))ITLzqO@ul2Hom!ABZM2kJ*-Caxyfoa$(u9^kf_-S8j3
z^+JKXXLxGOXnfDpBJd|rHnu3vV&_K%j%`i5)^n-QtYT#l<L4<nQ)1I(59p~)pK|90
zD(K*Dy-wv0I<){UY1lQBMD>?5O9MoDM6~AOn6dZ}yb?H5#4zwaC)TZ0N-13?4<)6_
zkw2=61#|f`-wR;omvsmN7WdpD(A^-<Lrrm4W=!bIN|Z6!0e-NxI0I6~qrS_3N12T=
zUUO0amGAVcm&|#}t;&Q)>swZ?jU|0sT!hT&l)?)GONU=0LpBX(wha~XXyMU4Ivh84
z=Wr&5<z({BqoZ?;(rHR*2*cw?qy(e&KE9UQx)Jv44xYqy31;hcM*;NcVE&p|^=|S>
z@0r7Er04Q0KCxRif+`iysu|kheHEEM0my9n+b0NUDcYSPmBCc|;iX=m=qx&E+sg!*
z1L1{<o-d~1Ek%LZ|G>t76By2|^vL~y%nlCJAOo${!P-4qG~L2&koh_jEOvneqo!L=
z1YPaU)H3SE*5FkMR8lNYX-S9BE1e!9iU3FQi{M~K@`-OFmWs&sKFVNsh%x!FpA$;X
zR9V^kfluqHr!Wj_c|>m+3OlE1WL?e(Tv3Ba;_LX8UQ}YgGj&;e$;*!W%VbmUhmeNU
z#_al?fB*mh0003joH*lO7}%vPkQ&j_B3r~?K$0|Q1QAu|gVPApFm&V!DE4o2=#VC*
z-c))-FEi>!I|J`*T$ZIuBrsJ)GfAVNOKlRx7+#P}8#U?87gQG2?Bv^_xsivYSnt$R
zyrQ9CbyL};B&~p7K8Wxh#+d6@sOw^`TwFssd%WhT@6o~IluF%lA^XUNbv_o4zKIK)
z)4puM<#b%RT$jp|hSmL#mF9rU41@N?+yF4db#esbJoKV!O7~}BVbrB5`>K?$5*-fQ
zJjbQW;$x}d+&Z@Ey7$cJ&ef@KOfNNtYo1!*hCeHkyWkQjbcE`9<m(8TS=*x-ujxnX
zi(gjQ+)wfRQq=<us@O6$jIsxEw2c3?Az(RB<pks%d<6pxCpf0i)q1OsbrLW9!@QGM
zJ-XL9(Lav+1c<)`o=Ap&dk<cB%u#ods4@KazpgZPEAcR$cbl6QRuJXnh_<4hPw*J-
zI4o$*zq08T1{-`DZgm^)6oyl+xPr%a-({qo4KvdY`~(`m2>k5ld5E6=C#=3p;^1V0
z8_R(EkxQ#C76N}xtmbjy$mNN}u|}eTX{SXym6fwR1kpRd&awOKxs5LabBtzK<(63c
zV7PRDP{7u)%Z6WnQcC_xlw%ks4>H<?l%b!b%T_n?31yCcwLQnq3ofR4kjfPcomI`y
zzHmC6R%89^j7j9sF9TT|H`Y}#AufsKX}U4NlK4gLqqc=8z1;p>!l(t%=VCJ4&2aMr
zAghz>e=10$0}p0dJg4rRD=$>b_&6|FGn67TXZvG6zUhu(>J1L{O8!Dpd4~<k5XRF*
z!HA2v1}z&K#8de@rgJfQzSPD6#xN01n7@Tf9Brrhqgu-!?a~(-79#b^Mg4@U`3ew*
zED%pR-<Bgha1Px^angNa>E5uhz|oC0{k9+H<CtY3d~xfjpK=9m9y3$`0JGo+Zyx^3
z+CAUsj?DKB)U0-FkOmhslM<QkHJL+#Jcih|Q_eT60@P#R`Cd7NORF=@7q7Z-1cN8-
zw<pFqcuuCZh60NdB*~>Y25VD2Y)u(Nv+m%u{QUN8HEP6+0RFx0XuW&7-UuVf$hV@T
zziqP-lDr49O{>6o*J<Dm18m2BRyMu(C)w^bc!bv8M_~HzN==Hi!7Io(pq|j?J0z?c
z5K%3icJnCH4^<hF^JphCK(44YVq6tFMH-Y3yeGg0pu}TBEql~uwzc2YwqXZeT_Qzo
zhVH+b5H}>djVg`^FvJa==lNB&)=pca#^AHqKl<JzeK|%^hZV+77&Z7=7yWwU@5j?d
zNUVgog{mqY%BrL!%h5vwBqS@7=)<`6dMauJVKEMw{UF&glW8_^AuGvRiqiOP{oR$Z
zn+Nyz(Ph(3tf)^=v?`E{FE%7>t6FS3Q2>W-F=5x4C-Gtuo4-=#Yl)zSTC(H6TBxrp
z?e>EZjPz;*To)-<!B)dgTVo3d+o3Gh9<8UX87O4x!TN`TpiYrC-XOp`dauA->@R$V
z{YdzvzZx<#3l`pbggZb<sX?HN`33LUv?TMwa>-ttC`E7}<5ZnI5x&_1n0}X1zmb$<
z5?I^Q@L01TZJ~bwz^0|2FXd$jZfE>8aZQ`;oDe)ua)pN;RQixAbP+OFg5qtX{ySq|
z0M-^~n;45lWIxrj-d<-Pl(MAkTm9)i|Gs3<&0;TE+H7(e;U{MvEQe-a{N}vRr7D7g
zMDl%UaXnu?7@`Rr0MRd`L5k$(uGjuww++#VX+wsRP}a5Hs-?LYA2HX{F6F5H91&Yg
zoWT5hSz|ml3*9&|&H%pn^<o#p{RYXM(!)sYc11ftkYDz;u#-IU=xy;qOD>ii3<-{I
zr1NY|L<Q6&%g7HTc%5%#vaQ)_7stab9Ce7z%gpRe4TEqe&~ut*!XPkeSi@EQif(L#
zG$7-ee!L_!Wr3LG3DlH(+jl=;g+(hW7iQ))<-5>?IKG=>BJ;%Wc!5aGv6V$O>vzd{
zi=y&Z@<5g$<G+(3YYA2D_g4vmlyAMpkkt^1*3;Tn#by!_y3{qJx6XvZ7PJVf<E*px
zZF}G)QTfr^mjLe6c;!AhNtwono7uh1q(M6AA!z$`R1~^5Zco~4Bt?<Qh9zHsbzEj<
zx!F~48sd95BriBv1SW&aoX$UWQFGBUfl~|&`IOomktmDeuT?0isNKy%<i8xWL`9pe
zRm{lTJwophXqWO>Fzh!&(?VsY3vcTiO@dm2+tC6W?ztSidk6PWTB|GK|B9rlxhbqW
zOmhIS>UnYsuQ%X33GiF4RQU{o;GS2*B%8)&Bw5A2)>Tr+BY<wyu5Pm*8);s>PzP`+
z4}BH4lczC<8@pQdJ&vo=QFZdBxcSi4y|V)ir!rr$`qZ{m6RK5>q)poE+s~hJnEp<3
zGEE9bP{59$IURK$O`gx6<u_woPkBDUhwrN2-bt_m2M#R>n9+;shW7m!`jSr4?qM;?
zRNZy&8C-AHy>54e#HE&KB|TT-XGma;BOa>Wbq;qWz6oh`0o&w2-RhJ<PLd&C4_+zc
zo^^VMPToHOGPpLV$_slumq|=xMrkGgjfKT&BCmb)1mYxb<l1_n0qRQqqM3=Gm}(Nr
z*_JgR_<{$!<Lw`G{Mmvcz8mEgWdF%KSbpfEMGA;idbRaLT^&@iqK1c-yKs!-MADbe
zOdaPL#Woe%oW-9UIXMX<6#ZH`mNq9_TKU1RB`bzhA$A%V3G^*>BD5hzXn;T6((hKO
zHlZ$r(bKS07YX!Y8tSQQppIk%fBr5{zmWGV;RttiGKRY9Pd%79VIhOAPXBZZ{u@f&
zX!Nq<tx<S|dSqy=gKL=#5{N)O#U2t_&E<)Noer_&Fq5s@pvf{4Z$cFytQm$oVgt03
zyxjx@1fB5$yk&C;W%dNwhq9c)BCvh_Do~Sy0|sxoRrad}st@nVg++G#bM*r40{d{g
z{wP&1nIl@N)Y>n_)4Jz=KnOTT<Odu2vz!Lh8*%oToA%|p(NxKU!DZ>EXuv>Un=Xx=
z#d&J;v;HmMMIhaO>sy8;52Qw6{qCpJW_w`<6ZgiXvZ4i+KsV?=kewE8>v{NA3Bpy?
z`foE_bn~SKP_z@YA@<FU6YX$>Ys3+{aE}_9#O3_-B{8-MazH&6wREgN=pj2u<>bxN
z$k7us0Yy)yJ6CL*i1{9#J55kXt9vH(kAZt=QHZL+%Ilf#)YkK#VjB9qK`K|D!!<DZ
z9|~AqMjTYBy6+t_9kf*qp)IhEn3Kj_Ch;JK$`#c<^D?55-YjCLfS`|djA?E1Oc-f<
zG`6=eH1r7Pe&6}6#BkKB?#WH)4r9Tk;0VHS98~sdtQpWCg?`EnVMN#$^ak}znZ!Ll
zI;}FY?bNKP`<aj@@C%2RhQ>X$380qE+XnY<zW9g)T(5r>e~05J`1!vmc~!19sL2yq
zL8*CZ9ol8xbqoHqjIr~oV37uvAb?}}6!9Xjf#O{{^L*|bH<}M4aDZeLP(Ymn3!Wzp
z4}2Re=ff<MlKotdtS{37D($j6LPiXb)ghRW&6oyjp;+|lYhf4>R+|PniX1wI<@B$j
z(H0_MIAh72#;T@180^9+?Cq5(@dxZnL2FV(NFDou=ar{Rx;}N96lP3UMMFaSFj7d|
z<zBimN+p77pc-7&_rNpa7QChe!7|XDjoQDVRSrEIN%tX>ZK+czSSye~7>ePkglqf&
zF{v28YH6`y_>;cy$E&}=vYWT2S{yBmedNpq;2;+Knu#nfMES=d%M$GtRp97-_9r53
zhYIP;$aIR!^jHt*xE48jAv&Z77ZeMkClLbB<Cf1Z65x^{^vVpU15s%}n!^>4Ei142
z@j=4IV0v+Y000000004~-BAnYJdGIv4-JKg%B#xUwx&f(U^)z%Vf4x`cxo1HU*^=%
zEee&@=pe!t;X}QYu|drD!89f`q{`%rFLyrPtT4DY;f@SS-x3{+QT)i~;<QzyQoODg
zOO@8o4jp}i&Y_`Lcoh8$f3d_o&NR*_iI`7`>8?a>odGEfRH%fVDD2UNak&?)Fya(i
zztApIB~3BJUz=U0uy`z+u@+<4b<nN^y=ti}rsSSA_^U{Rq11QeZw@K+@9W6zzQ4y)
zx4+ZRAiHIasFRF)kfzbN(+vC(xr?h%reHyU4dYRKXr#ch_z_*)&j7;NH;?Cp)qWtL
z99RcM#Rwx{op#XFqI6|se|kxQ*QuH8B;!V6Be`r<w-7}4#to@@@{3}g;q^;VB!atS
z1Gvwt`Rl$+$Ql>13LVH{R_E#AT(`B`AEg76ViYEw)g6s*Gcis8nilVXfzIa4fy2qH
z@k!y7N7`g?Q?X-BbYTfG8;(!5^HU<;1vP&s2xjAFJPbY+`l>S<og}rM&J(v4Wcl+R
za%NU*9cH>QMPCU9zfCUPWs>tw4iE58U7nN>PRzLh2>vWnsZu}j?4Ht<MW>;IuKsr1
zzGPh3;(izw)VRus;bq}7h?e?DB^!$u=Xxbaha>Zy|5A%n^I8hq+As&cmM(EZ9i|Oz
z>kH$XaW28d>?MflbA6h%EaNN;L7-A!)2(Z!bV~k{keG4#-7Twxp*W91e3d6SlCd%^
zhxEMHHzdAXFvu&jGCWO#^Fgu9jtKdVs=4qO!xvO<tbGM9qD5JT-B#jL{?AQ!6IYP5
zc%67#-A3^%4oZTHqQWui!%C<^wzr?Zlm6e$1|~3dn%ez)H4L$JpSd}4pn~b6?Ce<}
zoY@B~9nnD#ej3rmU?*BT3$ki@QLq5ifx++-jH=|W+C8W6KmqdFn2_$bC;4)>mA`9<
z?-+nKnqys0=n}y~e4-XVTf2Ew#9kJ%4Z^iHu_Y8zI`kl=dq4mnHJ(l4tGvorY%2k8
z)J)rS*PN=x_~>>m6L%>;0#d1#!nINh*wEbu^X?>rXh?nI-VPV7jz3V&EHNz9mC3so
zpR1P^Fy)>k#rf7KUVAktAuV$S*ki<45_!^g^dJ3sw%RUGZol40)fU~W@hF_NXqcFX
z@^uq29<s)h=!nY=BIY!feqn4^S`2vS7ip2wk@o=;&k-yeS{PB_eMx5cWrG6Y&bqb<
zY7LdQkT`sN)e{(}YY=qYzcPehGsned-Bq^f;KX?klAq}2fZbrOXLEGm7Jiua+V`YW
zOGS-Sx=JzKq7x>{U=mR>QXd=MtEKr}+i=~XYlJAw!YAdh8kO0V-aM!C0)^DviD0IF
zo(;cQ7*`3SV;la_sy*N^B8KV2*W~pOe7L{wT9Dxa7KVCBS~cq^3eq}D4RN|DZ^*Uz
z#yPfogZ={$<){>+m2s;~I}dx~4VSA*Mkk+48xD&mu_q(%R5?@HZ*u&SJHNpzijkeE
zlM#Wm%kV0tgfD77({_c{KB0L0#Pr1t?$N3O{=CcBLHXR$^I)zsWR@>^{}A<FqFX!0
zO+tj3Tr9moQ#QY}&u;<@lSlc_em%_#F62^aJ8ZIYxqz~CXZ64%_C0N2(azaC`i}Mf
z^P+fEdn|X<4uNbBiHI#pb|rpJR%`DnQgxOYjf!S)B))KH1*rC%c41iY<w<l10(JaD
z*PKpNnwpk04eawjCFG7vlv40PLtaCh?mTG>xQ<;ydMt19`zliz4x_@0xF0<y0PrHm
zmMZ5N9q|s1SwqXR)x@_4RqxatYp9}vD$6nMq$5CFDbnz5Wa}$@>a36R!RA;>I{!gJ
zD4Ze@nPdF<F8D~?iy2zzHw}JUI2e<ZxS_C=?XUkNTNPEO^+Zz%0>z{AiMFXF%tQGy
za1z@_*ngpm!aUZS(Hef_P7@7bkwxL>=B4@Ol>m}JrK>iH-0vpHNha3+z{l2=R$t$g
zHeKd6U1_1$<#UZi*L&nK?IJI1r8Fg_1A_X+9~`{}X-nR^zdodi8!~Vu#H1;45F@{d
z7#WOB+TiA?Y|6cd6p?}kUmd5SDHG3lcuIEE?Z3pQLE)n-=v=!Ecv9?MoO`St|4#l@
zBB7b0gzwnrSPq=9fi{&W+p~;SDl@=y?{%><*CNNTMjmoy-`c9-0S<K2yM1vNub4-t
zMED-<cNv{sKgxDRtE<3`Bo$)<pvHjIucq?^@7yy5Rik$T*$QIj*0gr@@pHa=PP7pL
zwobgc*MJm9a7BE}?^6W2^PsXNz++zTOefzf7wgaw|4kl2szX>5WPYO1w`{eO9Auxq
zCnoesWO0dDOrmP3Avq+*ROavc_(us&j1D8qp0ol5;ZXOve?~A(&l4wo<wF`uHt-Rs
z?qhN&K^Yp%Ui|cbUmvjaR5AfIZxEpiSap<2$JN4(?*u@-8h=6(9sJWJ7ci#{JCN0<
zgN2hIw)(xeEr;1}^-a`W9IbuohXkw+>GJ)xcj7c%Q^kYzUy4%zG~WP0m4B#TT-EEs
z@3u5t)4%E!tBw*3)7~Mxl=TfX6fVxEVx^`%`&%_hlURf1f2xq%Y+wwMqeD;Zy+=X>
zPaew+1fLePOAnW8#HzUH;Lqu*y7`>JaLzD8c%7tN-ESfGUFed|+rCA59yYQm8lg^b
zDrz5A*!3MzztGx3mtwO#*eERT&qO(8$3tuGrz<fuVF;x1o&ryz>0o$ji<_bxP8Sm|
zRL$N>8%O2Gp<#-Rn<{U-%2*|m=AvIv!6uyDnh^oPDB6K>JOIPdU}03AKc424n49u?
z$UzWlG6s0>jp6iEy@WpM0*~=D9*!o{5JAfuFaD2l6@VKI1}SlH6z6<G@6B1Na|)tQ
zeYJrEyg3nY;_JFZC3~F=2p@`40v@}~O5+9JcirR}V#$Q?q*F{#z!KC`f6wn1_2hVl
z;xyPMV3H8YFG2L<c`+3u_{a~$FkM`4szh>TyNk#<467SccW|@_?RFV~c@bCf9R_tM
zqu2LF6L{PkO`1w1GJe;ZL-(r<b6?IThNjmI@tKG4i}~(Neg(MRUx54>5w9MxLUiWV
zwIT9Owgi8km}#;+Od0jzn${NqMf`G3=cd~%B~7qjYb1Z-_Bmj@(=gT6J0mP8>BM=r
zK3q$g?$|--ugi~);%ZZ|qH6aB-t(kpA4ivvM}u#cc#7u|e`C-v2c&lDG$tHo1R%A~
zKgmBx<>5dhj}S-TT`3wcVC_I^C$fL7x1Evk%$4OZb8WTuCQfoYkGpBsTcFUSb=2UD
zi|Xf0_NE*WY-?sZx{rlM#}w>4+rdGQ`1i}u_BjQ<|7gGnng!GBq1c$p1&C84DD48V
z0R6cKSi>4$#Y28(E+HSBd#0rgJ+&&?1%qW6XVEr1g@VyKubZnfma0`7kxLk5M+CBk
zgA4$TK+*-cKhXtC>?L>t#5q;8pK?#9T9jKz^9-qjbx#RLCP~1kaur!*0ha^c821_<
zP({_=5pbGEgJZK=(m9FoCU$OR;tB&86jIdt+iy$EIO+8>GxY09UdyN=<(c(dB`kzu
z3iy9+TuZO)V6hWQKu{_1OXOMdeY>WX20EcK_33E-Qa>MjtOq$(_4X7`=Dfd$;sK>T
z_yw4l4~vJ;nrNVH-cetqGpV*i0R5ifL7M#{1X((8lpkc`+w;LCmWh(#X4FTcEDO94
zp?cFR%cHQ?yJ@pprnpSTi)$#@oiLBs>-&c0?qbdiulRgh3bR4GrLd$<w*@keadtig
zp91Q@000000004k640ZH(2U0KT$}OfO_Yka(!*h-0K5w(*#H0nHZ(63fgUQQ6aDC$
zg-b*aD(X#{f2FMQ;eIGhwI=fuXqFLHX`|~?-m*9Ow2+|I+1tyMXT#$3lQJ#ynHvpC
z5mLWR`+xrUXE9@QHEb4in*)oqNUXN`(;d(=;3jy=-6(O1zID!SF=z#2o^b-CF>q%^
zB?Prk<GHD)V6r*41fLLO-1NH8%{nWO_BuVw#bGidyugH}q3H&q19~apNDAUnHdWZt
zJ}G@RcXm2HPLfg?TwtHQoo%|F^&SGoeZ(MxtJz!OoQZ7VMitmgR!o3qkOH|g<!yb!
zeCJ4-5O{bZLFm#%kKht(E6>8g;pC5v;sqAmwgY2#>Ma<8Aifl=Uv8@ncywLPpR`?O
z*^~!5%8WKhItD-7Xd<-<rgm}T#?<${l$MbN-^->4tC2qDcA>hHAX8;xC1mD-JID&R
zkBwyWe!?#z5)PF?-A>&YHwMRkPyMI{sverYS``feQYI_s;)Yyua=~4#@G`oF5O?%B
z@>zkxOi<lBO68V*@G#%<^moB<GHI>Yn4fmiI{qXW|Kx!eQ^2*W%FD<GA!9(XZ~{Ea
zp$|vgXiC>)IXL7&9Y7eHGb^Ufro<v(EHfH_J>|&hfVj_U_Sv^}!PkvuZ+<FYx3*g(
z1&<CfJjf)rrg6T#Ig63%U)+D6P_e7`--FWqG9N&Dcwi~zE|TK_p)}+y5((>O<YwPs
zbNou+4v(**@%bD=06WZ2PY?dHQg}i%5RO|pIdU=RMVy6G043O)SCx|-a3nVMqGP7D
zrrxmwF`e|q)+WMFfzZrr6k2Dr{4HewuOiu}YgG|Hocd6ON|n7VULAlLmjWN*efGos
z9F>y{1e#nGugN$hi9ab?kK9TllH2K-r!CF4Gu+@dOje<&S{p?eVa3SCU;rCj*^4HS
z7BNiyJ{cB}1sjP1pzCvxd-m@QeKZq`m3gPs`XVp!G((vaBqicTTD)s%ra5lZdX88R
z-nw`=bS^H!FDi(M_|H^nGNAJddoFr1?VPp3j8?>9Yuo?>1V_5DeB3H%*O$gH2w3me
zWMNs~Q2?CA|7i5Y-PfDP_bUD>r8yt))Ek#i@kkngm94U7jB$^zx^POFG0h*ySHj|Z
zh%WDan!;@D9bylD1=l9h;~CI_gT)~(qeWBbt^S^r)f-M}?R-hRA({Z_Ws1J5xKjiZ
zH)VI%5AZ~GQu(@pDKu+9WKpRNb6jo3iTNtx(JBTp;>gMuL@Zwc-G~F!rUp6VL9si?
zEj{lsbm3k`;?f8K1oKuTp+Ovd!97d@<P-R(qg<>uvi8d8OF!GD1r*ygHG1niJ{+=O
zfB~KDgn|!Uu3$Vepd_9cdPn5xzQhkeOjYL@$o`w6zMu(7HB+)ZTGrkIfvDrEy9p52
zAvev<Bzu^Lw7|KFpS~-i-H^EeOry10R%Bxu>Sc_R^f>+^%*e_fsHP;gQajUS!Gc~d
zq#Do4O7Pc0unI=pT~zF#%g7qQ68-(>L&P$lYQyDG&s~@HpI_(mRep#FXx005QE7m?
z*wg&xBiiyqU@mi{JZ+l#(CrUkR9Y&5eWO7gGw;?xG_(?7aaiT}2C3nNKJ1#-MW!Lz
z+?$F1D!^7T^?uVJThT<&OrV1FQhW{?!D=)J^lWR7pm;75K9wM(TYG=!pn_X+{55Bv
zQQnc`d-?h0idbTeslN~(e?%^}4~uHFB1pOq(dM}W#Gr1LgjV6CF2yr#STP@F<LX)s
zRuYZG?xcK;b&|GXbJ%GFu-;bjDp>bUY6o3Ylv6bjER)#`U*(O$I}gG-N#he>iC<Pb
z^8lmr2giJz)7owCF%};3X$1FPp;sq>KRO>ZSB|6}Wb%bo2AJd1p3t`B1+r<RA!cM>
z${@-n*mk^S4z=TGnY|>Dwb~BXyiNBO!9M>9Y(7G}$cvvgDo?t2PX@^oe)}pICGQp-
z_M}F)5h)^L#`VzezlE^&Co&xG^;UPvWM*W$O4Bh4+U=SF)|JF8Bkf&Rg@`>Fc^AFm
z$vcK3oErhu>Lf>u)hMMry?r5I9xf<OZ9-&M32P#_bMOzN{_S;E^~DgkVJl*nL{fy=
zjnxif4+ycb=QiqOZpc7NPv}={Jr2vwx_k|UVhiXLpuSe^(87gULz`<6`>1Zw-UC<$
z^3jYs;AQI9M)FtVtI4z6oyw&d(AMw!T^vsFtw<=WG^G%Fh0B6iu|hBbABH;!AZ3{s
zp5i3G`!yarz=Z4_EvEngK*l<ZdV~&*eJ~mn!57)RRIR0=Mx)AC2)g#e9T-^%cunOs
zIhz;5Y{aCalDHB{3sWdYUwz*k3ykiha)Qd1@ePyaJdmi#4bkeNAYH71=QPSII^rjb
z;q8S13=agzLL+?x(=9(BPJZ37AaJuDkR6Q{y1#eeICT7{vP|pvs>IrJ0?EvD>xnV@
zqdK3tBeR<7K^X-!0j-j2M*_$$9DvximzX9FKNcm6p+wAvjEjuXxa3Fz_g|B+I7*I7
zcY`n8ybt&GO@m=)j5KbA$cD1j;MsVoIjIq3wQ@_B3NebF<%2PjYU>Sft5KfT@Fnh`
zLWJ~sEuDUuSYdN)b#LTpISn_xX<<SV)H9MF{8%urI9o2G)n8FHshG%RB9iL?dW;=d
z!ISB^^)k{VN%B5`JbwHY&60I+Y9-J5*LD8IwmHHK0zvDOtxAafnX^dE+}4|T^Xat`
z)Jl{j$+bIp?B#C0zIlhwP_T4Q*rx1mbW4b0y$^eo-4^uL*<h`KZDD9jtDumCWu0dF
zM~pnVuK}ctCtP_S$9s_-DQ`;ltgwZVVA`jB;e&aoY3?frK*|w}DOcKdBes;0{77ZC
zMt}r?SM7Jtzo{*7GpGMMU~;@BJ09vfhBPjZ3=a7s{GBN4^n7P{j{DqPW^5YZo)Npo
z{7L(l8`8(nhdlK+_+8A(8yEjpU*i0&p1YBM6E1!oV4w{B{&f}A;O$#fZAdId>E|_`
zAxYAA5F6voecitri;a#q&StJwe{*2L9<P}Qc_%KOvL~Hu0Yse2Wa$xW$_qSc`yv<r
z22)hc8B0zw2SC~;?j5>}L`A^Es0<}7ZDSVL<WNjOb_0W%3K9W{3OowRD3Q?Th8lO>
zItcj8i0tY<74slEZdFtZGcXIK(STO|meDKBq~|dpD8dSL+A|V0c=0@o4eb5{xoL}s
z{S=_wMkF6K@<Qaoot(#6S5LFchHkq>JZ=7<LZL?>yO0>N=@iCN71Z>|dNYb>_A9$0
zADrd`xiLci(GIN$1>w&K&hP+Vr@YGu`As(tX693SVz(DwZoWdeL7fy}FJn?AepD-W
znYU2OM#}3d(!6nS;?M0g{uibX{qP{&+sQ$gadw++e6Z~`c!rc$(cz^2vaenkdBaUU
zC5Sfe?3r>;tes6?G1>_2v{h=w9kti#cJS-ec>b}B)S%+W)ASPN9h!9t6Y2^AyeGld
z^>`d(OlU)3OsBu)vK1_~^Y_+NYng0*9o^3)8hSC=(FC3(fd~IS-Zp8$&NvestXxte
zaIgx4=n5Yq_!yWBwjcs2yM58ouYoBTrXTI~T5;Mo3z3p$G(Tq8P&|c{2GVOt^S!S}
zyWK(icV>7;YRCwpUJrTFaD0yi1t?fk97nWX{ga~Ungwm@p{n5t!|!|nyn<r&zk~Mi
z%d2hAB}q3s4eApI62<H!hdfDQZRLq_Lm^0~e++Q|NIT4d4jolFy7Vh6J#NXd`uC@A
zf-M+)bIO1wb63{ZuTsMrzIB2m<bNvSqNQ&OCtl;%&*3KnUYDk*Z7Vktt)6Xu)XiCG
zkN^Mx000000(>AvIl(z8!Gm%*s1Uw-m7D#l*~E#y#n&s@+zsyxD;|Jz;3dE-;Upcr
zmp@&g3!-2MnlTIw<tpVHgDh6E3zXtrR9ONBgPVqess6l@9ms<qa8q(#&;lBCGhK}3
zHgZS+Yy+^#&O}rNBcMPCbQb!0?;4HCEuR^u{(hiLQZ{tGl9BFTzq`G}=mx?~4H!V$
z;*P{B+*fPEDo|1x)HvK`G%|ws)2y5t#%5!13e&~?>z5av$tk!j^e6EBL6OBeHLcl3
zJjV!8Mj}^HuUcZHB7X(5`K8wAgyIkhS0KbGQmxk=9*JoJboJRm<%)11)^>SMbhjZB
z=6S4Qr&)Fq$uJQ5HT$m(KF5nyF&#OLoOgg_V?Szlkt&#vQJ&;Xy*ZAAuK-;@qQ9ps
zK!7qe@d5L*I6s+Mac;lIx;;0dZJKes=jy)Mk%m@A&1>s`Sso7yf69Jj3(GrK=PZt3
zcHLQZQQDB=)T6u8-`%XaW2LTN%$+8N_AlktNd9=!cJ{<`2XS!Ujvv()6!m1vURZ51
zq%`ofN&+~Vv5?X1Y-j`4keOzVle>vYbtq*K8rn}ccKkZi;v3+=D2EQ1s>%BnIn-mo
z1iw$>FD>j=@zRPLZ&uy1ml?Ud+D1tn7X2cs&z@21_+m3ZE@sVE4*y>Q#g%rbvL|fw
z7<C3_-kytF8GcS@B>gfL%#}Kuqw(6-(PixIGOp)7r?-!H?1VowcdeSP2uaf`0ldSv
z-QNj%^mqWWPIH2Dz~DCAX@-bYD{G6uhU&k@fk5MxR60SzpJk!iX}R7I(M&r!2y#j$
z^*`ditCWc$OUg6Y&zED-Rx*gtMoFSQML=#&a?$8YDlkJ$IyO$pKEz2x?{mia;7B$)
zd`HEhUvpQfVBpjIT<T%1O%p|Vc!m5m7-2SWLYKgLhr-SSHBeZlWQ{RS7RZf+UAs^&
zno<+QjR=&cBZ93LM}dX2<t~T71C^HUY>0lnYKp_fgIGF_*u9jQt7*Qh5qoipuyfr+
zH=*&nzan8eCPd!N3KEy%Bv>kvQN#FfO%D5JnQ{q@td2R434~Jo%bxPf(QC4Rw!XCz
zdarw9@>UMbh-b2&D}zP9NuNV?OA?&R%41EzgAymupu@keHJJHN>SO@X08yeWhua>V
zQ6zN#Wqx6x*%`Qxe-QMh(1hcdG>={HJe@(fm2$Mu_Qd78(jrpWsT(A51Tj_MbPI%6
zxA_&(D%1-W`zivaW{!0bEL6eqD$Aaw4=_k=u5{Z&s}9f2a!%?)la;aov{#BnlIA*z
zF4i$P`<9IC<K7&e=NhhgvBjF!*T5;E`A?hP1`qrNEye;mPpOf{!gPfeCRF7on9^3I
zwnQNwn>*Dhiz!TuR2FU8p|;xwQ^Qo}0wqb2ee*rz%_wcT)p3UjoPi6^_mip9;5FHV
zx&xw_cEoMvz~us!n||_wz(eKRic8Xw-6#TuY%0_brPP~!<DOgCz~cEGo)&bF{a)89
zl>juxXs-A%<?(4EabEOnxIzlj9ey1p{0jXcn&3zk=~w5dI=V2trS~gUdkVYpi}Nz6
zRg#Vmp?P&f>zF$zl5#kOvli$Ge{a~zJyHO?6VgL_=9$Uws|aNQHy6_DXazc(i;K37
z><Y>7s*D=37ow_65vf+klAnmauEnj-$&LSR8Ce8@gFk$(EzxSV1dUHne!G-z5vIf&
z9E{mQwwM>IGd9m-np9NjIB!F)SxONGwtk@K56UGnWV|v_WI`j(kM;ZJ6fh)C<~gC4
zd{W@W?!@bXP)Lku9q1JvT*}q<dvcfcqAPvb>MjI`#_>_wlP)Czcy81nI*%0G{x2ZQ
z5e>6Su?AYIVO+hXkllv1<_TTmVXa{jQqTecY)_^lhxn%te1WI@hDfHo*^=D%IT}G%
zNj^~_;On{~qf~O)p8F6AtMN<GNLt32%gEj=r%_B^U-I>%*e4pDz*daXPSgC@aEffp
z>KbmBgT0c{2zFa?0=Y>ej*?hQ46k=O*#zrHPWDhZ0T=rZh?%#{V_PFIqRuolP)~ED
z*cQ@q1+HiktwwGJg^7U|tpFA2%E-xgRPjN3NJM-egt$2u+`6KVHpDVMqRwiV8K6iE
zR1Gs;HIrUSmkgC)^oFbkr508w4R_$poD<M~0K8hyaEPnc*q8SPtGc8&i<kGp{#%if
zyd*cMKr|od$p_cZ97lSyw8Tnej(AVfUl>PN$zt83*|Ud8r!;<UYSu$?>kCiH$dBx9
zb#efk?P*h71--%FR-2PXNE@P_5L-%FqAnb^vNryDJ!c=_?>&%Tj(`=qib5V;1#g{!
zqi6|R$?=lX5e67MS|-v;R{Aop+e5>H)a@u{wBypV8YoJ%@++m3DGUb@ujYsMmX*LL
zzaaPMbdQ;mH^q0tGRf`qTHn5*M176t2G8%1E=kY|5rsHSGsKkA8-T8J%62&}n>ByL
zY~ooGN$mDz^(d%&MD8@0*B-1O9_YUeHu1xB+)d6WripX~XGvpiZh^YNr#rXNvQ)AZ
zt?Kw~59QY%EJtd7cQK=^eSypQ#-u>~<j1Ljvh6w!qM_64YwRL;CPm_a>HMM)j!wv>
znprA~K{Y9y`8kg|rJCm$so#5rdKVOCm$m^r68bB4UV9>>0CWRMN{|`ny$O6UR5UYD
z6B5JJHQLen&J;V~LXgFI<ahP0<`oSfCt1VHx%c4EDuGqXSqB@Ecm*?e0Mu9Zrx;zx
zB|xV=wufUfKixuAPn;BO{@VNiKq85YJv%E+gI!5KhH%e;f!dr{|EuAe*^19XM53L8
z8Ck+d$T(2o6$)aj%`P6740Z}AhEVrk#vx`Gn~s%);UkK3$K@r6h*=9`g1hOwJq}x_
zJtw18x{kJczCwcLOB<#~Q4e~D0Oe_)2=If}aGu=J>&!eA_gqL#JJ$%?)7(o<i;lM{
z%b?#uw!M-9;{(?Jq|nOnHk*QR_rWl)+H6dkGn`O2E}HiQnzPAnwcB=s)s3=T4;JuY
zXGxtdcu6Bk>Rr45ipf3#hTwdYPpV$+_1Z6~6CVgHb`S*C8WTLtsoJ=zw;sypCE3rd
z*K<RqUME&a?7p(1&7{H_t6}X-+sav%5!XCk3hQ?#Pq$RuZGTzp8d5G<BTh)8@pL1k
zU3RCDW}lX!A~)iZrR=dvmWbI#y0e5c{PJ+D<cwDR|F1&#noS^h)l5?i^T<+>8tPZ;
zAR?a{W7N9IruYUG>AEt(_j}oDqVChYB(bQJjtQv{EjS_J`HMmWIm-Fs;dLEqw{Ex*
zr?0+ESYGF^kq>bZ@Ia-ZA;+x-NT#gQOdHcpg_UA@T%wfze<dgXESny;jkvg(*Yxvk
zpj}dZk9iWNbwQss>gK6vOR&Z=jNI!UGK=?gyQA!EFmZJ{g-6VBrKvs#2lb$UxppT4
zT{Lnn+iLsGdQPY7_J)`er@A&B>vQ^8(-zOXOy#8Mlw}v%`^0yUIN>M$hO^4;I*6$g
zN<;WDywvxl(BM9xSz#CIm(brL7+M8fmTp`IXVgmm-~{fKQ#(7PZ9Ul~@L1+0SqPp+
z)n#0ABvK7`85{5$xLBmK^N(sMk!_L`!!pAt<SgemmGmqjX!9vuLqToWC&WLgSY*}-
zlB6`3jXGxhBmpm_iD(i=2?Y(etW%?!%sa(KnY{ZL{o)4Ahk%A*t^fc400000077=;
z*)UBDDu$yyiv^4L+{?N*2bYuKeaGB8ZKrevHGFwL(;(#oM$=&0(98MEXad|+SoC-l
zu*7<9ciiU;lTw?Qsk8263rDntG^QRXi&2&;D7+6{uEE*LA<-hpqbVdW!FHC5Ouz};
z6oa6d%;_?xym4hgh?Mb|I`kn^%q$nZf(f@B<6ZMQ3;+y#!bl;^QovX-2r;hK3-O+F
zP#Www-2z}~qzpgIzBI=J!ODF~$SFq>VhZrk^J}{ec$wAyFgsgLu|;1}|2{jWdFyTY
z_3o8o>w@je@g%1>(U7gH-WaciT3;Al!j^7AQj!H#6Mkx+D=|#>rD3>OlGyAeUG<Dk
z_>=Ne+JBiK!!M@l&uq85SJL()^r)pUcQ!(pstu1CDWC-cQJWfzxCDZ8@NI`Wyi|xX
z@c3wd(^%KA_3Dq+B3kwIw4{C2>;|w3`3*IiT-q7_7Yy?iMJXuR<Xl0F9&G0uAKT#)
zZ%C08*(-!LuY<T?w1nS_gAqYP>wyqzA&)mduS;!NV2EAhn_nj73+RUN-0Glutb4ty
z9^LH*YJ^zTAlj)>mFy)XEsyOtMm?~zWjJ6IXhJ!5I~!F(YMo>w<|QVggs`ERXIl?_
z1joQ`?BfSMbN|Nl%yeXlQ4)hL`frUUjw6afc>|VASi3AQb$|POe_zygYhkYSG`}GV
zIXQQ*P?CM(Rm#mo-PD_x<AD}R%)36#l1XgnbgTkuUe}-EWtZp3y2lG}I5bDhOuk=~
z{1<oz0@FVXNmuoRz5sK<9?3}0q3x$0VP6<`1QYLaY!6P8&Tcp17zzTn_JdCwzz+o!
z94oQ(v<ud(pd1N(<zL;p5dnqP_OBiW1yCUo^kGR=^(uY${P2L3M#2w&I+)OA(p)<K
zR;C8HWEXAhl6v|srm0qsdo~>qs}-qbhXQk?hDgy9nz}cmL5qVk`-xh^4Ts}*<c0vZ
zZ9hIm3Vc2f5UH39&3ao<3VTpf<m4oEDD?{}QG06Wu`>x_)>x;vQANoQ%N1jfKgqOC
z2y~n6+O+y(+C{5YMKw3u9Gv_)g9)R-PMOL#?zDpA=CTWYFYY?#)=~TpXX+zaf_U$J
zPr{_jCGk#aMCH<IUIW{lx6WX=pE5Kv+cVt5?e(OJ<OqQ&186CdFt*Z_AKaq{Tq9j(
z#)C+&=N>V5QWBrpb}tbqWTJf(G|LFE-~v!@Cuu?}+dV?7$V(5+9|+L@zBP4rvkFj{
z{(mm8od|St6J`Cf{?veJUS*eQDTx=j#$ey-YYl62{5dZB2f7K5-iPtCRzax+wvp2;
zyPYt0fA|~1jvTkJv9=YMm86qxrtpE?YLawKHsAYn4(nAmjtN~Cj(+TUqrdjb1dASA
z8;&rh;TNtm!b|3gqP5*tIzoy@<ZleaMYvDpr*YIhCAZ4^5q}-_++yJ*v$RiPrO)6O
z+mfK&q?wr7YAXgmpYkJWGMWMSl(|k8h$Yofr#4rQ6dcv~ZN5Kk`3XMz4}*mi06!Eo
zBUOlm(p+!gF8W`c=s-sf<L)*swXQbbb)E9(Wi*cJ<ZgnaAU#W+&vxLdB`bBzgL;p%
znZiQk%%p3bUK9CFOCcXnE$FxOM|cqof!CO<ll~9UqY78CeLtqKE_DzDK?lDI?1g>l
z?obQ9aj-_SinzEy(7XI@R4r?ziCzUD{72esGpH+<MHd=V0{Hg_LFJ<px;jmNuVC!)
z`n0xMKMRJUUI3B)8-n*!T$Q97mKW8^d!yp3n_C+q6YPshN;!4|e4)}=y}^eW%-DH+
zLkp6l^JqHMsfKMQVf+Zs$BD7boz+>n1zVw<u1HM<E(kNNyA#=J!f1uJj06@X${H!2
z0-D{*+(Z(Q{)$S9j22fzg`{?kx2EeG$Y*CVfgg$@5@tp-*rgAI#2Zdh7l)HZpsdwO
zCV{L_cA%Mfv$%M{hgg5b4%&yF4+x8yY204_f>bD@i0E%(CD`*@ykx4D`wzR<zUJq+
z4*CRm0d99^Q5DbvD;B5>DwW$FL5F(hjhW-d*Adfg9Kez==rrqzZ*V=((qBHG$Q9>^
zb1bpbh6B|*B>wgz^&eMxp9aKr|4ly+#cQA}XmMcFM;rP~-rQDh*Z|L&g$AvHD)XuJ
zp{gizF^S4|1cqZP0Dkr$Pc$w$aGyvoR;BeH4+N>>kPV$A!KywIfyA*1xOWAbSIKnm
z$cdfN8Lq$;HS(7h!(dQ;+RmL|g4$My$>O;B8(G&1O+^Bsj}~48trItwA<z-5Ud~8n
ze=(P5U%#7)ae6;^W>H{rg~Vf5Ai1R&O_uiUTxpHl*Rz45%P;Mi!LIs^+hWOkYGKln
zWq&S?T@-F6dPLP5Qowh(U!ZC2wczW0h-7_dZK)mLJ<%lMEtko%RirsTDawSiz1sn#
z*$R0&X%nZ2_$Cjixe{>LN>{b=3UQ>KJUTb-{`-ZYs>mA+Q9$350XY?X8n76PTeV$E
z^N9`vzmoLr?cl#eyoCV$^WpU5Z&Y-23fnH4x0|BK%FZ9l_N0SI4PNu4&9igani?B7
z;U>XnH#n~`|46=bc&QHRoQ0KoUDKI9OpBG2##KMDMTnHaHQg9JMy_$;B^|Eeep_79
zcRDG-zKz(pC53!7O4A45NdIkMt*lwJ#waT$%1!E2wZb3jYdfl#k&?eb39qt?<kH~|
z1Q%(^XZehi+Z9j)w)o|=_?XfQv#q7<G``ovMJ)Y%vmLAZ3-4SW>&z{U_lp$5zN2e{
z-EPIRm!qO|L~<2iJQHCRwwVFT7jp>tJwg$0i4i6(0kEM_lW%DJpzwUw*Jg#IZfNf;
z#FdjGVH4CY)5}VjsM|Y66It0%nhB_DkVQo}m4~_G4VnZLty|Gt!#ytofdP~@t?KND
zJ-lsbS!23#&T51`%T~d-WO6~U+ZBT&0Ge`FZE>=1u7}CalWnNj$J$OLD2C%NXn6hR
zNf*Q*uV6^PeKOFWP4wdiK3y0%P`6DfATyXyz49A`a*PYA_s?1k&`kmAbqCd5RD>sE
zziPbnWq~`dwl-u-cXpbdrrI~yGa$2ADtlm4s=kV@xFDPTAW_C$=HBI{$nKJ}X5Y9;
zsuo{($Y!pcvV8*Xv&Pio*zR74V+B^zFXLo7_X=lYjHS-*?1Kw|uTSkEfjjaH$`MQ`
zzv2^~q44Np<v`m|Y4^*!$zBK~kGoNNY1G9=F(7oM{sd5&RJH(ZAsh3<+2{`v!+-(?
z=nj&-2noHrD7>n5P4=+msQ77#@9n=7i}<k^XTU_{_O&NzgY{8_)M8DakIIv5J7Biu
zADhXndKfItUN}#`zc~Mm-nq(OXP%7{!z@a#K`H;?kq&R5z1>LFzc=k8R;CD)EJBma
zzv6fajoZ}e$ABpsGa9sqzJs4CY#95-NR@|Zb!9V`-ny=N&6MT5pwtPu6qc`I3ZY5;
z4ZyaN=STTr74M^atRu}3=~>!~p?m!%pvi#qfJj#$u`Us<0Z}5DV2-pIr|ebLw_e09
z$70NYide&OmT$O*HfD?nL;fr`4{l-Tc<7myD=}swktv>X`=5G|0|9IEAWnwfMaw3d
z<az`ZVsPfqQ{FH`=Vq&Iqq1VEXU;VUz%5p9sklocd{QAN*H7jM!H!H1vbR$};Dpr7
z<&b?g+B|OinWyELY~Ce!bwszj$gaJ`G|Br@KZ5`ohiQJlffZ${dzFsEW=&G*2<J(>
z-gxi_)4dF0@!FFOsLn8=hiW88S&_DHhh@dDpLdGIeOo>B-T}aObuGx2R*@BW9%V58
zH07bmgx8Mn5Qv*>yv%1seDuuOcG^h6D(B9YctOt45<c>YJ9hUDW#CK$7^ji|jHoyj
zs>B&$9darJ?Jo;-#m+QdRLbBP{2Tjo)_-itYcw9RY>U7&8{-FT5(`TN5SSy=3+W9G
zMm0S1u)xcCtZDIlz-4Pf1AqVk0000000Rb9@l`a5%H%u<0k6n`%Opr><^KW$evS6!
zT4m9v1ge<vb8C#rB$&P4my)yQU6S}2ZxZe=2h*Uxxc!5<KykFUaR|rj;>SI=dCNPl
zd{+nGFFGNvWd?*aF~hmvt~b0EkLjAOm~a2KlRt6bJ`}@9NL)G8{K9`QZ+}~*WW`1i
z^ed9QVmhW=qKOYU*oNn}Fnl8R`4a`>^aI=EkN4o8)wFeAqkV?|J2}}=66WV>0n1f7
zrQ()%UfaZU>tx?#6ioP-;_HY@NgFsX7_ZPqvT$nm=S6j4Vpf@>I5Rzmyj|c?U|2?n
zZVRtMN<xJ8phed`2Ow!mQOe9OD1|466u^v9Vsk{F5vk966Ro;hwh3N=${9s+0w~U1
zlm;z^QM*<7<M$YN3IHUR9Qy&>6V*rZ*9#2o668f{TN(grA$*HujEXPicKmxtZRoR0
z0{4i*bm`a$O>>WxarD7*XO)#^oXf=y@ClJHdC}?NJA(@6+#y6}^CL)tk&iZo-7Km;
z{*#ba|AS5Hu6wfSa>#~#H4$zVm#R7>jTj9tPZntHdN4=IBXP$MXdfHOkA;w?%eB_2
zflyU$kuM{=reP|{QDpT*y3E0K2_9t<34iSW6IuTaIk#5M^9R7H;AY~RUH_Dk4E)`l
z5|2q$e*3?>Jt)+&JrrfqN;idqo0JbVt5APJU#hnjBq$DBj2uGkvSV=qRPOuP^Gnvl
z6n`o#zCe~V$xr3oejoGw3G9%0UD6Tjt%$E>S+I{$u_Hr}euVhj%bEs{wwQD^&x2E*
zN`Omc$GPg-v*p2Hs7Ko6BLVYvo7)E7-1L{necQlzfj=2OY})cV6xd?ZKy^L@mW!KZ
zEgGV5GAj&i_Rgg1dtex)WkIuxW<3k>R>u~I>@-hmJiTHr^2HBPvy~l7ES56p@lpZf
zBwQ(6{&`ZEv8#FQXjgT#3{y^vCyv7e7lrv|l9}SPZYC@Q4^y5<RBe_Ms&O-ap#!#?
z(_QtATr~MUb>}zwzZ&YClD{zFPM4~DS<uUI_P)VRxbgsIEcTUGYx0ykPdTc4XM-*r
zQHS^}<y7H2C1nmCa<4sHvnElZdLt(#lac)+`%N0&xuF-EtK{=KxwP@exzh@U_yqn#
zjw%N))d+8~B^U74{3VE=IUMRjIc5joDS4wI4;AHEg9|+jw%>rBN}K9po><AJ+R7EV
zJw%yUW2vO3lun$kuL$~)DUw#!4}+v8VM4vlkv-$FIoV`X=pPCTXN5|9%sHeDN&{W)
zy&l&;d>@&I(lZiG>hD~Id;G@$Bf<VfEqm*p)r9^qVCiav7Dqx4T+9%6bH-HR06j~K
zW(E&yYyw!&hG*>YMBrl+6HtBU)BwoeNjGraKAD`ZDaZ;#P2&<pO)|*#g<58Q9l$MH
zTkcx#513_U1Y}%h-0(h2l27R<2TjK|ht%8}RY#vx9aIpiN_mzHrCDShAld1(*6xTH
zPIPhUrz~5rtp|)jrdrUy2W&2&qWoMV^Oxl>oSfrvig^~kAZ3>Obgw^vF`u@Me^>gu
zh>JgSl1WL~V`!wSI0#N-`C>9ah92Kc4aVWDS24c1C*{H?*@!8H`!`4!%H#pLGLbbu
z<;pDq*=1!qHU%nW9d;x?R~|yWJcPJ{5>hvL8)3*^aKGci*js>t>&}FcP`!(xayp@s
zL@ZS<P*3N-U&&ow-9jyQYO&5D%$N{DIt*zGe)hSPFU8&<sPfEkP!on`(%FWc)d7{Y
zvGt8&Sf{(j<EeZYB2V6L)&BYuA7tXl{@m*q2@zZv$H|@4{8$4_PtW9|h(<vegQXvz
zP1eJXMWkJWxwAi4rT$96+>P*@%v^k0l8~Py?YiN2U@$!+pm8@uFLh)zDAkerRYA&G
zvT7;fph&W4a$T#;s8@VhQRdlaz&Yg5PR&d5{f;rO(-i=i-7-12yCc##R^irH#Q4}_
zaF6H-3ZuOSO~T4{yb3H}2|naDO#G$(BJtsd)qCt5?|<*QxLRS7=Ua>RrcdYC_l=ox
z&S!h4c6(F3+Y=n)%FDK%brHNvRq33-@;**`bHopJI;&V2N7#SPQJx^696nmvd7XTx
zkDrR+yle_X%xWo!2_#wJB}p4bRTc2~^Dkr4Z24o}oyi3V7&R|cd^xw>Cw+dNqyPyC
zCU5yKo#tOMj9&HjW~dCjC>X$a+e$kA^Q4+VgxMqgf?~I*$58|A!aLKQ9n~3`G$Z@r
z!P2(HJoRblg<y2rf<~fvgwu@+Piq5*VtAzaF_jc(&Zw<o@?PE^&f-+1w?OnLY&qm<
zm}8VStk*Ss@a>n~JtMn;XJ)3Mf80<K7sQ?Ya%okX<tUi8BT+&8I2)l0tjo9Mnn0MK
zthGS*VlZlrH5(bcn(dr>R^CJa4x!`{%1uzg2ExgHoRBJ*{I-ZPQ&@fnYLPmy?Pb9s
z4~dz^^1*4&n;dR>J<}f`Lj?*njtLY=8?zcCkHHa|;wbU4a(gm{Bt0$aEz#wQ*!CV;
ziyv<>5o5v(s{_0!Noa#&wz?Z42L(oRx)|#oBs@=x)!!#_5&cfgm(EK<2hv(20OpVs
zFT_F)9}HPz6)i0Xd9CgB{;v9x@&oGMY4Dmp+PhHtk{~_h+rSe+uqK%Egg$kzw^GQu
znjq!Im*s3VpSMlNo7?v+xP3qYVzJLCBMar6-e`S~`56D4)C+gcGmBDmpKg}n!|dlB
zoyR*6^Rxt@E241Ac?OJp#Usq-Mag3-4OA(E^Lg`)7?C*;rP<EaN6oJ&Kmiluzduqo
z@cKO+-?A6gk<^OXT4|28PpHV`Z;!Kp_4f=n0BX+H1Hc$jdh}*XCLqXekKXn?yMw=}
zKV@t!<i8j0i6OE`KVS`biYf=N(2m;6;o6llYQPZHd{ol<aGCEY;>C1nGC-+9^K239
znOAgWrt&~!!L50LT5UK$Re9{Y)HUPPh8wo8>hJZnbr+D@D6Cuj!m8IOw});|&zo7(
zSk^(ONSu#YE!JU#$R$0ujOtT$j)c+rL38T3iaYb+)T~nuZj9KL$<73_-7)KpSE)O3
z&ld&K#tx?B`Cx~Z0?uO^f_)KNPL+pJjJm-lqN{vC*}A44FZ-bGZz8ZeQ^znS**sdV
z3{>14h@@Gs<lScUr*j-tr)Kzy>pov|Mxxe{D&-B5VDAB+=Pq~4%>$F0tns={*4q^Q
zZFu-DM01pijP0J##He7jE|LEbmHIGT93?k8?*%+_X2ANMn)QT4KSrT$sstd<a-uJt
z!iGMjkuKn7>J+Gv9{2^8_9f>-B>|=n4sV0Ihg>^dX}F+bJ72-V0gsi2gA&5o5&!0x
zP|XpcawSV!j`6^PT24P_3|@KcF;-5<PZ3rqj795GD>ja}<urhiCHN?7Aup_L!sfWV
zdq0|f3)zV=G=ycfJvRIp!!)Oo;E^?Wbs_cVe65k-k;p9KAYi(AXa4^>egBw3p>-Pe
z*Tao6r$5Ya3Yvr+B?^t|{Ezs_E9`nl3(q!tM4U^w;X5<4Hg!nou#kSGze6tX*|gc8
z037Hc7;1k!Z>^-w!T879Lg<Jz-_`%0rHJ8(G@YjfzwUsVyVzpP+FQt{DP*1|o_Nf+
zpYYMVO^M(HHR$B{=j-vv(bcwT5^ylRiw_09M&H`+lo537NG9mt38q7PphBV0ic!ey
zzzEy;6G#j|L(z13!nP=`nFr|S+4sKJfZ#Il(nP+sGzN#x+pF6mDra%AmqHDX8aG(d
zjJyn7=<ov{SR#c!enTyn{!=j|@a~KN^N}e^fo7*Y_x-ks%V=d7ii`uCI|Agi6lVU(
z1;nHagDI43h)@L113WucH18s&qEJkAh{RXBOiMIl!Z6`<1ufjNDQ?pJdf!dGF~Vua
zjWQCK;4c6G00000000049qNyM(&Fm<b0`@(Vq}-ii^GRIW#`YWnwj#c07NTRWTFJz
zV4HZ)eKO~9Q7ZPU)3=DIFrgCz<;E%Z#^RA!{+KO{^~sY!u?E5_X$0Fc)1WGI^{~v{
z<qngRc>{a-D^U!CYV?P%An=+>*fY9wMNT2}px=?!G0AOqWYY3saS-<FavXaF+D&EL
zaoU!x9%|S~+4u&#cf;6;V0!Pk1TxKK<O|nv48IHq$sKJE33?5?#TUiQhNZ_t?rz-c
z+_%WuZW7w8M6A_DKGPb6I-4;`*S(P;f+(2A&2$_zsq6#u*ns-UETwKxK&lp)u&aN~
zSr^Era9s9E)iz&-y9Ny#GzgM=90QQgLgEDLcUZuyho*9|CT1@4;nKcke0^Fwo#%gI
z((gN<^x3qmI#IFqG`wR6;C%rvnYd7xYAf&2f>gxbr&3CxSPp?gLiBkE5Isn$r!XDt
zMVDDSj~%(rKJt+_>yfO#=$&Sx{6L@4T5Fs352HlAmzF&pSVC6cPE40l`H1PZKoJ1(
zI)6vB0~k9ajr^CTc`9Hl=W<qtJLWt3jl{k(XGu^3iGJHHN>?UU*oG;0Jx8&mBn=~>
z2;W7K&3^;cphSS(&fdSdzcNFJYI0Hli_b`I+m@kyEm7%DobIYs{rZya<*a7N*=E6-
z&a2LyH$zNqtRR_WvKl_Hs09Qm)o|oVC1|;+Hn`?0RF9W2TZ!iP`vLd#0BJErZiY#+
z1Od}T$u@x&SoRne7Y>$9d96b4FEzeYld&k`(`4z=E>O!2VfRna2un{rR7dHImPNA6
zI-x`+xs84<RvN+yv@A<=G<vn4He0_IRf_)-b-j5eP3<*wDYOe6VrpW(9?vP-_rkiN
z$mR-UvByYe9ohj7@BB_{HxAwAyTm14!Ubh{r61~rF=$HAb^7o1hdpfo<V0T6{o%cj
zeTBXBK`G-zMx_((%9(4}CdC?I{+N0(d#Yy-#(3J|h5>^e!dY*a%OokyxYPp4b~Z^5
zv(@8i6b9+8-PJ8vZ&4>)-gT}3uDHXQBbdZA=;UQ|*M{@q9mpfg!8^t=gd6kdJP4j%
z8564k9|X$8+Gfmwf%z^n9$`upM@&ss*7G{B;JvYv;^g2_qm>>q=oN8Girr@(7CKKC
zKRPh{<gZxmHX<-e$1i(DCYog`lo_c3)V{kTJg!4VN7?7Kk!YvViYk9@#b?K9*6v#D
za0;O9v@O>i#bR|zDt0>f9fsTfO6Kv9PX4YP8+2)3T%V<20m9*t46%htb)d>_T$CyI
z-lLS902kDymGe-EabUpe!wD;+j@r{WcgVFC^(O}aR`+zk`|bOwx%%bsT=~`~^P!LI
z6nv;7L&+Lwg{fpy`w2FNBxF&T{}hkaFt3X&s5a5Xu0efkh$4D&5BIsPzLL;UYGq?z
z=zBTlx(k$ic-Nx&dcpM525n4ISuIBBHs#0n5oelcNrv}&_%g7+s;+KT_|cbU7?qj-
z8Oqe%mVkCSG4@U}42Ye?dJf4(wbOe{+<4vbXLRh&KHRrz17*rIUFgM&?`FwTpM=Tf
z%7(Y|cRk+%YC$0t32fcc*5?XpVBalzEV+Q1(17x$n_hiZWMa^_4*iH&m;5E-fj&&Y
zmMJLD!mVn@f(C{Rp$SrcECQzE@lliVUgjZ3`)99vpvhEN%^Y;-f|yMqEAt0o!`x?U
zJ19lg00G*jZY$=Y^6WO_tu6~Xw|P%9@*lDgb0heYv2B<wY=oL37?6t5C;YAnHX8&O
zDjv0?ha#jQ8sN5ipG~=$qATK&qL-@Pb7WBSJD1}%Y-V?(tpV&bZ%hC>3*AY+d7kF;
z%-&H*ql&Lx1Z~jZLa`FWP|SS5u!PSbJEJ#h6R4$S(8f=C2pR?tDG<Q1SgV%ohpm`Y
z1*t)s51qpN;C|G+^K;UZmE4(KH{RFEW=szazU(1$*iV99LPvMk$l61?S2n>)5eueL
z$gsC^MXH6YD7*?l_;eNfx<Dl;=&|YtbpAs@NBID-4|n|Xx*wCTZ<mirkL3rptiPmY
z#qZH=Q_d@J!STMoQ$z*JW@QYVFo2ue_#<j_de}ITePtX*9ybU`bv{r9qJJ37GpfSy
z&Pi4iLG4Ymo`&>;0jO#uBm>@y+ia%xFaS)3dcAS#6Uiw<GS)6vaU4SX;Wri!4x3%S
ziP=3Si1xEJ=fFssU46`pgv#AKbK&HSVYFm$T>)eC#;*${2dlxzldL)%NOPL2Bf~TX
zaZ(ae?22<?4y-0c#h}UTe<{rgsPE8f1Y-UNrmrxal^4R^2ta-)-;BFFwj<e@LNDau
zu?~lYa-kL7(7`2gMZtH&-7XJ<3A&eWw;lwxH;u_{rYSc`t(FSpE+Z9so4Z{g_tRsZ
zv<=St;Q6QVzUG)U^7L@NrqyK$1`AUvsuL=ekn=6`gyK0sQ}Kq=H@>l<L>k_UIjif{
zI}vYUAvH{h_Y}jMZeul)qM}L59iR;IRtw(f5`+|_#N<VadD!_-@L|3TV2ILbMFy{^
z$!@Rzr&%RxNfB7palT`XfOiV>SdB>Ax8Td*zB7?gm1s$LoA1=}LoikJbKeb9mx?{R
zL%Tq2I%!4u)Obba1}#u>=a>`3nc6#Za~%hd0QLV1ODL%veglecVo{->fi;3F<+V*g
zKe-gzt`^>GmjjGw&@KVebMfPdL4&iO9p5OB=TSTkE?OYOY5ffQ<0R4fZ4rT9dzD#Z
zyNIA7(yZT=2krl$j|<mlx&|GImZ@<LWkvZvkp)9);yDntsaIL!OZA@_x50t}SwF5Y
z4z79B!527X*1}LW>*_B~Z4^(}<(_b4YHceK0qtYVn;>E*cKhl*i*yS90KN|k2Q^t6
zX-~z5wYWtTGS(r4k*`jZ{5+q6GKmui{BvEy2d6zWy=zMT)`&oHyAZ!Bymtyyk&*dA
zo{>b40sKWf@35b4fXoVE6EAAsEAKWIqvB8~1|Ze}X3kM4^1Et%xjzzOWY@IcMF~T^
zcK=3E>thQLtxZzhie>F6Pzj4C(-%ixg+|`=m7D$Fv5}~Kq};IgY$M=^A)%%dbUN^O
z-_aGSR`H^mCrJKYK4hOY%g4@Ro7{b19`Mku>K_Yg8(?U@nTHXzT2QhL3`VhKb=U?n
zEM)o#WrycD{VTc<eZo97_MLpAP`tt!A>~U)9hb+jyk7mILs=v==oAV5c}V8}R*Nw1
zSh}h%i-?8-K8CqB#<@V9#(^k#p^hswG`Y(G29KN}H|Yg<K1_-)+$A=JJVmWL7wY~A
zPg<b31*8Dkj)^{qIma>AVTR0DEU!BW`INj`hBxmMOCKWgj7y^GPn(i@C#gN=6cn+F
z-W)7DlT>YkbhX6-lAJuSuoj7I4SL_!FIxqP_Wb?PzT)ocxkJF5nZyQiRnj$>>5KsR
z5Pz$HkPM?=<T2*8NvQ`F*SIBS&%S@dzb;$_hm7H+yTBfbQkg=I^hjdbRHgAr$pAeK
zuclQe01ZhMM~D};;CDJ7-fB?62?&9e{*xOK&FJY~$7CZjYf``q0L#-dNvNhAc4om7
zn+C++?$6(&-$s^}RHKkryy;?&&?T}vSZW=QP}y4v1IbS0MV@7w>K9ZjzE8{LK8P!G
zh3>`>@cLB$kh$l)g^uNPxn?8?i4{n!OWwH_$khyJ6J8#?W*nRnWBTHU=s!~)|6n3j
zrkCJ?g#Ge#WxV+t(QxfM_}2%n-l0WSVI1V|1eniHzyYDJd}uKaCYcj@^vn_)CeTHz
zD~J|KvMj4UGu~rHnl&ZrZ%@1VX~g!T0L-<5-+&{#0Vq~o{!>aadGrgSI!hQwnUKEF
zaGmYEvH5>1@mLyrP{)r7D4U)B`W%&ps7{9SCyD3MA$6CA(VJSdmMl3Z=!oV300000
z0000n&^h$rxc$?)Yjm5n6l)n0>s6EA)oEKK>D0`%S6kebhKI*Uu?)D#A}Q!Hqq8i4
zP$I!G-*OHC+zGQR=EIWE94*e%RvuOM%Z1Et5(UkN!a5pc5SE&Ea7*0i-OXj$Z%)c&
zZ!-nu4P$@hasIp3c-NkVl(7|^{`dixTydkXEo%|MDW_l<aU%w2axRYFr!O*?^?Vt4
zz%)FMfD4tMe|7+0ZRD{pLLi5Qh~TsD167Y0rJI-^7i2oKtZ3I184wPp@gM2XP29(v
z{fH}d;k<Y6+#OV?+uq4tXT5$o50m8eX%4*IhKN*jWI4c5-wb0YL7y0m`l|&cw*H^V
z_Q#I8HO6qJF3qjJj|^>!kL0%))-cl-2r{>yBBgl7d^%LASa^fqL}Yo5ZzeZ`gK(o(
zQ}W$oP~UBY=bC6$)&W4tL8B{YGkL7$Jplz84l2x(#2O}dfsv478)emcGUC09o~-L-
zOU$DDKj01X{%r7b{3V_KAf#j;*M&#(Qbwvz6SS7!Wy{0(;g@zB(%Vf*_wxGNZyITT
zZ)MY#&iHa=H9I3BN->R{bo<^9)5*o!n=pzqm6S7&pLHw*LUkS@5~YfAh@TEcFpX7Q
zW9Nh-q1hoVsawMr*&UU=WU9!mA~mnLWHwway<gyCH5bW*{^~>qgC4C-Tdl>cB=X0#
zL`b~3TFjFp<D#ZV%^YEjvq(h!@(4N2N|ylVnm4<3*LOUaRdEa<Z;R64EHfmMbZKE+
zyxPo%^i67H(4NqX9x~Z*+!IvDz&t`P|4KuZzZ*74Kq+-tZAn|g!LGZAa;FcvE@1to
zgXl!{<uWAK&!rAXQ-Wjs#*BofkJ$o~6t7msrF+>_ECy1!esNj2Pk8=%pS8dqn7+T<
zBIk4NV%-yHIro=VU@B~fISz;+RJQQ%qt4|kek?uu?nnQ#?{C&M5GtQ=;#kr-Z~$b=
zh=+DpF+T(cZrcM<7*J37hJ>lreslS?%ZE|j{Wn=ZD13I2Ovgv;ci{C&g7Of)ow8?+
z7~?z^2sor$4Jr9;F@TDuSSUH}-@#(S9mKPwJZ<p%NXlN!(G8XpA-d|!0PEvyyZdx<
zSnE}!a@Eo#Hii`%m9fp!C)eqsU3f4Wz^9ctboz&PWvsg_TlQ41s|NMotI||Xx4R;`
z(&EjW#MUiMg?6URTwLX=GrM9b-RnT1q`WV_fT`dADw!Nh`V`QVd5-Ken6A27E$v*0
zT)L@`jZwR*hC|Ky@{<7Exjt@}?{_QtS1~rfCtr{zU1!=~Un3Yv$&;=4AWcI6_(b&=
zFq1I-=Zj>6IHz>;59P21xJ%AruD?f)$u<<=KA~VraYdUBsKVc17DBR%YXV5KFL8k5
zk+ExF7Gs4Y{fwBKJ}BpJ1HBdSBB}wOcG}Oclx0lpKRRL!AxgE?Swq0+$t+r%=&I>{
zJ%kZW0-rt}+K!07id*0b9N%P-?G<mM{qaL|Zh!py(j73LKNn+=g+j?m?8AzM35)_k
z5Z2N==giesfPHz;(|aa7Ccj6m-vJ?@q4pFxlAb3Wn>kDuJ4_k<h^D3<+(qpMLls=)
zj4)j)xojaaWFMIp_p=&&@Sm_T4?AnsS+W3t>WaNZLk)TXobFn50W>Qx!;VMB<nY6C
zxvunDY~Jr`!k-U#;%tc&tn*8;55;~EgX!;IBFu?}_8)-Q^XWgUXP;>o7N4{nQTk}2
zP!L}*S$m<vNqt8{jpbQaUQfszWnkoBwxm4bZ}p9`&5<o~P{Y{_{#Oq?ZpgfS2PzH!
zo@|vpL^YZJNXY{4QB1}_qgB0Bf-LszXyK*tSsWI42wt!g&lR-2_R4!OgUq^18T*@1
z?IA0J7*eBEA#{WC(bYTB%H9uAk-E^I3Zpqg=+pw}J}5wVeR2xgn86}(#~<{PkSE?H
zV&{|^t;3u(QVQ^UR8bAgVpRKtbBwm1zS9Q~(J?i{i3_UxqRnCR*x4mNqB}#RgsmcG
zb!?ycC0^JYgSG0U)VQgZuTRZ)t>NtD4=EvrpEA|PjLkq=!w7iG@RkvN*RB~{tqL$u
z+qF1{_^52b^v$3`yNJF^<LYUtHQpE0-@%Tq$alg0(z=D$Sk~aqBbyXai*y%&Ybjsy
zR2P=RZ#6FTQhA^%TV>IWlFKUGkjAL!*nM88+7V~5DHuc%3G+O8cWE^b#l?Ni$l@r@
zi#$;^v^Q7`((!Qx=);{8A%<9?zVQ2)jOiaXoWa6+(n8Lq$=DV{r-aB){=Z?;Mv7(#
z1fv7V?IfeNk-k_AZ*w<|(9;H}P()S~z$UKenCO&`Nx7QhgqHJaotXd_IDHvxZbUPC
zTuWWT2a$J<BMj|*0AVUXmzW8aQU&T>7^YOl%=%yWd(sG%4#8d%IMok6avN?OclKHh
z-7>0+){W2k=FZzaXNG?+%!Q_`02bku6H4kWk$)XM9)qpSv?Bec@qlCGcPScX>FXHT
z5GMoGr#Yi`E&*>~ta+=IP&9dvYOcqF%&J+ahfN>klcn3vzf9w$_~fTB(}BZ(+}P8)
z!&&8I@^b-+CwEx;$c<aYj9FdK$+P?nfUpcZ{cezDC*yxhEY2XWgDy~+*uqHuqfT$m
znw|AmH}Wo;8Vu)K_ay^dQh`q{_)KhC0?yt_2kNyhvHa{GW@#ONQ6K`r;?{~t?1%eR
z>UVcLn2K+H^`^&gcogx=4A^i~6V{8$JLAS3VuL+=Q)jGy_o65KDwQ8RuAo%^N|uCR
z=E|9EJ)mfzD4z+8zo->_3n|=x^HTnl)gwbdB1Aqwn8f}iEF;SQ`)mk)vj9>7c53dr
z>f*TW#Dn}0)4KBt+<C<YcNGs2gqo&1k1@cpgGnsBRp~TVLubCCzwU|o=(r{Xgdv$v
zeUdU&PA<tQINJm;BnEZT7$!fAVT{KLk8K<b3m^@ab`0SLU|u&oiCAP8z-H!oQ?ROE
z3ET-$*CFBwDo4<`BJtVihYX~VQV#f$N{`*j<|(5WVyp>SaxQ0NQQ1(*L0-$Y!t&4O
z-9U5tDA?v?j^s1BGD`K8O?F^@bT2lw>O})P!x~vVMpqaV1n-w)!UGP_Ipj3EZ)@$f
zaXc>&(&<zri_n`}^TofWtx^~MA{CEpdL)nXIqKar<+Jt#JN>F6EtgoDyz04XCAeiZ
z-GT)H#(nX9<NVjRE(W8>!_!4rw4p2E65q0)_R4#M*_WD{<l=)NHc07vIY^niijU#6
zT$cpgg{8H%EU@oa*o~omg&^wjYgXN*76}Uay{vPo^9tnlaaz5<daxFnkzOOAUn^J+
zm=jRx95-&;!ucsRcpTe9_=`kFrYI3R^dxkRANfUmz^oA`-P*pdcuP?bN4*iXx8n=W
zB@9}6g?05eiodozeez=-)v~$kE2(xM?z@9Z7@vnS*_SsQ;KCylF|ai>fLDwcBb58I
z8};e^PCIg1eGkvw7t68AzfC(WDI_QM;<Y14w{2N1dpK=jLD(5JkHo}&9g3Ln*X!_R
z*L?1hFQ#s5LcDjz1CW!*;opJ^@1}pS|Mth*Eb|hd<$eU+<#_pMD(w4rl0;8L_|W^R
zE`kkc9gTXa6BTbLU7$?^1-jv%Y4QD$uq>ig=MH%w<=VUw#xF{!MhYtPE2yy3G`61@
zA>=(aNBBK}q3GZNd9=;u6#_us3I-?%hk%p&%@H{YX9496Qg$BCjBuhzUmw1US_<^n
z9Zk@3zhkg-tIvY%mx=@zZRNB?P1#8!J1g8yh5F~#_{`DgyKtO&eGmx5c58vLhK<hs
z4SxJ>H#r${K)@d!3@I|*HBe0}M_PT|s@!yIgB}qf#49{LhFG*+z;agL0000000001
z6Mc%sCF@kW`^Zg`y^WD=g}p@Y6fZG6m^jbe)e7K9dpC0RQL!UCD~o;X=M7#a_51*&
zS2kXXyS|3RBsYw6cLk%qkAnt4e6T0x3io)~fognz3wcaWCEgICf-y0h92O;o)iAN)
zkOd1OXkz_w?I5)tFF^uTmDW}0(ewg6-~^#;wGP}Fm@X5*+n!0+56xW5yAcY-@@9Af
z30bEZ_wJHu3x1)fq^Vz*dMp4Fz%=SD1ojZ*=y{6PEy35STs6lW)@7gZ8Og{D5m9?F
zwAnQ`aE?2Zl;n(;=J^St)PP??n$=kN>q-%%;f>I}XO_TFt9e9GRKeOHBL{qb(Jzf>
zCWX1x+~D;mW9gwl0Zt_ZTr~ti`i&~l@Zm!?V3<|vdNtiz5#D`r-=ae!U03F`rIJEQ
z6GM-=>QlArXZb?&KghWwg!r!<fVKwKm_PKm>Qd=wOp3n`vp+eH*YIl3uQp9a&Tjf^
zn)2^uplr?XZqgxzq9ShBpmcL%uA^d?fhN?qf)4`-Y12QQL9s$@@&oqXc~=nGlAg4%
zl33_QC|xTDT}~~$DQKS#l5y2py(KH|7uoH>a0<(Y7pg4flu{EMFhW8BbDCX=CVOdC
zpGFlG-o!Ib7B#YjuQVy{?l(uIz4xNDG`I@%Qg0B%ogV+=IeUBJ%5*ek?HxsnDJ@+1
zDh!@z?T<o)9JCkjGCKFuEX>09lccN%2Bj{Qjv)Y8df42UHJ!9lg<Ys~<+jAEPYm|v
zQb-eCE{>US*MH`unQ^?VKDYuSiUmHyF$gh=fTeK8#`^iYdzuAdPn=YRE5(mfJE93v
ziGUiU>xOBQKC~5XDr*LETH2IB+(b-$UJ?8L%Yc6MJWqw^-;xxUq-(5?ZI}=wRvObV
zkm8V~{`7HWr{~TRQ2$Q<V#dRNjy%iUsQmz%@#7)P)+&|P6_L~K2o_$vYp+)k;pm}P
zh!(=60+3mQ7WKwhOg@wfkfNjM#;O~VL5E&n@Rtndvjhb~N(A>mToCCg56Jf4X<ca%
zMj8ndLM|JGoF<P^15fXtPZ(@6VVaXunWEBOSU4~y@`Amo+2lcR_X`H3LUCWQzW>0&
z^W(*1H4vEUY#F?4Dv)>3Zz;CcCv9JEs3@1}MhIDt1TMLI64RiI&?TXE*qwq?<<JQA
zja<&D0YC2vwB!UI*pEg_-<+zf0G#{vzCGFw&oCoQlwdhpQX$Z0iK}OgOJ_Tei96;*
z7-H8Usb@CF0B?sJ(y--#kIzeoSZp~S<_)(aF^y!Q>@bAf6$hj8SWo7g^SQE@80$i;
zW<fEL&&iLP#hd<BR$usi=kcrvl?_9=<ED`75F0&-VCx_$YmZ~1Q<R1|=He)h!zB-8
z5~b|1#i`Ba<+yI&Vv5@jWzcK&h;6ym0$u1sm}>IP$Eg#kwV*KVR%?Q|X;z?d2)!0{
zvs^ibgx5vt`#e0#p6X<>u9eSyZ0*%PqIhBRMG9aJd_Bv{tM<U5x{|a4<B8WpU6rwf
zd@{p<<V19)JzgGo*`#PHYVbD75!s}&sd7s0qYT82dhz`)sU??UIhS`+)_;v{kNI!m
zY52@SF_IB9V!9HP5*OOlCi0Twed}@X3fb{}Qk^3f*-Y2S^wPe@$)mXX_T<V^C_)LR
z-Q4#*aNXb!5`rNent1~VSs#RyrPoI*&e8&2gg$I~-T77*>W9uOuwm!@$0YH=ivXgF
z?b%*mpHsGJ5$u8Lwi9X<2WFx*xomVyPt)|g278+a^#?wDP54rgvG6Z@b%I#mN-r8}
zeH2qLjx<E;Fd-W#-G=$LT!Bc8fs{&um+}Z9sJXKlUUOaG<%m`osj$Hg0_ZFh82P~o
zr!Sk_Mf0(IhsH9VJy8;tiF=)fDWpN@FL&B>$ALvg_uT{Hj{bOhGregZB>n|M*rkX8
zCO4+5x(Ph;@PwZ5!B7>U$fe(2Pa*kytu!q~l_hs6^GF2zJeqF+_I9Ws95uPRc~7V9
z?tT2WGe${F!1Dp;)QXZw@6NL*yMm9hsD*ujkaJVtX~XZWLM&{AH<c8J@Icoq{{6Tf
zyXDfX9~__5Z%P)Vxi@}4;LW|sJ#q(7+#BRu&e>!xEiPcsDWJ@IL8l;CR&w2-N*u5l
z?W7gKW)xtO{}_r~DX%T;n4=89#^ziz=qrJFw5|j0MuOC0paccrYNcvJ{PC+Jnx2ES
zTtFcJYS)m3QjQ|BCp-pxxA($HMd#ZopLB4Omv{WJ2ZedQ(9Lr)e&Vhj=GrAH7Lv|H
zQx6>ogL~=*3ckGVK~&=e<a!?zbTVUIcMy3(_hCnQOq8{ib%1wCimhI1G3yb7Wgz=p
z{px7$+|@G<gb%eKU6dRBtzqm#WFCIL$+oQD-`)5jzeJm|MJEm3=w2KTaCXOh)-O7J
zg~x;qj+%4GDl6{>+ETjP0HX!5-_&Yw+zPj2QewAs`uiaEJ(@S`@~OB$Pfk`8Bib4C
znwy<}Mgb1*4P*~FqsKjU5__W|8G@d?fSnQ4T`zm(XN&MhJgAlRw2W9np5}*JUT%fz
z2y<}kOYqU9FH5{{r9$1LrMNi)LnfOSsMOApE_XxS!y-wGp6BzO=%_Y|#d*6a)ZDS*
z{uKw)SznQjt2k}^bL9xwuU@<bcZh-^<(des8Ij%6&{6{;!4Xx7P_fBtE$F0d04=Mj
zIS{%2z+~kAhzk?Pi!Hz|E9v=E>WH}#(7iqyKpTlw=-zf`5osu80{^S&=}Iv_x*DRL
zJ}bP&kDZ-w5+q=(*e#o<&Lg@>c_=Qxbpr2-e1cGEtje{0?%bWJuU$#l5g8K%ohPIG
zu%&n?6Av3S)8k`{AZo#GOk@X^$&_)R*Xp<XyeTzZhkRnqbu;r1x8QmJfk1x0MTJFs
zyEp9`ZQMizSji2d750h-B%{}2HeP4O32rE%LQH<qvh~Ty%;Sf$pQ23yDVx0SJ(D9;
zK<QmQ6bZxhcVnPraClC{sxP9D!$*l5%s4$%Y?lYP?Ln-Px3$Hl>U}6lWt;*!?4WRt
z>VQEl-bC<eG&&-_X`s7etL9{W6=fiL!6A}~mQn<3=CEdi1u=qxxbfbBt=Der(MYez
z#P~rk&$N|jm+2X5h=%ghWRMct`WIryg??lW1_voO4gKS2W-DGPad2HqgIy;<yxTYk
z9zkOj0Ylync9hS1M+}lUSi_p8`noU6#l{2yzKx1T=nLh$nc7CFi+ew*^v33F?Pl*X
zF4J4E_g+oV-B0LKj_oD?ykKn^yk&tu8wi*57UX{R7gPd&o?e<fMnMw@6)RdG61|r4
z(AwLxl3}@dH8iTIDMA4Di#*HtuANQIV)<@~qm)N`rs(ZMONwV`uU@XEy^xQ~?OFlV
zs7vbCkU*Fy_C{ygrRkfp-^{ZNief(&po2;7=k*29Q8xo1tkvK`4LaA2yMN}^h@Am&
zz!eUtm^L#2XY%bGl6Xo1&r_s*M?1CI)I`%ri4fnkz<$d4s}0nr^lz@v0j4LiB2Oel
z1df<xxcy8x@92h_5{ZJhxI6Kg+3B7O#Yf8(iEth7r=33<n|LcSNr-#s!TMS(yp&*Y
zNjaho9BsgBcnsS{bPn`YQv>yOhl!lUI)3leXbTLG3ZbKC$PbARJ!NN_5`ah^Exv2B
z6F|GTy+dvk?neU7e_ZOTYebvVm1~+xN8w%mfm9ARUtJBKgafyh9?h&TE=%?$`<+T<
z@#J2Gah!e}<H~w!;pbZ%YnEPfze-!WDfBip1PBmBoVixytW5I(#2C4vgAwE1kT6*{
zv%;7k`^b`%Px?`1ALnNSwLWJCRD0tkBooR21xJRO+&E>x)3D7toKWp8n<S>Qk9?so
z{@fGxpa1{>00000001;zYovi_pKNh>(6+(+D`iKPj@d|mIkT)RJywy)409-F5%;($
zk*OU)-X8}N3#{u4t1Ge;ZR~W<JC7G{D~oQ!CiY^orE78$6N5~X%|<MnxMME)SZtv;
zRyD~NN=!k@TGfiRsTO8sCQ5|6?|MNfhsuck^Kzc0e>K~|U+}=PW(W$H_AqU=tm#Ij
zMK}!y_@dA+4KvDp10hK(+-~C=c3%yQ@J3gFs&9BMs95evid{91li83(N#U{K{0}!K
zt^<a-FBwK0JilwF))9QyC4TM<?TLneWeVB`_nthAtijMq3b<P!P>&dUs2E@=j(zmz
zM+Qy8#DP=`u)4%D+B`Sd={4S%xAX7bmI^x9Mz@(yRnkDA1N1)v>8|e02$4}cQeDMK
zs6l+N{M@;>%-5b`?b#uPy}4-r?wG=m0c_+U-6IYYEjP5j-#t?>0LPuThZ9e*u-&Ns
z*FtW<tRF&HUt>khX``=lKoQfJ-)sj_Ea>(NS9Fg!R8*&)k_-zETqWME)fmMasrs+R
zmYL@QcH*~nU!RS_Y}sM`JiUS7gtJI155-oy^G-LDe?!+1gyV}}ssR%`7g>GYVE(B8
z%|yBjkjXhDPVrm`N*1W$-^}~<TwhSOYAH`NIQgfuMbsW82nrI96ZY19Bxql$DZEzP
zO;m!RO4*Gq0FjILrC<E4dm;I{DgLE(K!K0Nsv`E|F{B!~A)W&fUZ*942T7i4)16-Y
zMaBCM01%yB*s+Qg%wy=Y)F^*l#ouW6N7(mk&58tK1%$#U5>+L(rS63EU*g+3sJ+lv
z%#`UyZ9jsX(4K{$a^)@^tpu6q|7Mx>rvqG4vtQ(!X5g<YJEz&h!+?>7zi}Y*K$PnB
zM1xDklueJLt%0ioKEy$lt(ZV_G)1JUz=#=7HdA5sEd@a`nFToloQbpSsG2Ddr?^oc
z`aS4DVpFrRprObepVwV1RHP7|Ou^zx?Dfm|0Gnzy!-obS<-_u^AGR<W7AheeA3BF#
zDM=gW=PZJ8L9=W}@m}A%US{;pTNvsG5S7iUFDt}U?O21Z*pTN8Ut0PqFHIuSZx=TT
zT+rCZu-Fm8J56!=2MuKG2vfwQdNf$DACivBq9`79S^ef~DW_h)@!@_8&B>pPRu$%N
z59ab@C7kbg2BE_GHAC_o;9P~Q#&2{cPLQrK$4yx_TTX=o-8Ml$K><^JBA7%^fRn_J
zGZUoyx3c!>+r&?y{4wv5mUsfid{nfGiA8Io&*hWO?6EVxAwSw)PoRJ&JJYE!e&7oS
zwkO+#E4-CRh!E&Ggb8QxqT;N^O${Pgw|g2@>mfa^tO3JTO;8bNb0(d`Cz^y)FMEVn
zL|}qLP^guTeRA%S@k~E!)Etw=MNDzkNTq8mxb)(R7G_8cLLEgEuB9(5IYI)Sg2$&|
zkgQqnzPk6}AuCcgm_TGFvwpQh7NK~7>jWU*I)O&wOt0>&@Z8-Gh<oPtA6*Aa<2j<;
zb1hKm+N?^-`sDMr3@lG#u}*wGKM+kAtlavV44BIsZ6r+Ihg5)nJzF#^#jWd+EAXf|
zluTddk`Kwyr-SFL-<*&6gGAg2gkZ(8DeT&yLb;|umLox?8*Bzr#CaU5%&e3&Z5F2`
zslZhVr-TC)gWht=7o9}Lqq#=QxNqrW{rLY#Y>=n^B7=!t?)<_J!YZ-^(>t<!vf!;J
zR&*O7f-990_sLNaPe!=J8M~v>Rh+OI)|X0ueK;ivHb}itS6v!v>_xr%ICzpSK6e{!
z!PZfYT%QHS3*NM+eTIVFNTt5q^FPM0ODc^1v3PG<fBD|L|A=n>4`|r)H#kG_&Pz-e
znZUz+LLDoWMP?Z4I2MtaCT=lzxyIGgpb(T8mm<UGDnHB%+I}f~XK0g^z;mT2a}-e@
zefS>yY#hrkqL;=HnADtbOCcNzT~qVZnVn;rU-!{=j+g3Brx3$RRT!mF6ZggR*BbcO
z%NimX0JAJ3EJA~uDhrLg)rUPTU)bhX_gJ9?odYzhMLgc0hF}T_dUX<hnIi&Z6kEVE
zHfjbSY5*8lI26HIkr#giBwc~C7{Q-B=s$dO*TCBqUxx)ym{C@1dE{=)@IijZlFc4v
zXr}&_QR(~H=7t+OT6@LxhgzWPRG^b-H6Ok(td&7Y0ixdVqO68+|FnP${m<uNVkkug
zfWv#O;Hn7mf2ZV2@wRRw|L5PSMnHRQmilOSEq2<uAR(4}0*c$skVh+3)ibR8h_3G<
zIYWdE;VwG_{JZ2JRpM{Tc}hh4?EhVq82br_J$2dsS*b;Z<Yc)cO&@N0hu6FEdM(bx
zakie|zxT|exVQ;hpK63ZU<!k$(Q;zH(t*uUoCMP2>%3zrX<K3zXK=Oil@hm!uu4$Y
zhAhcd8s1=Om3v1DSNrf5fH7u!vW3f+{ANW{qL3@zikm+>P{|(#a(0eG^fl5v<+n7#
zgeNO#N|nPLclp(h%CkC;R=A<iG9MP#Uxl5J_TMJ`*{?rn>NA&+Msi@x09C%0Ny<Kd
z)2&ceOXYo3|4OA0L89}Ml+~s=dg_+C(*Fp_j16y&j#dJCXyEX%3&467nch1O<!fY1
zT1=GdJvk@ULqRmU$F)T#9ADU)T<v>6X8Jpd9AwsFiTV770HBF0b%gYa^s1cQ>aWyS
z%}z2%iNXca8pe)ahBnH4*tRgid4XVlI{%C-9dFt}8iwDNOJ4Q+CB|h@gdB9eF{tK-
zHp<#`0pF1l<#P;U?k2_z^q~P2EhmM5HR_$J65zs43!l#IB<t(t^Dad2puNO_*2ly+
zRv~YiazUszwtr=MR~4mhcP0mvk`}yk6;FrO7Z%QW9{IAP!wa{Rx2-kbX~vKUHf>4&
z9^}TEsU30Nfh>~xFFMZ+!fImykCqhK>138Rx+O{s>8RxctvW)!gvljjn9CQU00*q?
z*v*#U<c4G75axIPwTR*Ma7I)199O?dQ1iR@A7ZooN|%t67AsMFBEh25;bPDAWwdZf
zKR3%LovLR}CRIpSlhKqcG80wdGwDeUSETBszS<P`b;ieM_4Z%L*#XJQ2q<#M4m1&3
zf;l!r;h{J*okw7Od!OAH`K|TiqU;)bQjCs&Nuy1<+J$vi+UX|LY$y<_Q24EGWlyZn
zk;k0`6Uq)RxkQ;8R0;LsW7S13uCNqQ@IXz1_|=a1^P;s%SALjMM}||fN}=D#4Xk?B
zIHhH-R}%+p8M3x6DJyA3%<fOe7<JUZSE(RJ*sq!47!n0?5%`3p=*SQ3$V~m3UgmX?
zDe}>*8#CQ9`axXK0<?UhAxQ7jXQeXhLwZ#(5Hv&;3UPq2KH--N-)KJL*J=6q@_5lX
z3~KxIO*;9Vx!UO)r71x(B9bQHxMHbKD~4B-q&iAsckj1?JJjEkp)4OZm$N#1#MvOH
zOj!(~rMYg2ge@?Ni^7%RcXo)xY_3sOFmNRZK4omBk6|aUcOLHaxx@R({sIy_mN@dH
zfxTrsi(bgJV;{o^p3FO=t61!s@To9|<&VaTKdM&mHerirnqTI$8ri}skJYlxryz9C
zmYI>krm7=5?tJ9Qi7%vvH3aMs3zfB<#o?|p0*`UW<zhCD>lSI|Ul*IY$E{awMUCi~
zw4lm=tE&!_*jSNpkPD=Lp=I^Y1`acxj)guL(IU&ETv687>gjD!+R?$R_#i9~_UGyi
zdemGY#&MDyY>D$eOP+}XHpP-Yoi7^;O(Mdo@pL)9kU)qYgFr6tRdUXDo~*MPA6_4L
zZMKz3N9=rcG-*P~QJqXuBM#lnhQBPN0s;6%%n;(84^k|OVjqkkxR@&d0000000000
z088k`lWqhL>UgcPRmMBQCmw-oJh7oYqJuf+gM<Nu))|;dfOWu#G7n27H5%$nxKRzt
zEF=O4w5|_YZ7bALpu$B@>A2S~0ZRRp9TwsWWwEabVVdK>D>TXq%1jTyjj}km0t+(!
zQ7dwOl6=jkj<vSOpZKR*-{xnMK~`=f*hBCT)Uyp6a4*!6dNjRbJ@*63wrB`N`u9e>
zs<5=gJV@}n3s6@vPMEoil?s!~xI?*74+2$qRNva}*0w(^f4zDfvW!FBz0=tFz1g|<
z<$o|Xc5D#%)KXFlhFK50F1iD(WQVEE@L<1tM<tamC672^E-5#(TEOCk*~y;rVGy+|
zHW+Vl0{COuRa3q-w|6p7#C*3`BY-+}#-^)`N@~I!Bs=`*j4Js3V!^Iu*3qy{r`Bqn
zd~R*fBYjP=hJ}rnp<-bgYsr*>wNDUh&xqW42KOjZrz|D*Ek7<{A}EIglx|ctkxLro
zLR;V|P~Dj-gd7c0iB!3!h*(Ql8=s-J5tnAenBM0P2se%6WFr4xosFO=lMiENto^w>
z+z|n&js?<#;18awISq{%`?c2NECY$XCHE(36!r+3l^XlmZRJoumQ!Q;JxH8hP(3}l
zu&7@c;g<L+3Okl2&4FcKef%sD6RVrt1U6)<^%HZqn_^g}=h%H-*aKx4Qd)rqbt5dC
zmsuqGZxhV<mW*`;Za_~Mh87`N?F6p?SFDSzOt=y;=2sLaGCRJgHwvwaq~;YQ&!s_~
zMOZtSaMih80suQ)B&fp>C!n}iFvx!P@mq|&3f~#qPaBgD-%sVO{!fd;khS`!wE*;G
z?yqC4Q?BQ=gQ}*%k2|O*gJQ9H^G%I4_V0YNyQm)|3!Y+mO|;|ou^)+ckqrjO-x(Ei
z0Z9Iv?E`HsI#`}?m`YYPd0A7Ano^k%ytP&?)~m|<6av!MGvAJMA1+WoPWO*LBVm2D
z3PA^j4Y|guh&t6xGet_}Rp#h|N|>Ohpn^E?Z7>XXBmVBD%sdNI6Zmf>7Bun`&a%br
z+v(jlTVE3YSMhJOLL)@4&&$)G=cNm}TBb<hqC3IzLq+}#yuv80KEng0RjX^{@*%l3
zYRxj{*1q$nQ{<URb9W3~tP_57(OpCbV|>j#rM<UFEErK8F-`|~iR)ZTr%K;3s?r@D
zPz%TX*$}0;O+=XhDe6GETaNh1PjmVJ-|Gq1Bn{^}k}<3m>~m1gC~t*&2gOU^TNIPg
zDvS#Z6THUUzN|y4ipaeYg@g!`JpU}xv#I>FB#9rHiKKM>UCtdWpd*uYKY9~d6|C6G
zN}oN;N9}td=Z5%9bi1|Z;<z;3+gHt$Ji>*TPe05@8aS7+d$zWVX};Hk^IeKtUMG~^
zxsOl5&E$vX^`N*PC-adbdA(hfs}2WPXd?Q`Fl*MI9<$rqi}@N}fOcYg#RFL_qX=!G
z6}-Qn)k66|x}GGs{4l7OC&S6)B2kDWrBfBy14mxW=pqb$bM*(lp>#wHhcI<-m+=3o
z*&$yH+Ee9>bqy}OJ&V#3HYAh4+1w)VTdEJHAs>Gy_AsG$-=^&<`ez}8;5rtAB$nl$
zA!mP{ah8z^Av=-}%Vl?mmy`Glt7ct!<k|i^E8`X+xEMN3AnarO(Yd%9$1;sj0v~Bz
zhG!{%Kd#{*Ii@ma%dhLYBS+a+V?<}<R*wy`zlV^h<l_??OgXo(C^|Ssdb21Jou#=2
z1e4W!#}ceTSLoFFdE!N&Wub-I)2&J>D67>oi`ZkDXink3Te{UCK4Khv=!+`kGyMx9
zrfo%gBOI7-7Ui!tk+nrzEb-iZWH>>yc$L0rS#oiwHn%@Kf-|}Otuj%1upqqYDy1dd
z*c7#wVoa9(?LCh;1;dS0&m}<dBWps`65{E&NM1cdP=#uWtO@4JgnpigEyC#}dCN{+
z<O)48L51LppQNp?D5HKQvRQnr7F8l%=u#M3sC<Sb5s*e>;L-@qVy8ZUw%IV&b{#^_
zdo}g6DLO`N=m}g~@RvAhRJ?e^wvdn@wB`0))&(A(zECIvj!s>1apxlC;l<3)-@_uJ
zw)&aAMl}nE##}0zNx&Uwy(pRP%aUh%s1_bMQo*3zKb-1u#60g^=Fp3)TM4)*;?NG3
zfyx!;<Sf@OANIg2YJ!lxbN(2w&<VfwJEe64-5o*f&2`!b=1ur`YW<_7oY@09T}e9^
z@e6H4R^*(Xf;$`}&|U{A2nucBnqF9u-+#p}aR}<~AoDc-ME==bY*CR&nc<Arv<0S^
zgw~~Yk4ZlZc0tGLsr#2kdP`q>aX<g-FI)1K6Tfod73qFll=`s9&17$=du<0>MQAh3
z!(5@e(wy~nNPdNB1}+9}%z^1z)*E$hH3QSF27e{H$!t>8)4&IHCC`QFiTw1oc?7&s
zs7VAK+!<iANK9TTYP+jYjRY|;c0(X|&2~YU*>5EKEW=jr2T4T8LIv!MEL(Q!f$UJv
z|8|mgnS`J(%R5?5p5a^0;m9ROex8K#%X&wM`VOSCedN&)3!^(7{Fm=6mLV-6-%Zx7
zWe!kF2dc}W1@MBBCWkDWV$jN1Qw2sY;O1i_OWSSWF*NRT9za^(ioKIK$0@0^;^~D;
zVdsT(>crr$pJJ*bwc>nUcR|8r7|;{W2*RY#WS3gQ1lQc3uY2iFjatH16Gn<vR|olP
z>sQlGLy9Vv*KKCaS>)Xu$F7H3bgjEa^HEEbdvqPT1(*a`qEZB5CsR0$5SuuEkeH>5
z?i`X5Zrd|g?QE2-9FT4a%s>JZ=w<TwxCa8Cns1AK_n(!V`S9s6QNNjj62Zb?n%lo*
zB|v^5^CRJP#xTHUGRj>qx_odTG-QO)8qc8`eaOS^!Vx^o$;JDiE2`~;U%6=(^;CDC
z;I50GrxFhol9_&n$e&k#2I5MRH)buBliIV+I9_x$A$2Hto(PWll`6^0V^AHUIO5$N
z$J9w89HvWZa9RW;JpGe^ba!LE|3{J0n^#V1C^_j=g^UN}#q(Fz*5RGKEyGQIrQ=dU
zSm9DQXdW4^7xfkupRQ{5jYmD48~7@9@(KDp$x~XBB|Hwybm+Oolw#qIg87za<?k7z
zXR+V&3EvH9_!j=xy)V5blQOt~|N4JSXq3}UEv}W-`V*9U_aM?$d_M^~fB<fhZ~;ea
zedpFx)MNjp`s~!iW`Ao%;;DmVox2PvyzA#a_&E5WOmmYe3|Ziq<9yMxm%_rIxpl__
zZtn9<K(xm*9zWH{<jv1e4SM)=#rL_BztZ>RYGDIa$*nA0HcCTzL~e;9OsQ2l9r$T&
zQG&cq*dw$+?R;~)f>WnQS_Bf5{3D{*2qQu(o0F{<Q|n;HYaa<&5B{HDUak8))CEZ^
z_R(aNBrVf$jKO<G%h&*4?JN?nEUIy*2b-{Yh-$M5`BF|lJC<fK=>@Y@K24O$LIN96
zx2ob%NvOIHp!I{m8=%>ijz49V8B`$^b?9w40E(5X`<9YMd>Q-DW|oDV%$H~!z^37L
zojxNn*#YRoR`*Z<0CVQK8;IEY=-{g6z+0>l-t0&zt=%6UzQHyf-FsNfAUMK+gDs%!
z8!#J1UW-C_-L7Yr5&up2U1U_JsEBB$25hoim9TEabopmuCvBb4ekxPxG=a+VX3p4p
z5C8xG00000000Sn3(=UFKVB@)kMUC?sz6}G^4!VB$;9n=S^W8ZJRtm5JNn)XAwg>g
z)p#)ik0Ku!8ia+x1QJZ4gSa!TYaPhkwyLm)0peMK>IO<e-1#Y^84U4PuaI{o(^pRB
z+!bpQIiMDmE0CAy(jFkTX>ECk@W)CaydLbJ56-Pj68mp|vP~EPSvU*}kFs%w-7?bQ
zALQa3X1fnOAWWwYdoB63N&Rq3x!V8R2E#j>{RU{%@X?zmpSagS4S7kRlf4i3@#|`S
z>3@UkbMs)7vEU_;6PYEMME>)@SGvrLi@XWX0ZULxR-6Chs_jTNPbER+5;Umqb=#lO
zD$+pW`!5%GBu-@D><lHO#Zbipft+=}_XZory0F&GNx^eAbIExU_y3)px}?)hJTqyD
z4oJ`+ZW%9={iBrheBq>uI1(DM+aA6mi}A|Fdo-VHtuHxByl!H!XK~WArfB*%SANM6
zZCe|*30(@b6?0V%f?QgvHw8!Y#kv(kT(FWL5RuHRX><mGl#}TE8%b^VSAE7K!<D2p
z<q|1o#<8<dA36qYUK`od3hAJU+H+4Ma>fQo!ySeXNaBp(Q2D+KTI~h>mr3-OyAF?*
z)kS|eV_V72>q%ksQ4Fnfg172BcVJkVP!=+3cL8CfTkP1%eXtjV9lIFN`-U?T9X~DF
zIWV$4|Jg;Ex*C50m;`{797~oVPpxv~4zp{%QQ1PE5AwQ<whsDz-BTtgH$JHNm}c~Z
zdd97RjrYgr7Q*V?w+tdV{0F|G!r~1n=3UG~p2|Fs)8%bU6mBs>TOz#Yjj%M=4tl4y
z7L5ulc9(-kxG4R1z<>$a0h}L5oZArD&)`kpbE?{nPp+PA8|;W-UDuTk)z+*r1Eb^7
zxNV@`uQ{cb8A0uz-?@AwJqLEs_;mms+}Y7cJbFN+7AemvdIr>oU`za&La=Grt@x@2
zA~O8`6<{$1407d?G$y$6K4ub=OqEA*E52(B)q?PV%^Wa_?5ZcuXAHBvZ%b8TUT|!O
ztQ_JUtR=8BK|&!KT=jB{4Ve2mqcYNuMpyA7$AWOIzt221a{gpZdI(Im=8lyJpC3%F
z$!>kmDf^<t-nCm8F_R*s-^tom_@UP)Rr7jdOR&!)k59KKWyW?Y;o7j=$Yd~q4K%|$
zJthD*zC=K?H+>Lx@3^CHMyzPs=_qOdFmK$|RRH{Cr9P@pRb9Lyk*M5qFI>wGrs8dn
z=J}sBmBAonxgdz)XlmfQq$5?O2Kp%Fd#2*{5(rVan&$iIbk((oM0n}j8<`N}%m}il
zFKCu6OdUYpB~x@_xdZF@QZdTCU6MW@tM}k>CmEm+BMTHcbPjfszORZ<^9rD3*lJzR
zpIDngtrZq94;8;`fU9$u@_wIgI6%9dBSnw{czm*Hd$eD$Px+?UiK6L^z4$oB<Y9uJ
zSnp{YRu;Zj#*`uWj?{0=i?+ORvZ!q(Lkpvf+Un=td`PWm__48tNiJ*U0XbM<Mejqc
zZr`n|8N8oI8u8?s&{C%teUcAT(;G%7Eld|seZagC=&&-{UppCz589Um^xRhrVyb*3
zUCkrVpq#bJV{HAcGaOohdRb8%tnZ;8=VlwHNYh(;VY3-qIvi7eyOE)w83fl{9rAM~
zhsg~V|9Z%|A1UEV-6vQ3UtT#=Xv~33SqL({gL~UvOm~~UoE*m_H8o0~=!YxL*+rqD
zNxcHMjmDTn06verg-0V;NV>gz_}%9FP8qO3&#liRB^r<8yKJ@+MIPUd-vRY|X9#=G
zOXxFUjDb3z@mwLpfwVVc@T;2-^WpM`)c*F|o&kF(V600`_0yP@Tlme`Tpm&(Wp)ZN
zrS}=|sDy$~0rn~9rWRZFJ-ERCrP*ksOiU@1to!Jwn)>(sG>_DB^Hsb+jG4Ou5%WQ@
z#A4@KHA>GzuUvOw;*IQv{w5CfRCihQpqi@aWAZ!VJxuVfMt-JI@8yETiS!P-a=sQ+
z)p`Sh7JI2(>Th))(Hmu+;j+{_jX_xuWj*i~A}YLxsc=o+_?*2&2nRkxtz>?uxC;hU
zON~q{njV(OpTe;d6`SQ4Ptm5lU=}Dj1cNnDAm5~L7;pgb|8xx=U~Ec1A-*lAuaS7;
z_B!#(n`z>zVcP?3E*-O%A<d^-+a71*dE3uD2Uo(QD`#JQB`SePeijFcS_8R$#96A*
zQQY^PuxGXUq4!a_00!^^8M^cH>5h^XMp8+tls@xdhWAUY)Op6qGYg6ak7r*R&&(4c
zS&n+Is}t+AXj7eqe`8Y-%aBXvUQOLn-<?{z$ak}+OV?cys13+<dTR2RhsOvV;n60g
zsIRzR(7{+!;JSJ!BycW%n#S!>A;UWjjqyR`qI~|s_x#0e=PDv3<KoSHBe-hh9Rud6
zX=}f0bstcO>_u&-ey?8whe9jVf*X6q&Om0Eeaid&3s5_I3C9xz(hauU#LgBH9p(Z=
zwLr`{K@R+fCN9Yo|1U&R)frHrD!-`&Q-Z==m4X8}LH-t#uak(qo?0bS#XqMDhC!v#
zoG_amke2*z19cB)`W6eF;r(_teG*Nl0Ig4{DW+xwLdiF;md{KXZjauK1r(;RCnh~U
zd2|jDFcj!$XQdSf*T^3H{aF^3FT#=k{W?E0e~M4l$Qj?#U6co1jJ5EvRJ|<<;zS>1
zZ_<JT(V<BWI&f|G2jB&k3OZ)Mb>I!1wgYH($_$T^_gO!EiU^vYovr<6TFQ(~VtLZu
zacgRXK^^;MwBEN$*%8aH8Z^r3Wmc2n{qh61iMJ#`Ph#AD)`1DTLQq%01uj{PK^2@(
zVyVqYGzo(6`!+_E9`SG})LhQ?>0C1Ic3o;)o9x5s=G5VWBvY}uxAkdZ*X_~J=+RGg
zkhEX^dZJxymk7ca7)F)DX#R@cVM~6857<u?s(7f0-GGFKVnXus{rwjOuqB`jx~u5k
zbB1S95P@i{a5hG;+ZBAg{k3q<LQRU{O|@A*-c~bgnDt-)p~ygo(zD|%HrOl>W)5tf
z%UxixeLrOA6AZu5_kvTZOXB1?Z4^Z$5UNPSvKbF=npq|loPT60nHqd32A4LPX_lQ|
z0uA+C-GpDyE_ma}@(<s0bWO!>@KdU9SOxNZFg9d_QRdv8(@Nr*Zj!*rZW!(3vsL+e
zI=-ic$G$`$fvkcDr)%+NH?j;b%lBzaoU=8<;tsm41*o7MMWe`2rbFlxNdnfHh;GLD
zl|I6~IuWPCaF}ZUZmA&2Ya7egbsU-6)tK!s2g~;JS(-+niP8EX23g48)R&KaRXZoW
zl?i7yq-YAN8hP)0lQLJm61-z?JO3EO1uM;OuVrzzRWD%45XBd=I_k3<k(sWCs&t6e
z7Z%GLOt_>u3A197m82kaU#|Ac;snTU-F(tk;sXwo$l`?{e9a+ZT%sr*cn#5vP@u3-
z+q6=iumt5@VW4;ppCLzRB3>LOcf$V|0y=^u&Z0q^))#K51L5+QYlZPC1X!Rk>5FH(
zpZw*T$CV)AR9YVSJk+pqsMz4W3Yu*Yi5Q62LB7LhZsQz_P%%%3Jc%31!?r^QrrH<Q
z1luq83e4fQC0$Tv&d+Rif6Vn}5HT7g9HWwt(bC-w*N{L8cqAjbqT}X&gp@vWUr&Z7
zY4iwH>U09+VuJb*!<4m{4rGlX3$I$5JXp^tB)r1YB>(T&&>DK;jMPZ~Q-Lt&qbsd<
zVapKTaZ2*rvnVgf*I&AvnQkA5LgJ-+m^ARl9YI^RaTq9|e1s78tJgb#0000000000
z002X$F%LmWV$gb12Ubu=GMz9VD<e8hbI6J4y{NJ1A#k&l##N%tAEEP6X1BPNz(^(I
zTp&m=WJKo*;jw!!w8K}kSJfCf+CIu;!FDUAoS>SDFZy`gte6?lp(QhfHb3nv*OK4~
zgVZt1Ih>z`{6j*LlYKg79o9K!&mHdp#BrgRuDn|EDxWbeu$hkMm-I)!2W9gH(XO6~
zv<vac7mbbaVoYr6zZIYzSRJZ`UBgezBc~10{{pEkx2cus^%3M)AcW3Kh*cIt69aH#
zOG6^3p>Te{;QVQG^X1ep!kTwHm}!vdP*(wk+F1;N1%)j~r3cS5aFm~ZK^f>Hun7k*
z{4m{MIb2J^(X!tK_TFY4;!X{#eALDi!dhQ$n_f)k3)JtGh;h%B=6CtgF+<Gw(D0q(
z(kNM1o+C$E5I&6ybxsK)WerfhZ%U@L=qa3-cl!K)iEw!2h`z9shZ?E<z|1>$%(N@p
z?;;_QQ#+QNP;SA3odDIYX-g_6n8%E3!O((N;H2Omj-8?j*yMEoCGQ$j{}HD+T`Up3
z$0Y>XZSK@m+DA`{aB5_8LCd>H(gECrfl?c`7hMJ7NJ7m(mioxVwO#oIpv3uRBGa<d
zgf77{+~=CTvz}GS<~e@ie^U>oD61dbtkcsT0T7~%XsQO^2pRtJyUnfq0bu7pEb%Z%
z9$&@K804e-kadCR+B{+4`6Y;J4~w3pvvq6MQ^96ZB-p_3X|4vBB#r)ay~?>;UJ*OD
zRQR1-q%7OYi47&QyG6_O6)|!Vx$%bLg{;oog#9+_*%1{(+ck&lHyaGJ3t)q6;Kn?|
z1WjQd{bo@LQXTqD-xM85a+b?g%9liQ(+x#z#adYvTAj8r&Gt%2^5Jn+fHRrMkzcO-
zdUl=UeZ<e5^-!7YF%TOKlfy7ud*jxd?n#QKcWD5aIWC%1>vhTpKgj2J-E+-Wv3QAB
zLi<ds_}P(ia`EI|QH1j@d4{jM^GQk0`lk<duTR%Ny2eu62Av@Q!xr0*;+UTJ^8k3?
zlU0J@Rj)X)?`|n5;at-fXu6M8viGU!&!-(0cQeA_a$;RQ4JK5ksGp1QnazKMwf<~m
z*aI9~W_y4NG|jV4{3=ja9$@u<>nemB*#{lP9!(`O?`ZD^kRO-xO914=(VvFWuI%m`
zOCiTXCsk$1E-k4Kc_XVb*~P08Q21V+zN~{YAkH|OjVP{y_LmYKM6&AAp+8`oK|@~r
zy_wmHf=^8x$~IqjrZpzPQ1pcScAs|$PJ_97T-N|!r;kc#d1^$c=X7ohIw(eYm(n#y
zU3?Bg-^}>-$z1Yy8*gyySWiJ5P=7dHA%gy+^&H|hlJQ_39us_UOFRDLfdUSmQbb7q
zxtlF`8Jqe{8$2efymy_{ZfX8Ub?-?`bb~M3uLI_FF#@|6*)ZwMOXc;hDZ0kgc2&6L
zTnhU3-B`?(fZ|Iporj-L`{+uvy${HSp0sy7)q&=v7e5@9>RdT{4#VouJT=qv13=to
zy?}ItPlv8nK+op2iQ!hUw7G)_P*zSqNYEc;aYKdT6yHasJFn@ZF+M1aH%lH?3VlsK
zgl!1Z&$)RED5kp?`TRI_P<WS0lDu7Gb+S_2(7c(k)p~qULT<T6;U`<|6poXt;52~q
zWMj3O2aQX&=HbwO!bCp8m4%n+wCnJ@j@sfl!f$J$tH(tjKm2k8j2mkvJae`ey=Kx!
z+nT$bXZFk?%LSTQ?2&2$@p*qI-fBSi6u0FGHlDc$UKd133Ar}MlSvFH8&)QI&R>k|
zt@{rXJ<lv2d)g&xFuZNfqiJ^;9>fvGLz+V9QL$-*Cne0SN>LYB8%7XdaaX-RGww6-
zWI0Nv$W9O2J#~CLR=PzgNM=l6>$HpY`17pU#NUJ&rY_d#623kQ^*h0+EUr$-K%<O2
zH8eR6p{}ROiWuobuGrqS6}mVF7A6x?uz3wLuz7kh#X|OMu?LcIIWiqw>0H!I1~ryg
z2z-3aaYG0CU=it{EgkysV?{0K5#gvI%93wdoO*tekz0Ww5-79^sUj_@5(+zU1%sUC
zr)iE#>=FI@1s#>z&oU(CXhJu3vYb%?7ha7hH8`1`j-iq$)FG+(B<jJk!-Hb`R-8@+
zJqKtU(l=vbn_3FG_^-nC7tgymjuRULcOg8<!*KR1+)vZSUHRKQkUYDc>qMnL8%BvF
zLf&aMv3;+0He78+CTx_^ySQR@*2L7<#wmg0)WkED00kx<LbB8D)s%QhEq{l|#jZ;~
z`m)x`4T7a!;4qvqbW3eX=$`{#Rvcx*i_wxJG7|#w#oqI_C<VS12x2l*>jR+8zD%G{
zPSt@|+oRg*<-1!qD$#6M088eO@&C(I1AB{h9w6oKG#MF9*&K17__xbKl7+Qgr3E}6
z_)f$A92|E+15^Xo>+kW7sY5Bt4RtyFye;jo_Me!!%Us(}fhmlh8l3(={_SdI`;%^x
z-{}am5L=snd26WHZ+zsM3ZneYLo;6;J{&>fdMaG_+a{5?*^IK*Gu<il2g3h<L9Ys|
z7p&ljrL>{b(m!fmmv0*}4fqwR!`z#ZwxhFh+&S>9DA-3|eEgNhm~jc|6!jt8{rbNA
zCHD;i<*o(>=j5othIS$HD%K9bT#Li4$gex(XU582Z)^00jN4G70L$~;$RtV!{^3Ub
zVEQ1tV9_h8(sP%l--q7?AuDb&Ufji?8P#dCpbtZD<^C-3{C0)6K>f|O2AdwxCOl&g
ze<_j-<9(dt!Dx*hPa#fB>}@?%6xdhBQjlB})eV@9_$&rih8}&hj`f2DMH<AC1SAxk
zcEjS(@IJGQ*iBUc<(@&Q&9)`{o5FEj=O6;c#K*3Wic9A`N7|Lv`Pp?k-3*c$NbB(%
z)sutTM4#-tqeTdDVR5=XxA1H1CajHjTo%oyx8AfuTT7Kumr=X9c~YRyoD;_bOQtS*
zY}T>$0xpne=w^y_Q!+*4@GC5g)juCcS+~K!_S&hUcP}yz@OJ~39stKU37;^@%*!TC
z(ml{Vv%$@TwT;rzcyhg{X1DS({Ydy>Co4EF?9<Q7MJ#0}a{Z(D6yDpAKxYSUW7|5a
zBduRdHD7|fI?<8niEDbTD*#=FuXFJo%eHvxhL~q!kN`$|Ojs5QA~!c259<bHa(7Cn
zR3T@@ZR^a-K)OfBQzPK-gc%z2_xlWaNB}kwNY`f|1#ok)A;-@)piJZ7Y6TkBJ(8}7
z__!bW1jBKIY$gFB%RWL+;@w5J>=3WLU(Dg(z%m^vY#!|`(CS#}Bp$IO33ummoM{|r
zv*U!3s|IfPC?UY-;mnl?5T=kK!a06GH>GT^-P=5$wNJ7-)1N;BON&IGL3|blYc7SB
zTCak2A_(%Z;u!3&%2uQ)%L?0N-*=zYyNMX<y9^45HIM84=88axUAN3>fxrU7o|@UR
zZ6%js;vaT02X8?(6mO9&0Nx15U6XIYP42tBIK$H70V|`aCAZaalGTxy*Wx4DoJBGP
zU!Y2Fzp>rZV>4qge#A7FitUqnWW;)*f2YRnli$biJ>S^p_MVVyGur)$S-fh7^!+|y
z-BJC7sXx4N1;Fxk^_Q`H<WF!NepeJWOA7TjAe^Fwb!5B(2RFr|=}mSaytTed8Qc=j
z`k*7uqb#m5)gfO*C}+1IEVDBjx+o$`_<a<?%5d;T<Ny{z7Is9XO&W=m#`zt;n~MUc
z{KQpsIW*V%?)V=*p080K3YwHbDL$@<rpnn}ZjY3s5eW&x6O7`|wh?dw!?uC8G4N&}
zo&Ep-0000000000CG1AK7xR02XFH>HxmtA<hq8~!%ZPR<693nIchH8$?w+&%d38sJ
z9IPXj1f)`~sdoi**8l>3!rx(z`iMH3^MoOuiEj@m4~<Z~yf<JNuju80CWi2G4TOGY
z58(F*<q|}hdhiRbQRro}CzJC<{f}zinuV<VPdl^3KAwX9?^R%tC3agppM`d28UJ3m
z8JXm1oKGbLuoT7GmTez4P>-X|bt~5-#A)06?@o3a9ojHF-ztK<&j-OT&0_hFWaRX?
zc7BoFpzkAH@974xF-2oEZyj>jddU2FTF>J*Y|()qo84Hioqx&p|2^g4LHUHPdH$qW
zVN+cc5bXSufTR75;IjYbPv!OR6d|>QMPTJ14R;^QYbDT(XkOL88kulr)wjrwM&-rA
z+x)ZuF}Y<8rxwh!;DO-yUf5{ow?pSkb37(V1en@}&VvM|>zPx-IuE|YW&!*z;RIe5
zO`UM%_sArC2R}cfoU0xWwK#=bU+sQ=(!;3B=e8lhC-&BdmeVu66HHiqm6-o+=xR9s
zVAi#puC;V2knoX;6`?Iu=+IOiT|wG3bnZ8AB(hY7wmg!gZR3dEKPiL4m=ND$!vNvH
zTiC~YBQi(D7@mOcq#!ueb3tf|E9r#e^E(h|Niwoxc!^AMMOm;jNyPtDll|w;!nP^r
zX{EwrWDG+o2Ooq|vx}u0`Fw)c^-;}%92ec$MdVMIXn|jT<7S_9k7Z<`(1w_UMuhsj
zItBQp!;|X@#h*U-5#M1)_tnP<Glq|$Ty9Q|aIJHuGIiE<#urXP>UpqtGMSy*Rgfsr
zp=M;zY<KWMrOH*g%mTYi{hv3e6sWHdmUcNomgCojf0GQUVB`7?tHErY5U`w`$aX=1
zCA}&*T^8CxW@O5C%y8@>f8Msn0%Y&;AOid3x4MTpyfBVwYFm06xCFFMCrs`jAM;5;
z%nXG%*89wK-mUxflyIlzht!~<`E{pPNtfKMoa0VabR9yPU=WTZadG$GHpOq3=8D{A
z7*{k1_!Kv7=#!IhF+$HNSSQRC-%j4LVt{>zvv4Rg0KLh|K<jVON2!x;duBY4mgO1i
zOfiTkU0~&!fS{nFo82#fJgOfIRP2{f!iJD#^9P(oO=V|Lq^zg`K62QbWYg$}=b}HJ
z>sKU#wuS7KZexCw6=t<^I!c7mPJ7KXsd#EK=sFF-(xPnFBQ+wSgFxviwJo598@ZwE
zD+;}Z7X@x6D6SjN#-Q{+&ylZ(>>e_-gdUo&b}L{rP;KpeFQb20D+|E9-8GF!B~tG(
zCxXALDWj$(Pt<2?PPD*i1g9^M8Y_Z%hFN8tWorOsKP>V~0W~hu-<fZiu<KWCtoK`v
z2Mp$+6jG{NAu^F@sPhmB{+o`+PlZTKOD>fMpJoFE6BX&DEWW1m7sqE#Z?E~f6C`NL
zM|Wf@<|@YGRt(nro$bAuB61^$ad=0#jDvx2$;TOL3~<JS+9w$vT3|{F+83^%Ayr@z
zvoE70?renO+t7n!NCj&zt+2xrk!=9RDaY<<bK2-+T0X4MEWeeD`N`$ry<p-5mflnI
zJDh^}L$X-1cGMK~3XJ=t`?@3&*#u`G`GVl~ab2EquS@NEqOrJ?KvQU2naapMMIDO0
zQHB;76@cuUzP!D6=>|C|;NXL<X8X#FoWzM58P|K2^}J)hWRvn=k@0aTaG{kf;-5#~
za+kAJVWWz*f*W@2wTnDqE}M5w|NdyYqs5IEvxjD3m6yu=AKl*NrD?Z$HpKL2QT6*_
z_c90j0S2x1ng~UCD#SP7g@fLxzU7a6>Fz>bv%Zll&ZRM#AUFv<4lN_Rmp+1GikvKH
z&pav_f75|G&P5B*#x>?FVR{NOG~rW6H42Qh!4*~K=h_TK4OuqYLu9=YA|F$4uT!j6
zwRDJvq=$J@&)Y!%QaQTqdlaUCq-PmC8!$s528{KemSdW7|4^f?g4#~o^?#qT)ver%
z`<_8>U;qZEqF{_#c}$G$kRKJNva!o!ec+E&F|;M^AyP%)B16$8lYI!uhi@en2|dTz
zY3E?N3}<I4Fvd(Xo~mCKzJ{7qtf;t5gO=ACSY+XtbI<O>pZmJx)h;%UjE<nD7~QX=
z9ju7;6%9C&w}1s0YhSY}n0fMNQ-0|6Ssk5G>3qzI9euF3)2PmWRa+Bl<RtOJ2pz&-
zGzXPt?M^zQf#YfL5vL|t``av$Pt3GvyZ6;!GvFE`{+|mBO|p|t8FQRcprWJRgd<Vq
zUuzv0$BTf8A+J|kzA0k%Nl{h^sR_*=84(1XLOmS;qCh~oUEUq~h|R-6<NBoo^oj2k
zx^2)}dM{L^pn8!GA%Z41$<GUa(Bh$OEh8LM%v+||bj!W6vsw|~kE0_sut0K*qst}q
z#wmhR+LZ5V*!K<OSoTer|0ue$1>gfCY#20nHYPZFa{CA)zlR|jcXqX=%Y!Hmx5`51
z$GC2c(xfV$vB<d~WiE2TaQUym<6f++-6(qVlgDamfw5z5`w)N$a!;aA8Dd;9w$0;X
zG`jXd-lWc+U&H#%tMZsAP^FZdtDI>z&y{BdrWA-|6lcaO^>^%X2UB3}=_WtwNV?3a
z*a=hzm|r`Z`MpE0aakL#F~&Jvh>CCj04^8_Zv!&Ol74a3{OZ1sgGky2W`8=#E9R6>
zj8rSkS%TE`cM2HZa1ixoIQOBfgOE4LwK^T%Z%DYV&Vx>(4LWRw55B%Pz;~%}fJ~0#
z$9hYt^Cmwd7qDSBUMc>$khUt|XDeqO*T)f8(~|-_pXuOsC1OCXB2I*Ydlcf*J>bDS
zzAC|ZsUsCQ&WdIPLTA7gRNQfhj+PSr!o?Qpho=>Ej!pI;XhZ*o)VdjIMGF%=1Sjra
z`D+NqtYNY+rsi2qSfUMoaYa(=f8M|35Opti2%Z?p#)@PpLpVj#YdrKPkZ~@!60xMS
zlG8pkPki2O%-y5Fj8uqI0mwV#31a(}V!Q6{uv<)tKr!ox)$p1U+9}Tj5R{Gzwj)<k
zv}LQ@<QL!tA+n67ks@f6`S#*^vhZ;0xQVnX$HV6xgmG|BBbQ>Z!B#ajA`P}vtdIZ(
zIyl<<o)gu>$BR`2CVN?9;~tgf=nsqf;p|*n(7ID;8Ul)m5xF3*H{OW)eFBCQ@uYD6
zyS6y_{l*h-0>PblEF$kwX0*Gm>uQwjl^$di^}e(FvqR>U4%e@db}gu=+|Pk>m6YFe
z`B+zx@9~Hl%r~eL2Z}RyYBy-`;!pW;Hbweos2wa-Fuy;X@Vx~gEY4}|5lRPdel4iQ
zIvWh~!90%RVhvpSVCJXJK`4D3ykPRbWLNhr?n!vz37svZb)Z17HSsUs<dC%W8IEPa
z`xZn>o~ua8$Ril{lcyUM+g&6qK@Z5#?0^%(B=c`QP%{j=`F}g*0fdc~Fo;DFbwJxB
zf4Sbp&;cjLp^!>&l4t^${av~)xsm{<d0Hhk37C_OOdhv<GVtVKCUddQgcXa7Tev@q
z!1)ZasNISP#4pD5g8;jU<1=@K6C|Ggdh||`c(;Tk(*D57&%$z1VAs?c9psQTyioI3
zve2_;>TD32K?KV;7BSEy5n5VWasSV>a~FnAAwbPiU|^Sjt3J9TyMO=y0000000000
z7~U9@szi?B^2^*jY~8(!SMJ|G9<R)ncnKv(@2OJy&d~3F-MMR$IR-ghYt@f$Y64BM
zgLqj};u*vm__5>}uVK(h#$!vT{FgFO!9aJ=tuvfqP^p!&b71@ALXN$@w{R}8r>#X`
zJiFO?gvkv_Ip+LBjRRS+Y{{XE9D(7v`H64Qgh%M{6A3rkhK<J|d?guZ%4k(7FCQKF
znY4-^GPGdi?R9~XDlbshrHCt&F$<J<##3?L2_|Ubp2S)qv+9WW;e&c9mzA6gGjYj`
zkTe==aCaTHUn(+&hBKw}AF2xN_dR)KPs0E&_RuDQP6%#R_I!x3&4zj&xS^cns0X>F
ztB0BDR9L^&t0v^?qp*_i3)m`YXydq;3MLb}$qaxC(5)XtCSVzQefh>HUh%n(`uFp@
zdWtgBX5tf3$%$OwB2f~S#OKr^c5+@s)LdK$^Nfxb0*$>&i%Zgm536VBZRpe!nfG2w
zaP4Y|$D+x6GuCg_rXEDdh3OPyl+<-;+*UB%Gt7@k9x~Z`*!K59?HYmR;i1x`f5Yjl
z7DpRz=!PL;1rr=wodjixaQw;_@L-7hnIlI%0VYA}K|P}GHrK_3h4Co`FRl7g1u3@V
zK=%kyzq4<Z;KG8=<Z>`MXV#0GJXoG2C#|B$d@l?kH^aEtJDz~i1fD5-h4{~0DpoK*
z3Q`)!In&NH9I0Sf?ee6LXYi44s}Ad0VmyHR!_~uVa$Hab1m%fJ4U$$y4kA}-{z?d@
zlNf1dTWR+-CO<n`7={dO=4?Mg321_y@}XMzq17~lvi?NZ=PWd8#~IlkPV&7+Gg-mQ
zca~PeyfA#4<v;3xlRnvE<2o?w)+DwDg#1pH-#*Jq7f7OSmziKPofS+iH~x(Nm<1D8
zGp8IIT<d-vS9e0#nhYJWL458LQ!JR@MWPXmZz-D77zuhw5xt=0@IPL#pW)WE^j^a9
zVEoXPMju8$%9kM^A{h3O6ymXTv?YKY0MR6BFK~5e>%n~8ldXct@ZN3rNR}PF0s30T
zds;PxLilAhh`xLuL(gVKs6iFsEgr#AnAPM-(qA@^y9#$gny;N!gZete{Q8hIc{a+&
z`S^!t&7EMhYWu7FO&9?ni5HEay_sqr^_af?W#%&iit*{@IdjRH*sHJl$8@+vVw0P<
zHxW6z>k45@)z2VT@VS=waeVH8ky54uJOZJOiWw%8_>$~U><FSX0ywdQ(c2>jcU402
z2mj~e`khZP+KcGEWsHPfRBhupAy33s#!XX~L1p#sg~VEJMOSSY8@9b=+0s{AQEomq
zXaLlRcr5lJ#PNx_;<CMMm!uAgT3q_YSQL(?#k^-M!ndVKE-jq4@&n?#uGN~#+gHH9
z<I>BgN`_mY>fnN8s>@uRI4OqPfUc_9u@5>mbon0B=^guNEbG2LIc$wTV$N-t&f*nM
zQ;<y=N7t*EcStb^By`&>uLMG-y5_ArEgnKCy1a<~(aPqof<yH<#C*>O<Iha}dYoe0
zWjL;EyU*=STC!-#Q^Feh%f)nT8_j(GNnr|i^;A;^Zsl}MxZ0_^jnq1%Q;R#mZh`vj
zeXYHqw4?~%=^LVL3+DG|ez3W_m3D-{_TY3EZD0U8G+H-u<_LX9XP3OHR-jR{YSdLP
znCEa$Gb1uag({oj1hw!fMq*Vj>p>Ed0g^TW1ox1AfT`&;!FdA^lQM|T-abvfX!PIQ
z(REHRpNf@Jt}8t&)aJ&=D6eHWOjcnyp-g){i^QxglP6kaRw?GG1L|&i*QFE;01dQq
zvu*C(YCYL&wJ|i=sll|&Ir=`I0GIWdzc2uTLb&}U$vPU`3#{NZ#z=$|*5Lc;lAGCn
zQ<Jv;hB5tHys|ma*1$_Vvis~I+8OTSzAVWJeDE6I|L<3g_4*5+DvX{&Z~*n}AXJ7D
z*%`neT@-ui&}^^x`79Dij;ZY=GeDYWqke&2m4VO(v8t5_4NgAJUn^{M>mOnSiK{CQ
zo!9ALnL=WOw@OHM4w1|VpS0-R;}O-bkbW}P*bF)Do`nWJN)ZSyUK0t(r4kBrH3kx|
zVk^$K8J8y#cB)aXD05JLItw5I%#!7SjbH|hRDM%Cgzrvvdia}=vxeR>V<H3)HxGw$
zIUgf9JJifm9gdQ85AeOtP2+SxsS*Jx;#8f}k|^4?Y|FN7+qSD_*|u%lwr$(CZQHha
z*V{e&BSu7yjGnDI7f1AO;pp4sE#O{CS0X2~0{KNX>BGf<Dh7{TZXG6dx_i`8qH5*=
zK+cTa@){ECzDKC!UCJY~HBP^>e5=XlmbE3q*`f%Gy!1(m$cyUGcR&Td!dH|<h&7wl
zh_NHlA(ohJY(Vp@?ZdyPuL2%bt!!+Roc3OlU{xW9p!d{8@K3g((A3HgD4UCO-#;)J
zDa?rr;iu31ki?&^(~ehb??5`{h@9pEg^}y|<cj;_q8zFq$~c>uu%mb}+q?Cv%1$sA
zy_0QSf7_h>5-LJDn9<g15Np*Mq-i!00jqu8{t9V_>Nf%Q4gDEN()TYhynP8uTYKt<
z$jI+_g+Xw1Bp|(`GK+zc$69Fh7`=0KG>w3?%(oyHuqjgv4k5=J%%tulx((o6MJeB&
z!GL&KL1TK|guP)1jLXZFNyvwYXcD=-`|Oh%&<U*E-SS>$EbW!SS_5>gKn31x%QZUu
z`KCQ?z!W(+36M}FTp8T;Qw?j4=K|rYLB6u8PQE;txyBa87m(#|drO%;9~hrdh20w0
zHM)f_dXM$7=OCN2A7Yq&RMGTcSCSYJX(_k;hfW$^tIbk5G`yq6Y{5q#+Q-I5Z!$6T
zQ5`i$rPv1q?aNYygWhuUj~dIa>x1o*3HoWq`$w3tAWY`a53=va2)AOm{A*1)N}dX(
zqaD&vQUM6WiO9~0!{bG%kp^mk0m9$z{NGDtnBBKM5aG%7U}*?;3RY`6he3p)Mq}#i
za3YwvPnAu6ZL4<ThnUCPnq}rHlfLX9394Ahyn1jo;Tq+nJHc`=Ym2-MGkY2EQddWD
zC}6io1ktrYa)7b}96N*%LsHRl7LL94U%$&<ySFkCm9Qr$p@h@ux&xnh-C-#<X@xf?
z9jD57w9i(Fei&GnZKR$ly3^pQh4ysuRW!l?RCH5IXjj&4i#zhBuGH;ZGXlP2@-6fc
zHP1?V5>S%3=*bmVS#?`FzZA18;L@&X(^-$+X93{>i=py=S8=;ZK+f#7dy{C%>=kJ?
z$U-!KIpCFZX>&}*T*gsta+DHIt55><PP?ve1PL~VtbIn~i&l}UxZg0Z-H!iHeMbNf
z)$uDgHk?nz7+c2eqh_s$@W|zpt$Y}_oUZ@JiuL`S8t#%Pmh1^RygC)ei^y<rc2jx(
zE%Vm2HHDLbn7op_hfG{>es)D~41}E1?WoF2>$zKR`tG!!+Fc|*Gy!4LfdYNd#+=gW
zpA<#)m3y#I1<ej8Oe_#Pt=6XBW~p0p#elMP{Nj5UGdT^PHr=q%tOsES?vjaw>x`j}
zZo79yJ0vvA9H**-ay30Y$Um;i+}Us^VDnS{bjL?1LCjWn0kMKE8yYD1VCGrr+tN_j
z$0CQS3C~dQ8GzROxl>-R{L{3!xR&Ls8yI;qDYN|ln^XXZbGSG_v*drhl(Kzy9Y<Op
ziunFDKajX&{)}jrldkDoLB|!Q)M#LzDVG~>>9MiS7|DbQ_J~s&{ZciKp&P?q^P?-6
zu1Xzxz&GbnO4)o(NgM<ul;P|`RIpxC4&D24yGGIZJxpk7kfp4DlmU}rz`e0e^1bVG
z39;45Tw+LfB&zk2TUNCx#L}tPdYCeyH*XVr2lE1FT%pQ|+4==oF(znP;-papw0rU!
z*D@SypV&Be!1a1Jg^&YNLcAtm1|)tIb`Bw)`7*c9L=m!}6WU7S5nk8V$Kn8`RcDox
z<~BgbT%ZOU)d-0!!Sa~q%Jbg)@MmH{c(YZz3%8({R_4AGqY;#auMu$+xPZI!d5+yy
zeW&8{^{=IT({JC2A(1gsZayG@0Im-V9RY&7Qs~G(C*h9W@^KGf7IhY9s*2DajjGCo
z%NIFMlkIrh#j)Y;`8LQmI|-OR*1D<Bd~dJSPmip|QKO9Km7%`51^ly0LIke@QX+Bu
zJX}^a<oy>S4`EQee{XXd3v7aXdzMNb3zV*VSgYosQJA@p?AmGCg#t#i{wWIy;4d|f
znM^a4u8R-5e3>N_3iWNy2bQU3H5(xLnH#dz=zv-d@>wlCUPoa8W1`>dzFz({+~+P7
z%!hf1{Zv1V2ZHS>%Jb&x!L<r$r&iX?_6cbk$Kt;xqKHA#eHNaSs;q_8(FLThX4J<I
z=i#eDtgCha+`D4Dm0quO7u(L+*n4$@Tkd?_+QCjX$_9Z-Q*RildM_MzZSm5pA<JNL
z=&L7=;~K}-=CbT|RKcDMav_m7*D*8til|v*1b5R|2`^jf9)N=XeA;uuH=K;<oThQi
zD2D~Wx5vKuLW)T?iNsLl3XmeyHfVwV<9WkXbh*#5)$I<?&kZZ0m11A)g3SzS!&WDS
zbne<Qyjz1a#NN^9`++0eVMM-kQdDI77OEaD5?jGxXEbm)JmYN90ZLa)g6NEpI2XH;
z;;^Rb@d6M(RCCMWF`*Wlg@bMeXgYrT@`_p6sp=FU5Z;2nmTS89ME7)0ra7JXtb*6M
z7v#GAOHseYOE8k}D(UIcQ{!`Kg%Ax$D(z?^%@3wVl|62*Rz!cm(YVH}CtC+O(leXp
z4z#1>ikxyef0cqi<!c2>ZWhedX08YSX=2%0FWEjcz=(cU5+-O?qLdWQV2Vm4OG7MS
zGDfwi(Q&X@<(sLg%36<<i${SW(aOfkGFMGr9zS;DT2>{o;#yg&%)sEU9!K(KqGj>2
zIGlgn9RBsgkciaZ8W_Q@jd-{}T8~!>{x*1sAU*-olbR+<Fc$2RVVvU^$Q2NjSJ6bN
zzI4FS1Baco^;$cX-7h4qK$U2E^3Scqc%X5~eI+!O5!%Gn)ZbP|U61eik!#Fj_19{n
zR(w^EEG9i4`MT7+DA0d4!UM+&`<zY#&SO2*;8BkdoyP(~Yvi;Mm9(3*_;zlcb}p%|
z{Sz~7yW|4olCH3aw6H|k<k-8I&X1ss30z4L>zqr0wxsXH^R1ez5-v!YVeR~x1~NFZ
z((od|g$Y%u@sYR<X346oWcoB}^8O?KTb_;So09adV1LQC9zSIQCo-?d{Bh8FrDAKk
zn4^ig%GPWLugITB%(J2GQQ+^yFK*q&i%uYbzT@Z(18y)LmAqyKGO1v@;#|7ARdtlw
zP%L46=eNtK)Zp#qLWm47nHX~w0AeBf0t+byRGT)6#VD^1(LAchx1J>F0BKO`=+OKV
z0<5WPiqvPwL|c<PM!pDf#^O9asZpmLH-YIvNUl{X5;9hyWVrO%&!{bbk3J4HBR;`C
zd0jPQ@yy0lWR*VdbH42i<tTj_kXZIN3~SulSxJlp3Hb;GWB0%H0~-Rw!)yMXVpOSy
zM_adbd7tL{%wa+ME=n3!-^k^yD%W3SdFOJ>@JeBR46~fQ=N|GFI&SsXwv$5lx_db6
z5GUI`0f);*!L|bU9XL$4w4d$~mJe#_?zw%t<UhjUbpT*zNTj@@MxII|a;1MO7^wS_
zUO#2O@dO|^rkrUtCEH?3QhUPffGr2$%6Ew0b{9Mkr#n1Gtrw{HX#g)>S`|_SbCX5m
z=bHJCY$H2CIei0_G3t)x-T!XK6URv*?=(OOR&bKsE&o%q!9R&h*{F+NDqoznSgZMr
zD{&6LkY3fyR7q+7W6&GO!vlMK{-o^PQ=cd&l$l0*V<1NsyR<$hIIP<PKbS$mcVZ30
z$a2!&5Ud#<)#|ghzv2)3?JggSrdL;#a*nEXj`|32xpE#yqZ~koRYNm>pvtFq3`Mku
zxfd2$fzVKbDis|faB@%F8e8<bQDVDoxa`Nvag$bzqNQT<xpko&vEm9<s7j5#>DJ38
zFb8bNE112mlw5i5zO$J!!`Kg*hU^?BJ8F5%#c~un1yo&lcP77eVWkyoAI(fL?zAzv
z*2E(Ubk(4z3G8OqPJvYE-}BqM%tUW=2sERBve0c%-<?B!E|a)EFps;1n{vmP=2P4B
zVz<#&I8f=Jc+U5>0bz|-f|AMDHhMPj<mDnGM-%X%9176;52YhUMPihAsq?Q2l6h6A
zP=$-gbJy$bjnK*(=}ghRh~jA5^7WcwuxBgOb;tZ5D(KbZzT5-sCsAIoEbRgN&YDr4
zhKDY>81`BWL!P962Ib;pK@bR7hK@#|33xI6Z70=Fw4@vKLsWxOk&QaTI&G}PA5I^q
z3}@%c8`9Tez*?ink+R==-Do2ojn>c7!R21C1tmt1%)<)HxgiF~NrO1h0a!W4foywF
zUK>rrf5h;zt4i~FHGZB#o(|t!2N%HjjY09KnC7IxW<wbrir|<brk6|Sj8_7zGGmQV
z+UPo-M4nl@pMu@^P^Wq=I3G3b3wfa|SY=(;-pV0xN``_5j{p`m0b&v>Pa=R>W0h0H
zaK#v~&gsI&(Sfe*qU*{Uc85KDicO-4r}na9255XcgA)myd>_gFova@9eZ%lrl>@-x
zrNIS{@Et#I(cWdPUV{@-q>GiM!#B7d(Ek(8vBZvfa>5j4z~|>2*7Mib?V*aT!=TIX
z0AFJPF0lo|U{!qnjg5F=2=RBhpmu0QGn!5|bIOQR8*e$}=x48U19SyMMhFo>EGji~
z|MGrJM_%#>HV(hC;wpCPYRz#Ws<CB}7+L6ul_*CflbvT}RR2#`H2sEE!q8&944@uk
zxpBFXf5b4%T~^3Q`yzPJ6dqixhc}DTbh8VEO1+Yg>Apav$f1IUKf~;%P*93IH2oig
zA)t&7XkB2x^}{KnzdKnvOW+&!fz|!n`4nlv`2eKi1|?hPx?uNif{kTV&1K-eet(b$
zXEwG`?yHiyO1yOtrA8Ohdg!~pwxpdJ@%*zOy@9*u^RH`9a2_ss<P*7&rwo3DvoH-r
zuDQLf6EQK#LpmHIeae{)IQE;@(Q}S}X4wgh3#ku!1GkTGuNQb^fn7-2N9mn?pI>S^
z=775l6tszHmn>2;?=u`^YBWa(vv$vHpxMS1Ue5J}B1q5mC<shvUNq{kiFf{X&ve^)
z6+8GUb`#ZoAEP2RarbSSF$(Q_BEg`nPUx|swC(FDwCffci`vw9@T&TTr?u`QQJ}7f
z3fWzlJdUNa{&mZOP#APt+?%O_POe>}f9Y|eHSfr3k!rA1j&f@(ocXD6oYm!{j<XQf
zFm7*550V;39D^fYR)|xip;Bi|R<i$R+OrM9X4}_YpKF?oNibN+nwoMM7Qbr(ChX_b
z3i!H)=JbrDO<Rd`H*(!Li0aeWSY>?1<5No!Own)2m|Xv;xsC(^pL1L#?!f2*bU~^J
zO4jE3Dm-6bZWmGX|B2K9z`03e8K7myE1;x>o1uKVVeNH=30^zx7nUO#$$Qi^f7gH-
zJHu}z&^gKq7wYU)rPP{$nyRkz+Zl7Ixkjvbyqp<`rt|7|b!tSu9a}MCbVj|@ZJ{O$
z^U_}!k6*&>;F$;#s4!}?Etwb4yt|AbMlsk}Z>m*<jHnyjf#ie_7S24dgTih|EhR3F
z&4htMry_(Gn1BT=JbF4a1Vg?w4HDN&DdvzD!OkcG^(HvGcb)`I(b;vTZfxDC84r#q
zi&YFHfg|?04E;{JgWpyJEyg{hez6d+wR1Mxvyn8n*mgtKAI)J+brDIegb2XwbV<9y
zYIzAHiqsJzTvi+9SfzYB(mnG?s>sI+$N!=gK<hP0H<Y+gp<NVZNE7294!dL;ZqqaT
zge6{%$$3z(iq_Ub$VdCHf5|)66)zcV%MFlgw^%}Ve%ET-+b`2SqpL*f%rNHOmRg?3
zL|N#f6YjH!vjse`s~e+3xK)>Hve1JQ`%T_UH|3|9f))SzWu>SIST(q(vru3GVD;8e
zN78ZL4cAG+Ti2^_fgP6p@Xq_On!DrooTG-}x&1oBSb<*k@iGf0qOK(yf;*lz$k(|=
zZk&ORz&}Mj;|b&LN2T=s`OzKt{6xhm?l^i_a_Z9<yNbKoSf<@pVKB45y9cg4i#6T=
z?DFgTYNH`65kx<?qCkOo&j6l7C-bh@pKd7I6;5dcTP527`~Gw1mUDQg&=x1Lf^4HG
z?3YKXKl|PKa8^%>4keQDS)CVW_v#@u*wsG)&ZMyC2slo+jUterl<CflwWLmHTtnK=
zLdp*`8Y=fjlGXhBQ2OA)>7x>-oixQnQHv_J3vdj^+}DoY5lUR(ott~y1O64M*B$z%
zam%<Au<TOD2}JZf-XhQ~91LddnRwa7av(Zp!Z!$}fTn~$_|XGTZ4&wjOgeiynH3cF
zaG`)O`kP&o*)aAVh37D0(%eS#RKn(Ht@uKfAOUgyeOM9TV6knmV#7c$daw);poo<R
z9NRZuq@ytNVZst?<k3J0KSB@CdpGI3g*x+Aql;*KZHkoyVxj*Q*xA52jjo|WKOTYp
zq15zC0K_eA*pu@}<mxQKX)1#Qv{){mxP3ndS<_lZ!u%w5D9MDF1>Q}i$%g)hkd>#d
z1Yob4>xSwfxhVuIV`7VEUwKg21>#aUY;Ay8D~H1-G745A>$QLEP|V6<)|Zm(av7N3
zofNWZY*Frd=Y%Ri033NjPPX%YH^<o1iNKP#av=BTP0E|)DU<;p$kcOwj3&I0DS*om
zb&32ic-}d8Sj0y6|J7Sa69*EJHt<ar*r)4y!AtFB6=&afI2s0TR5*BVfJ<`B=~J<1
z_@h)6<?sQqkXE2m!q?~{WAP^87my~ot%J)wLAPzs{HD=APZ+(`<1Cq?BPJX174rz}
z+#oxxD@E?IIJO8t&+sabyx04QoiC)_;aLQZ6<5lHN1CI}2V+M8cCuQLo`4~oCM&*e
z-tU?VI!448Gk-<d;pOa?62fMRIx^Ce{Z)RC({~(#`V6#<97RZz!ZZ<caEWu)w>G;l
zr~ih*v~9U6H#jJx=?KlT$v7vMwj`O^1>$(&Yho)(7!7Js$C}l-KDKpTGo!}}b^=oj
zr`EqF+g0|WI2=L~U;1TqQt)c<KTQ_ZBv3be$osl}&A`6}V@^NKxeaA2o6rZ081Te5
zt_d2|#<Zq%$&+r4`1GMQ0mN@;Jq1w4&MbhfoOYsT7Xr!BVc}fby5BA6_oTojI=(BY
zW*@O`R1{t`4;?EwlYJqy7^g*|^|u&!`2wjun*Ct0#>gV8o80`uLhB}#C&|+SwZgq6
zxV|-9bUA^cW8H#+OlZbCZWa=^7y)OJcnc6|0$4T{S~)e+cAX8ffv!G19@kfV;6bTA
z4QwNlGV+QK*@!v;QVK-feZft_p-*JiLF1mxj-QC@H2GQ-yOL1{0r=ca&F~Ikd7n-R
zmHV@V&1?f)<eABos)1Qx0ANF%+&PJVi87EgZlkysM{)U80Ozz)4el?mEmB(tDBMGb
zL}U1_5>vaO5qXQg5x#!m6ui@KtNG`(Pa~O3Kli#XGQ|<=)IDeAbBNaNoS;0i=TTIA
zScFf+($mJFY#8>jGnn_yOu@`7-T#IR_%P)$LxOA!$yrUdl}@1=tofXW0b2q%$1+b}
zekDN@U2Zi^?0av>JJuOtKIRv(|4j;dr5;=^uz<KuR6Q?7tvY6@DZgxVvfs{ecYh8|
zZpKlfq;lugQ?=Cv<O>g4VB&efe_6=L9%yAgf)>GEtn_YbW@pOrfF%&>yK|>_*ntRS
zQ^7)+PsRu7Q?O>U2j)qEBH`+$x^HEEh4HRy?{H1+SuOl9b-wRpg0TIVV41>Rvp|M{
zBkJG|HSG=1!{dFB!6EO^X7HXp!_^YT*bV?Xyo7=d)M#BrQu@-BVimL3pLJBe9RW&8
z3$L@(TUHj8Z_4lpR`*5q>u2h6QMv2z1RZXN7rAzFdo)J{9&Gat{IN)uw|A0i_OeTg
z;`kH*+hpYMK`XBq-KYC{jb@n42<1N0XkjWQ(29<eB|=k(LnbZZp1-~4^hTJBHaF5<
z;?finjrjq~8v|7OUHJT;);jN^R{O{rx7n6N>c#|jbEZmAfgzitBc9@z259!Z?L5UV
z@NL)#;@q89G~3i%&dc$;rF3Ys<or|{Bjwsk&*08|0~J+mqQGUL8`0qGjFY3?_m?ab
zQYuEQ(3aRO3kEDl5}*O%tPwcjL!2;J1Ut_<`%w#AoZWgW#Dc7h$1^U7$DuyY8=;*2
zgetTbM@Y}48-0U9o-r3~IBq?1UrMaHBP}7P=U<E($3sGDRs4bdla9+I9ZAJDERQVY
zIC25tZhZ#l<CnSi4Dvt*WH}M(ZciPrU(j>lJ|~^=0=*n9ev6uTOKEYW`|cM>_3b!&
z?wI(Ds9Hy^LIGT^fl;Avv9Gw)*axeH{0>$11X05eKbm%J09_2oYgFaWVLlnJE=H@z
zhR{Q#3i@IAXgVm`$`|d84+3LYUuXyyNRheWrno*ZZFVgY?gHYfw_f>jLM|h>iNPTw
zj4yap9ctO94=Xi_ImaR=X>cs81Z33!G=7<3t6I<T!my6er!OvYZZ$}BlS&DuyJ$yA
zVKn|tzETb7@|MzU@^@PekrZZA)ufzKpWa(|Lw+q2GY~aiB`ep7T0KUGpY9w<kuF4I
zXK?}f0aZu`67>~stLS>DG;2Oh-{dq-u4-C)9GyGi6DDtSQ7}xv6Bv-2RR4z~3~jUW
z6J716oD3_iE&_qxIy>e11kyFUowlU2@#^Fis^+Bt>TqKfvV&mhRKkwTQDH-v5AjW;
z)WR7-2BRqg3}p@F-e!<nWj%IN<5@FIW1Qn00nz)Y+tc|=;p|iEU|6g13K@KMeB51=
zbG_fH$RGv@>6$lMM@1_7YK1q@XS6A5+NFv8$UPV=1^LcI3EL2uuh>|bxcVWu4AC|J
z{0!DScxpWc<UPPFP`uI}%)eDTRkgL57Vs?-rikM?S?pmqJLaYGFwZ!N0nV=`PEqs4
zMgQ4qxM1D3gUfheVXPSVSAb)+jIr)U<?(pYjQ^Wc0Vdw^9XN<E@ShLGAW9%!a_2+C
z0Jq7wWGtvSYSxR{U<|rbd3sWvP?DJ7GGPh{&5N>u-84%kHeQ9$E;`cZ3l`KYgc7T(
zgpDWBy>sm~08AGqlgbX7INy<=+D<bO=bGH+T|uzA>-Jhx3TZW8t1}DX-K<dyrn`5+
zIX>VspbLuIf{xQWBhpYySaELJadO5}UaSs0FPFOM4XScOps06UGiYz74&!#Fcc|(r
z)7K4XT*6-I`~Zaa6TuvP2guidF><RTMt#~*1H!kvCymFY8LY`ok@>Z)0#WtK;J#4C
zPOX>Oyn*OButRaY`$undArH!-`aV+s^53j#1$xV!ZK%e4Kf&7E;*F+XsK3$a<z-o{
zUNwx&;zwPvcx8zkb{lkLM@Fbh!x_gVMlMe%FiORa&o34tQO1yUKmYTBLl`_?*3MN5
zo@z-CeK~!un3>dympMCUEscuPip>E{RY~%7EvylB_6%22ypDqI{2PRcX7E^y|3MmJ
z2zEV75-$W0v9sd|F-&gy=`Dlfj}|~1w0Coh6#dRzb?dhsKcU3piI^*yMc;G10hsGP
z6ZrS))LcPGtL-YEg?@FNVN7keekPKUH!bgdQ^?8!R`IKcf5KLT>qrv9X4A+tJht&Q
zyHQ>pV8*^4v!B%3UIRFp^V>UN=HGU8&EOg78DAT@ey38sb;|r30%5CBVToS^xK;!3
z#Owx=r=$itF-%njSdkkwkMnO&SEx=|%o?_;8%q1blc+I>RLa-N7EMaWF*j-(kW}P7
z2EuMh8_v}en+rh19z0YWl3!!uk4&$<N|HchTt5(9!Yk?-97%?d{&p+*G_ra9VQ&HQ
ziy$G3*j|f?Bd>!V$lNmy=8Q9NcY@a`O^R#ZS-xE+J>{RT?@7L)mH~0RP7?&|`0`@=
ztm9>1^dqb^w&g*&7(7?BM&sjoLEf`RYsO<0;H>!a=c@!NL<{Kio(xX-Bvd0{+UM|B
zz>4|+GCLC7yoEJ{hqkb{!7(}tYp@FeW}9hORxD-g)K4oCt+sAAzNq+9$GqTeg=;OQ
zsqV#`ibc~t<SBRNuXvN(CeH@Y43;j5S9+gCsFkkjjuBrl?=k1nAbpq<Vba2Ja<C4n
zeotpm3kw{8A?4C6di(sH+Lbzg;&2l2vYq*@^6++(8RLJ#)Bt)xIboRf*1Qvew*nkx
zrV-K;R&Y`~pVos=+$!{O6SVx)x?{W+>0_`8+nI}WCEHn<V!3ndmi<UI0&^c+hYFo-
zgT#}@*s^C}TL5;N%(*yo;Jj}vq#Ly=ZmX7#)?3h5414$UYgNmBfvH`&aoOtVSYzr_
zEa*}tlNkKI+dPSSTKtDuV;jU&sWqU&G6q1S3~rStkOvYhPf_89%2cWNlGMM~mW%E_
zFQLr*WW0h_!e^UcG51N5*!c?QA*ZyW9y`jnp2;`<-V4Pl@z^KjrY8d{d@XpTa_KXr
zPNU^Jx@4@5r?owsjI4w<Xqg=VkcAjJM~lrgw8Im1>aIXWL~A@;f)>8!DhsIbg`kvf
z1f$RYTrR6+yIq=b19zZKb>uv{qf)!Le;IQiVlwE&EKtQO03pbO(S}6obOGR|#^J^V
z=w{I9Q~@Ul`u~jd_jUB5%@R+CgMikAL33{@1=$fMy3{<2FKO`ZJ*r$)U<BF2IOn}^
zpgX>!Zj-r3y=VVhW=pNYvrR1<TiyADynd*!2bAliw1zmf>pTiCY`+2(zQ$05;5EsP
z!}g9psghLmX&aObW8cwXuCj#~#^_qN#9S5b3Wtqcza#nrld%ffx(5TMHxiU?CZ+C{
zigW~KG%$`iuOIEy@mBsbBltT;?`O|goN>212KDCGHWl8fLkAA<v!cWVXy`~R(#ZP@
z)k%+<*eU7DK@vyT1EBpU0jU-%Aoh!cO3^Aca*^Z3K?BH5NY--9?d31Jo-FJ#Gpg}!
zA^8K0T^V5NQ3QsDALnUN45Au83(nt5^@@?PgM*+{9B7hhWQl2z-Gr}*?<Upi5v*xV
zxAN}mT6iSOC2$qd+jwB);s&y2G$U7x2lNVcXfMPS#)5ERlM3k+H9^heWfD!L@#(z0
zoJ}}@-SUc0o9C#Vhkgq`wUEj;VEAE0FaK*qSm`e?Qx89TDUBLO%97Y|Zky_3X}0yx
zq^VwGx;4m1>gK{GCpc1=qe(eAeYy~JHn(@siTao0h|O#!8_$x?#ukTY6$RZO+Wzv8
zSeK0Vs(O}{H+8o-oWu*=8??!qzYl_}=AxaPJc(o%7!G2=!FsC^Ec(EzGK81ZC@T+m
zG0n~D%hmU?h3y??7PE5oBN)27ENphgk@F9JwDEU1dx(+$L46CInhUy(^d=m$_s{&g
zz1{3w@3|Y;ciI?W_$`XD5`U*3TEl}DhcvB5u<?ak4F>RcmqqIomx`8Cp}(EMsh)kA
zI|pm{MSWV%HF*S`F(z)+$G{{#vIK%DqVXqM1l?miWWY+GWt79_@a7cazjCGP)pq>%
z9y!&_ylHEpN&wEjay#Ix3MBH4;Fk!1rhTE47@JM#%tv0)edmi%Gx`PFPHpH=usNfQ
zz+ZPX<4G!SQijRn)`_^;vx7ps*sBQ%#$mhITQ??E17H&syt4P4g0DzcPP?#0&Swvn
zkF^H54<Xz%xNn5d9>TWMNPJKw7iLzAq+RUDx7?Bw5W_++_vqy#kU$PH=m*As#p9R=
zn{j#u8L<(;;1oovuxv5iJK{&IDbeK-gcjBrDLIYa6JyH|SQ{BT_BBRxcU(s6`@kaQ
zAH7nFh>9!i*e1Et$a|%duy!-@TheEGh(5{w@9ND<ZH#`aucDR=jMzOB7Ps;u7}g|*
zI=eN%A5;Mjut*986)g@G{t3H{*2;RJ`7`3m&qMjvS6(*hi^v(<y+fHi#66%B4~5Y;
zQ+oEV`;{6w#uT6(XQ29i4_WFhIXe+A(guL`Y^Xf#5e#aXV6cR6Bw$hvH*(0?3payK
zs)03biHpu>I$M*4Pv#)H%RCVT&hI!@x^^yLO^OBi5hG1_e`=bfXKq+F?7r61#B3vm
zY4ld5wS`HVui&;e+!eTf>2|At>sojLL0CjR*ooJd1h0DbDWpi*Fz`M0Uy|JsnihYV
zv$?;5LDiDexYQ?}nADPpHAZYbFv|ABgG|(h-|X6R4gDpQi!~S@=~5juIcb<TDg9U-
zZY4M8frd8|4XpSU8V~3T-Aeoz%Y*5hau~ii7sFXp+k@l!B<IY_Cq3g>Ci>lq1UD8l
zzTT6FmuSTO0yfm;AY_3mK=pAK{}#!{dAI+)kRKe7vS-{QsC2+M{dE%lU>En{!8XF>
z6v260cF8dJKy0NGNDM1!xemd;YwfSi>*3bOq{oWopFuW74Jnch{FX5zy|N_v{G8<2
zATM8avPtItKjE<k-_YULq@6dy$06^ZPJ~8dh4ns~?4Z}vKfDPK-2c{}b+$9*!uOgo
zXl1efSmVG!@51<Bob@}u#83v}#!*LTvYKJ9ztZi~OlFb&(@j$ekA_lRqb%4M8&sjW
z9eFqIHotIrOG$Y3^~qA|U^k`h=|#1<A6-6#_&X}AMPL7uP0>1R26}7IC#6vYYn-8w
zU+3q2s2qo=rdYMEi%?_|5XZ}{tuLC_Hz8?!8l5PW2V;1eo&%{A1#PXc0g7`)R^AQ%
z`^CZCk{g2zG?nsruY@CYcIN_q42}@2wzdlr&oN@@?5vSGg8EDrV)6U<fHFf$f$0lI
zj|}zgxhA9su=rbBW_xYEGw6T(76;j5aObK4>g-89T4XErjyXCMcN|oB<{#asjoBx(
z8XiemhDnR+eRH?yIbL>kd}IaI0F5YIwkiwY6jpsN@;QJ&eR;a1zjD;wf_c6eE0|DW
zoFRo%<V`})@tv5<#ZV{?SxJ``*|NP!J$|LGTM&-lNPx~oO~aTsKWwdoTgNonUvJx)
z99pllg+C()0u_E?_OolWI&nSB$j5Egn254WHU;2{txd%jgn&~zEG{MB(%17dzJhi>
zr5+t<BWeNOgm{myop_($8Ka5utqB|Eo&LZA&&lrt1-EG7XC+m^t_k65+OfwU4KKKy
z+j+Q<Wz-adWq?<<gJHahGnG2CkFW|VHLA9pM+G@QwW(O^n@CeP|4#54O_bP<HrB=x
zqw1&N6bd%{nG|@)%@w<BjX;DuMS61vSZ<<CsvRSdccmg^kAyVIyw5<@yxAMT^)dPC
zv=HAdJs0lCUyoNfcl2=sl?eSuGU2}r$fn~nbLZATL}iJwdHtYtJpXDpYUmY)QIsM#
z52}M}%P1ap(=vBQ97xn%ggFyuuGw*UfFXX*yZOr|oKT{$Y}|zd-PyXC>wfID-9-+y
z7SlB9@@1AInXG}~#<!~1m=jTO9snNU6m*zais2L+%8py-9cz-?6+4K!b7?y_rxd-M
zQo(GwPXgp6U=w)N_spD?SXh5CfCGWTs+<EqLr%;OjUQTc;KY9Gy6hg{N&JmOoJ6hK
zW}yX~l#G9N&E4MUGL!35kFGW`3FU1GMN<i)^SRCB+;{153q`_n)o4#V^8T;Y4yjE*
zhYc;Lng|^PJbjm9_<rSgC<6|?#zdNRA&i`ybojlc7KL1Lxmn|1Gjc0!(VwLM1C#kg
z{fsQ9?h)aVI1!1l7Zxh?EN)HI!__dSQ$>*oLOdX(|6&8+%nx_Xy3ve&C`7I+4y|x|
zt24D99x#QI<$dR38x$dVQiy#K=xwEbK|m>78#*M@6>dGDBnlnB$W&6iNHg{APsfYE
z(DpeM#QHrvN}$tkP|@xgb+hz@IYEkusIeM`#8T<K;!E9DObxuwFCOkE##)R(wfVjn
zzFHM-%LsNujf+Ue5G|D0C*1?5j^ymqp$W#_$nP*Q!udL99!RaTM<>bD)xt1unV}w<
zI-aXRxOnQxguU%n0Axshfw4ZC5t03|NI6*d{Z!vZ=kZR-U8nhvXD5t98K!?)p)I}X
zy{PAUzx=>05fFmh?<i%GX4ytEUFo%-^3UlyfHAEE@7n}`#sI9ZjG-7lbs)KvvNH^y
z48^xAn!;%u@n`qy+wI6}sy94A$l3id-$2RnGl6smQ|D$9jZg4CdxJgc#pMp1npMlH
ztXX#d-&agI(dmB|64eIRLx@<e#Q|mYoN>+9zWpjg%yHP4SI+8Yi27$YQKtWX;H3XP
zkN^<r982#NKxDI60njyT*0nn9x9;l>LJBzqtijcXt99kF4;QRHt}?fsY(=Lr8W1=N
zTYYHG5NFTlmv5SvnjzjDi%#3)z!A|whW+Ho-ow~W^C<}u$@%@#$I?f(iD2GoDh}vK
zko*P>Y7ai9Co$xByp+_AiX<H07)+X;ArWj55}300NjiYxljaPundm0CCQ6!|xADAg
zPTy1Fc~a6I+MF8S_wzWcO-8V_NW?W|s5dJ92?k5S2H|mUbe1Os3qKa&)Wu?^ZT5uH
z3F^#-QqLlJcslF-7!@-RA>pDtEu4~bo~G4#E0PEqW9aikdHGjugUf_GIhiNdt^7hq
zV`)#i|ADjbUqB*!sj~|QhQa+Kf5*gi%#=`61w{5ca1xJHHzIH3qK5C8yu57=(!`A4
zz!YUI4mia}Xk`ynb&-Z!;iFO}OQQ)E$>1#T)8*W-<>STDObN>daI_YVdc=M|#goMM
z0?+111SoB%N3=b9oWQt%qyX$GfO|yR_aSfrI*^X*sQ!j?+`N#RJMR8AS?Ji2t{2v|
zz9!PUQa8m_x`jG6D_+0-cN0!SeRuqp4fvECcZ{K~3uHEZiI`ecnGeoE@*l(sC*~H?
z@mTa6K&T#nTG#3w!97;A+9z1EtN^pBL%hut7hw81l?qRWcHss$FTfj?4Zs=D8t*UM
z0q?+br?hHLUK7a+wE0=p#XRz<s?E%kDg5UHLXCHbpsK=AwB*g`(>W`wgK!>XP2eUV
zIP=O(4;}nV4rw7!vKu<oh>#EGC?{hzics=k=z&^M)Qw#+)9CbwfPcrUdaSUVE{)8U
zvJ|#>J0d5o=#wCoSL6N!#2#qiANTQPwhN@VjM_%Qzs=#&0S+~l_kB8A%KOkYr7zhZ
ze9haj#-KH;YtW3o%L3OJc^WV)txZ2Gpakee>Xk_wA#shs@S9W^d+zvte|DuP=~u7(
zGSK_}^MW!eGboai=!kfxfZz2TQcvYmE=uyWNrN)3MHUt4ux}m?i)w)V*z+HC<h|jM
zBKM;uJzv@Fm&|~IcJm^652q9G7TC595V%X!Ds0@FPFULbXvB4HSk5v1bXam!l7N)1
z)>_H;S!$=)(qj0eKk`Jn@T=n{@MdIL|8NvGMTInshl2OjH|}*=%knRY8f%;0nzKQ3
zIjBY=ZqZQ)I5<KyOoW9hawAQnRI;q|k1VpAR5ZmlCi(h}W(3;GKKA9ck=;EK11i08
z`H60asS}#_zhI5d)K<()h1svZh0X5ZP8xWhR?+Ard@lE#nN4&$aWBr?SmerpffJ|B
z7it3mTBq2it-MkVX*n2CfdtceN)@+afEZ`Zaw#i-NwkcQp0><502e7|G<w2Dk2^AQ
zr`vZT9X7hC&q!WP-!0P5s^&HBT6mE{n3VwSWE4P{{9QR7m}77RsABs+AYB$YN_hE&
zhR(;8{bDpAnT3uwxf8S<)#GWm8aW%YUK`lP<~@EvVA`Cz1RNVT6?M?7z_b+`@bQDe
zyWFce)W_Of%#NLKZ*ikH=~h0TmD$h`vaC%kEmO#{e6LH@%?#pR%3|b)L*Mw#EHHl%
z>TjNE23d9cq@;?60-zq3UrCpp$tan1`q1LQC?SK@@ot%iCNiqGv=WgUx4(k=^hD}&
z;q@UWnVvV-fqgX2^gyjuF0Wa<ez+`rS7-*jWb*;DveMG@&VV#5<9Fd8?-LhE_(Y_B
zv?{TV7-e_vvLZ)mbkq{mUjibsO)F}`8(U!v6-p-g?-0(u7MTN2l%L<i)#sFgQLzpL
zF+f!ZkNMS8l7i3~SZC6o${EL_!5F5`qEnUg0&qyF)j0Vha%mJFNG-hXnLjmJ*km%j
zN+?Lft4bD>ru9L|HJb#UgM2Lm)C;R{0u}<bEx6_-bUDhX)C?=LDO#FtNaZla1i&)M
zd9WM~@C@)321_^fc9=hrMTq~&p#T8A!f?#zW?`SwJGH1N>Uo($yd|RiiYEnd9Ur#O
zt1pD|gB1X{fiij^7MZJ?d^fuiKx2>*#AYq0&ULE!7ae*8Q}(4-1vu>d^2y&WoO=4y
z(sSpO)CSl9R(Yr1jM{nQ{$$f934mlqS#55Fyq-P>?Ilz@^|BWikOX6pw))p}<C}=W
zwA|*OVB~RjU%iyyHxB+rRqcjhFmLaHVBNtStyD(!$q61{lG5P$4%YXbp;&Q$5+|c8
zMvBp2`~`P=?w}=P1Anzjr-D%0u!AqjIj>VhUCg&k<i`pR{L1TKzV&`f$1uwCZS*2%
zL%BS$8OO=diiR$|xLQG5Tm=%CvT5Hu_$IHgyU<|sEaKzZfc5N&xB>tXW_N=8ioX`c
zjv8L;(@9#eLm@9$_T)yOuz{y^g$VjClvPkV)h9p&McAD<VgmaYjNBV&`#_^O6&jiQ
zybqEm2jxLxrbSE8_{A}xNgeWKDQE`$9M#SN4%xX*7ORC;Z??kbs~9uX*d;5K<5y#0
zqL%k}JiB$`=)fxF6P<Bb{dJA~1rV^05yVd0Exw__TxfYO`@LoJN>D!;RUc~jNbq()
z+E{Y`l<tkU_gfIHit{_g#NonDiQQV=XyE<=Vp;{h(Vkj9IX$VNLI**KM!gWDC0;nF
zLtKi<-p>ixM=%zWkfhg#x<7FrwC6D!>?$3w-V}dhI!1%oQ<_P1B-?w8z%f9}6NgJ;
zx>_FX;g*qUB1?!farWq27{4}~dyBd=7BN<GBruvNYW=%oaV=m}$9Z}DDx(60%O_lg
zr%R8ldgtbsJRE*>^izf^0YL9cuwMI`RgsI{YatJ2dXwJJE-GZhuq&F?gsR2?>td|Q
zD692B^Kl|%^p=!yOabd>rH%ow)`L)T{Slg85cM391v)qf!5B`M$pU;A&R{<BzT{R3
zgv@?-z$t+e(YJa(eH;mEwHA*Gg`hPInQ+;B!G@8xJ>OHuPyiw>#h!kd$s|H*$*Id@
zReiZHXw5A`=j5qEyjg8NW~9gxOOy#6E$PQUkqV-PvyO^|dm(WqSI1o4nw`ZdW(6zG
zo&6a*FKhX_pIG&d!6Mo5kiryB+i~y(3a^D49Fh2G!C8mFd#nAUU9viwa)oBC6M@D8
z2v#$uuu{Oa*G-Ir(K-DBV6mc_O+|wA9*IWS@zHoPXlJ*|xKoC)K!};PtdHEU_2K*R
z$CT?{qQ}H$KaJ3h==$32sRt0dnWhY@X3DHPzX%0DgW&}RdMumBYjjLsk7*)><d{&9
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
E05^hqCIA2c

literal 0
HcmV?d00001

diff --git a/public/haunted/haunted-text.svg b/public/haunted/haunted-text.svg
new file mode 100644
index 000000000..8f06e1338
--- /dev/null
+++ b/public/haunted/haunted-text.svg
@@ -0,0 +1,3 @@
+<svg width="626" height="303" viewBox="0 0 626 303" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.024 113.856V111.04H28.544V113.856H26.88C25.6 113.856 24.4907 114.752 23.552 116.544C22.6133 118.336 22.1867 120.512 22.272 123.072V165.312C22.1867 168.384 22.912 170.176 24.448 170.688H37.376C38.8267 170.176 39.552 168.384 39.552 165.312V123.072C39.552 120.512 39.0827 118.336 38.144 116.544C37.2053 114.752 36.096 113.856 34.816 113.856H33.152V111.04H60.672V113.856H59.008C57.8133 113.856 56.7467 114.709 55.808 116.416C54.8693 118.123 54.4 120.171 54.4 122.56V188.48C54.4 190.955 54.8693 193.045 55.808 194.752C56.7467 196.373 57.8133 197.184 59.008 197.184H60.672V200H33.152V197.184H34.816C36.096 197.184 37.2053 196.288 38.144 194.496C39.0827 192.704 39.552 190.571 39.552 188.096V183.616C39.552 177.472 37.0773 174.4 32.128 174.4H29.568C24.704 174.4 22.272 177.472 22.272 183.616V188.096C22.1867 190.571 22.6133 192.704 23.552 194.496C24.4907 196.288 25.6 197.184 26.88 197.184H28.544V200H1.024V197.184H2.688C3.88267 197.184 4.94933 196.331 5.888 194.624C6.82667 192.832 7.296 190.741 7.296 188.352V132.288C7.21067 120 5.67467 113.856 2.688 113.856H1.024ZM106.181 197.44H107.717V199.872H98.245C95.5143 199.872 93.2103 198.763 91.333 196.544C90.6503 195.691 90.0957 194.795 89.669 193.856C88.0477 196.245 85.9997 198.123 83.525 199.488C81.0503 200.768 78.4903 201.323 75.845 201.152C72.261 200.896 69.317 199.403 67.013 196.672C64.709 193.941 63.301 190.869 62.789 187.456C62.3623 184.043 62.789 180.544 64.069 176.96C65.4343 173.376 67.6103 170.645 70.597 168.768C71.7063 168.171 73.4557 167.317 75.845 166.208C78.2343 165.099 80.325 164.075 82.117 163.136C83.9943 162.197 85.317 161.344 86.085 160.576C88.133 158.443 89.1143 156.224 89.029 153.92C89.029 151.531 88.261 149.525 86.725 147.904C85.2743 146.197 83.7383 145.643 82.117 146.24C80.581 146.923 78.8743 148.331 76.997 150.464C75.205 152.512 73.797 154.432 72.773 156.224L71.109 158.912H68.805L68.165 142.144C68.421 142.059 69.189 141.888 70.469 141.632C71.0663 142.315 71.749 142.699 72.517 142.784C73.285 142.784 74.1383 142.571 75.077 142.144C76.0157 141.717 76.9543 141.248 77.893 140.736C78.917 140.224 80.1117 139.712 81.477 139.2C82.8423 138.603 84.165 138.219 85.445 138.048C88.261 137.621 90.693 137.792 92.741 138.56C94.8743 139.328 96.5383 140.48 97.733 142.016C98.9277 143.467 99.8663 145.344 100.549 147.648C101.232 149.867 101.658 152 101.829 154.048C102 156.011 102.085 158.187 102.085 160.576V191.936C102.341 193.557 102.853 194.88 103.621 195.904C104.389 196.928 105.242 197.44 106.181 197.44ZM80.581 190.016C81.7757 189.76 82.7997 189.333 83.653 188.736C84.5917 188.053 85.317 187.157 85.829 186.048C86.341 184.939 86.7677 183.957 87.109 183.104C87.4503 182.165 87.6637 180.843 87.749 179.136C87.8343 177.429 87.877 176.192 87.877 175.424C87.9623 174.571 87.9623 173.205 87.877 171.328C87.877 169.365 87.877 168.128 87.877 167.616C87.7063 168.469 86.6397 169.451 84.677 170.56C82.7997 171.584 80.837 172.779 78.789 174.144C76.741 175.424 75.4183 176.747 74.821 178.112C73.285 181.44 73.285 184.384 74.821 186.944C76.4423 189.504 78.3623 190.528 80.581 190.016ZM129.841 191.68C132.316 191.595 134.065 190.485 135.089 188.352C136.113 186.219 136.668 182.763 136.753 177.984V153.024C136.753 150.72 136.326 148.8 135.473 147.264C134.705 145.643 133.724 144.832 132.529 144.832H131.121V142.4L150.065 139.2V189.376C150.065 191.68 150.449 193.643 151.217 195.264C152.07 196.8 153.052 197.568 154.161 197.568H155.697V200C150.833 200.085 147.676 200.085 146.225 200C145.713 200 145.201 199.957 144.689 199.872C144.262 199.701 143.878 199.573 143.537 199.488C143.196 199.403 142.854 199.232 142.513 198.976C142.172 198.635 141.873 198.379 141.617 198.208C141.361 198.037 141.062 197.739 140.721 197.312C140.465 196.885 140.252 196.587 140.081 196.416C139.996 196.245 139.782 195.904 139.441 195.392C139.185 194.88 139.014 194.581 138.929 194.496C138.929 194.325 138.758 193.941 138.417 193.344C138.161 192.747 138.033 192.405 138.033 192.32C135.558 198.123 132.145 201.067 127.793 201.152C116.785 201.493 111.153 192.619 110.897 174.528V153.024C110.897 150.72 110.47 148.8 109.617 147.264C108.849 145.643 107.91 144.832 106.801 144.832H105.265V142.4L124.209 139.2V174.528C123.782 186.133 125.66 191.851 129.841 191.68ZM176.596 146.496C179.327 141.888 181.929 139.243 184.404 138.56C186.793 138.048 188.884 137.877 190.676 138.048C192.553 138.133 194.132 138.816 195.412 140.096C196.777 141.376 197.887 142.827 198.74 144.448C199.679 145.984 200.404 147.947 200.916 150.336C201.428 152.64 201.769 154.944 201.94 157.248C202.196 159.467 202.367 161.941 202.452 164.672V189.504C202.452 191.723 202.836 193.643 203.604 195.264C204.457 196.8 205.439 197.568 206.548 197.568H208.084V200H183.508V197.568H184.916C186.111 197.568 187.092 196.8 187.86 195.264C188.713 193.643 189.14 191.723 189.14 189.504V164.544C189.225 159.168 188.799 155.115 187.86 152.384C186.921 149.568 185.471 148.373 183.508 148.8C179.071 149.653 176.767 154.944 176.596 164.672V189.504C176.596 191.723 176.98 193.643 177.748 195.264C178.601 196.8 179.583 197.568 180.692 197.568H182.228V200H157.652V197.568H159.188C160.297 197.568 161.236 196.8 162.004 195.264C162.857 193.643 163.284 191.723 163.284 189.504V153.152C163.284 150.933 162.857 149.013 162.004 147.392C161.236 145.685 160.297 144.832 159.188 144.832H157.652V142.4L176.596 139.2V146.496ZM224.578 110.784V133.952C224.578 137.195 225.773 138.816 228.162 138.816V138.944H235.842V142.144H229.826C228.546 142.144 227.351 142.869 226.242 144.32C225.133 145.771 224.578 147.776 224.578 150.336V180.16C224.578 182.72 224.578 184.939 224.578 186.816C224.663 188.608 224.834 190.357 225.09 192.064C225.346 193.771 225.73 195.008 226.242 195.776C226.839 196.544 227.565 196.757 228.418 196.416C229.698 195.904 230.637 194.197 231.234 191.296C231.917 188.309 232.258 185.493 232.258 182.848V178.88L234.69 178.368L240.066 193.984C239.639 194.496 238.957 195.179 238.018 196.032C237.165 196.8 235.501 197.867 233.026 199.232C230.637 200.512 228.375 201.152 226.242 201.152C221.122 201.237 217.325 199.317 214.85 195.392C212.461 191.467 211.266 186.389 211.266 180.16V142.144H206.018V138.944H207.81L207.682 138.816C209.986 138.816 211.181 137.365 211.266 134.464V123.968C211.266 123.627 211.223 123.328 211.138 123.072C211.138 122.731 211.053 122.475 210.882 122.304C210.797 122.048 210.669 121.835 210.498 121.664C210.327 121.493 210.114 121.365 209.858 121.28C209.602 121.109 209.389 120.981 209.218 120.896C209.133 120.811 208.919 120.768 208.578 120.768C208.237 120.683 207.981 120.64 207.81 120.64C207.725 120.555 207.511 120.512 207.17 120.512C206.914 120.512 206.786 120.512 206.786 120.512V118.464L224.578 110.784ZM274.986 176.576L276.906 176.192L279.338 190.912C279.253 191.168 279.125 191.552 278.954 192.064C278.783 192.491 278.229 193.301 277.29 194.496C276.437 195.605 275.413 196.629 274.218 197.568C273.023 198.421 271.317 199.232 269.098 200C266.965 200.768 264.575 201.152 261.93 201.152C257.919 201.237 254.335 200.128 251.178 197.824C248.021 195.435 245.631 192.405 244.01 188.736C242.474 184.981 241.365 180.843 240.682 176.32C239.999 171.712 240.042 167.147 240.81 162.624C241.663 158.101 242.901 153.963 244.522 150.208C246.143 146.453 248.49 143.424 251.562 141.12C254.719 138.816 258.261 137.707 262.186 137.792C268.159 137.792 272.682 140.565 275.754 146.112C278.826 151.659 280.319 158.997 280.234 168.128L253.866 173.248C254.037 178.709 254.805 183.232 256.17 186.816C257.621 190.315 259.669 192.277 262.314 192.704C263.765 192.875 265.13 192.491 266.41 191.552C267.69 190.613 268.842 189.291 269.866 187.584C270.975 185.792 271.914 184.043 272.682 182.336C273.45 180.629 274.218 178.709 274.986 176.576ZM261.418 143.936C259.541 144.021 257.919 146.197 256.554 150.464C255.189 154.731 254.335 159.723 253.994 165.44L267.818 162.752C267.562 158.4 267.05 154.773 266.282 151.872C265.599 148.885 264.831 146.837 263.978 145.728C263.21 144.533 262.357 143.936 261.418 143.936ZM331.524 197.44H333.06V199.872H323.588C321.028 199.872 318.809 198.763 316.932 196.544C316.42 195.947 315.908 195.051 315.396 193.856C314.287 195.648 313.391 196.928 312.708 197.696C312.111 198.379 310.959 199.104 309.252 199.872C307.631 200.64 305.54 201.067 302.98 201.152C297.945 201.408 293.593 198.635 289.924 192.832C286.34 186.944 284.591 179.179 284.676 169.536C284.761 157.931 287.065 149.312 291.588 143.68C296.111 138.048 301.487 136.384 307.716 138.688C310.447 139.627 312.58 141.76 314.116 145.088V124.736C314.116 122.517 313.689 120.64 312.836 119.104C312.068 117.483 311.087 116.672 309.892 116.672H308.484V114.24L327.428 110.912V189.504C327.343 191.723 327.727 193.6 328.58 195.136C329.433 196.672 330.415 197.44 331.524 197.44ZM314.116 175.168V166.08C313.945 160.363 313.391 156.053 312.452 153.152C311.599 150.165 310.276 148.288 308.484 147.52C305.753 146.496 303.535 148.203 301.828 152.64C300.207 157.077 299.353 163.179 299.268 170.944C299.183 176.32 299.823 181.227 301.188 185.664C302.639 190.101 304.601 192.448 307.076 192.704C309.124 192.875 310.745 191.467 311.94 188.48C313.135 185.408 313.86 180.971 314.116 175.168ZM353.899 113.856V111.04H381.419V113.856H379.755C378.475 113.856 377.366 114.752 376.427 116.544C375.488 118.336 375.062 120.512 375.147 123.072V165.312C375.062 168.384 375.787 170.176 377.323 170.688H390.251C391.702 170.176 392.427 168.384 392.427 165.312V123.072C392.427 120.512 391.958 118.336 391.019 116.544C390.08 114.752 388.971 113.856 387.691 113.856H386.027V111.04H413.547V113.856H411.883C410.688 113.856 409.622 114.709 408.683 116.416C407.744 118.123 407.275 120.171 407.275 122.56V188.48C407.275 190.955 407.744 193.045 408.683 194.752C409.622 196.373 410.688 197.184 411.883 197.184H413.547V200H386.027V197.184H387.691C388.971 197.184 390.08 196.288 391.019 194.496C391.958 192.704 392.427 190.571 392.427 188.096V183.616C392.427 177.472 389.952 174.4 385.003 174.4H382.443C377.579 174.4 375.147 177.472 375.147 183.616V188.096C375.062 190.571 375.488 192.704 376.427 194.496C377.366 196.288 378.475 197.184 379.755 197.184H381.419V200H353.899V197.184H355.563C356.758 197.184 357.824 196.331 358.763 194.624C359.702 192.832 360.171 190.741 360.171 188.352V132.288C360.086 120 358.55 113.856 355.563 113.856H353.899ZM420.811 147.008C424.907 140.779 429.814 137.664 435.531 137.664C441.248 137.664 446.112 140.779 450.123 147.008C454.219 153.152 456.267 160.619 456.267 169.408C456.267 178.197 454.219 185.707 450.123 191.936C446.112 198.08 441.248 201.152 435.531 201.152C429.814 201.152 424.907 198.08 420.811 191.936C416.8 185.707 414.795 178.197 414.795 169.408C414.795 160.619 416.8 153.152 420.811 147.008ZM430.411 188.864C431.862 194.155 433.568 196.8 435.531 196.8C437.579 196.8 439.286 194.155 440.651 188.864C442.102 183.488 442.827 177.045 442.827 169.536C442.827 161.941 442.102 155.456 440.651 150.08C439.286 144.704 437.579 142.016 435.531 142.016C433.568 142.016 431.862 144.704 430.411 150.08C428.96 155.456 428.235 161.941 428.235 169.536C428.235 177.045 428.96 183.488 430.411 188.864ZM482.216 191.68C484.691 191.595 486.44 190.485 487.464 188.352C488.488 186.219 489.043 182.763 489.128 177.984V153.024C489.128 150.72 488.701 148.8 487.848 147.264C487.08 145.643 486.099 144.832 484.904 144.832H483.496V142.4L502.44 139.2V189.376C502.44 191.68 502.824 193.643 503.592 195.264C504.445 196.8 505.427 197.568 506.536 197.568H508.072V200C503.208 200.085 500.051 200.085 498.6 200C498.088 200 497.576 199.957 497.064 199.872C496.637 199.701 496.253 199.573 495.912 199.488C495.571 199.403 495.229 199.232 494.888 198.976C494.547 198.635 494.248 198.379 493.992 198.208C493.736 198.037 493.437 197.739 493.096 197.312C492.84 196.885 492.627 196.587 492.456 196.416C492.371 196.245 492.157 195.904 491.816 195.392C491.56 194.88 491.389 194.581 491.304 194.496C491.304 194.325 491.133 193.941 490.792 193.344C490.536 192.747 490.408 192.405 490.408 192.32C487.933 198.123 484.52 201.067 480.168 201.152C469.16 201.493 463.528 192.619 463.272 174.528V153.024C463.272 150.72 462.845 148.8 461.992 147.264C461.224 145.643 460.285 144.832 459.176 144.832H457.64V142.4L476.584 139.2V174.528C476.157 186.133 478.035 191.851 482.216 191.68ZM539.467 157.76C539.467 156.565 538.998 155.157 538.059 153.536C537.12 151.915 535.926 150.464 534.475 149.184C533.024 147.819 531.446 146.624 529.739 145.6C528.118 144.576 526.624 144.064 525.259 144.064C523.894 143.979 522.784 144.405 521.931 145.344C521.334 146.624 521.035 148.032 521.035 149.568C521.12 151.019 521.931 152.768 523.467 154.816C525.088 156.864 527.35 158.784 530.251 160.576C535.286 163.819 538.912 166.507 541.131 168.64C543.35 170.773 544.886 173.035 545.739 175.424C546.848 179.349 547.019 182.933 546.251 186.176C545.568 189.333 544.203 192.064 542.155 194.368C540.192 196.587 537.718 198.293 534.731 199.488C531.83 200.683 528.672 201.237 525.259 201.152C519.115 201.067 514.08 199.36 510.155 196.032L518.475 177.344L520.139 178.112C519.883 185.536 522.358 190.443 527.563 192.832C531.062 194.453 534.134 194.411 536.779 192.704C538.059 191.936 538.784 190.955 538.955 189.76C539.126 188.48 539.083 187.456 538.827 186.688C538.656 185.835 538.059 184.981 537.035 184.128C536.011 183.189 534.987 182.421 533.963 181.824C533.024 181.227 531.318 180.245 528.843 178.88C526.454 177.429 524.235 176.021 522.187 174.656C518.262 172.096 515.488 168.811 513.867 164.8C512.246 160.704 511.819 156.736 512.587 152.896C513.355 148.971 515.019 145.643 517.579 142.912C519.371 140.949 521.419 139.541 523.723 138.688C526.112 137.835 528.416 137.536 530.635 137.792C532.427 138.048 534.219 138.603 536.011 139.456C537.888 140.309 539.382 141.035 540.491 141.632C541.6 142.144 542.368 142.272 542.795 142.016L544.587 142.528L541.131 158.272L539.467 157.76ZM585.236 176.576L587.156 176.192L589.588 190.912C589.503 191.168 589.375 191.552 589.204 192.064C589.033 192.491 588.479 193.301 587.54 194.496C586.687 195.605 585.663 196.629 584.468 197.568C583.273 198.421 581.567 199.232 579.348 200C577.215 200.768 574.825 201.152 572.18 201.152C568.169 201.237 564.585 200.128 561.428 197.824C558.271 195.435 555.881 192.405 554.26 188.736C552.724 184.981 551.615 180.843 550.932 176.32C550.249 171.712 550.292 167.147 551.06 162.624C551.913 158.101 553.151 153.963 554.772 150.208C556.393 146.453 558.74 143.424 561.812 141.12C564.969 138.816 568.511 137.707 572.436 137.792C578.409 137.792 582.932 140.565 586.004 146.112C589.076 151.659 590.569 158.997 590.484 168.128L564.116 173.248C564.287 178.709 565.055 183.232 566.42 186.816C567.871 190.315 569.919 192.277 572.564 192.704C574.015 192.875 575.38 192.491 576.66 191.552C577.94 190.613 579.092 189.291 580.116 187.584C581.225 185.792 582.164 184.043 582.932 182.336C583.7 180.629 584.468 178.709 585.236 176.576ZM571.668 143.936C569.791 144.021 568.169 146.197 566.804 150.464C565.439 154.731 564.585 159.723 564.244 165.44L578.068 162.752C577.812 158.4 577.3 154.773 576.532 151.872C575.849 148.885 575.081 146.837 574.228 145.728C573.46 144.533 572.607 143.936 571.668 143.936Z" fill="#CC5600"/>
+</svg>

From 0d966777ad4215b83738fceb283144ebf380ad81 Mon Sep 17 00:00:00 2001
From: Ivoine <ivoinestrachan242@gmail.com>
Date: Sun, 8 Oct 2023 20:28:54 -0400
Subject: [PATCH 060/111] new card text

---
 components/index/cards/haunted.js      |  2 +-
 public/haunted/haunted-text-biege.svg  |  3 +++
 public/haunted/haunted-text-shadow.svg | 22 ++++++++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 public/haunted/haunted-text-biege.svg
 create mode 100644 public/haunted/haunted-text-shadow.svg

diff --git a/components/index/cards/haunted.js b/components/index/cards/haunted.js
index 8fd211dc7..504b5ceef 100644
--- a/components/index/cards/haunted.js
+++ b/components/index/cards/haunted.js
@@ -21,7 +21,7 @@ export default function Haunted() {
     >
       <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
-          src="/haunted/haunted-text.svg"
+          src="/haunted/haunted-text-shadow.svg"
           sx={{
             width: ['200px', '250px', '300px'],
             mt: ['-10px', '-20px', '-20px'],
diff --git a/public/haunted/haunted-text-biege.svg b/public/haunted/haunted-text-biege.svg
new file mode 100644
index 000000000..ab264ff0c
--- /dev/null
+++ b/public/haunted/haunted-text-biege.svg
@@ -0,0 +1,3 @@
+<svg width="626" height="303" viewBox="0 0 626 303" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.024 113.856V111.04H28.544V113.856H26.88C25.6 113.856 24.4907 114.752 23.552 116.544C22.6133 118.336 22.1867 120.512 22.272 123.072V165.312C22.1867 168.384 22.912 170.176 24.448 170.688H37.376C38.8267 170.176 39.552 168.384 39.552 165.312V123.072C39.552 120.512 39.0827 118.336 38.144 116.544C37.2053 114.752 36.096 113.856 34.816 113.856H33.152V111.04H60.672V113.856H59.008C57.8133 113.856 56.7467 114.709 55.808 116.416C54.8693 118.123 54.4 120.171 54.4 122.56V188.48C54.4 190.955 54.8693 193.045 55.808 194.752C56.7467 196.373 57.8133 197.184 59.008 197.184H60.672V200H33.152V197.184H34.816C36.096 197.184 37.2053 196.288 38.144 194.496C39.0827 192.704 39.552 190.571 39.552 188.096V183.616C39.552 177.472 37.0773 174.4 32.128 174.4H29.568C24.704 174.4 22.272 177.472 22.272 183.616V188.096C22.1867 190.571 22.6133 192.704 23.552 194.496C24.4907 196.288 25.6 197.184 26.88 197.184H28.544V200H1.024V197.184H2.688C3.88267 197.184 4.94933 196.331 5.888 194.624C6.82667 192.832 7.296 190.741 7.296 188.352V132.288C7.21067 120 5.67467 113.856 2.688 113.856H1.024ZM106.181 197.44H107.717V199.872H98.245C95.5143 199.872 93.2103 198.763 91.333 196.544C90.6503 195.691 90.0957 194.795 89.669 193.856C88.0477 196.245 85.9997 198.123 83.525 199.488C81.0503 200.768 78.4903 201.323 75.845 201.152C72.261 200.896 69.317 199.403 67.013 196.672C64.709 193.941 63.301 190.869 62.789 187.456C62.3623 184.043 62.789 180.544 64.069 176.96C65.4343 173.376 67.6103 170.645 70.597 168.768C71.7063 168.171 73.4557 167.317 75.845 166.208C78.2343 165.099 80.325 164.075 82.117 163.136C83.9943 162.197 85.317 161.344 86.085 160.576C88.133 158.443 89.1143 156.224 89.029 153.92C89.029 151.531 88.261 149.525 86.725 147.904C85.2743 146.197 83.7383 145.643 82.117 146.24C80.581 146.923 78.8743 148.331 76.997 150.464C75.205 152.512 73.797 154.432 72.773 156.224L71.109 158.912H68.805L68.165 142.144C68.421 142.059 69.189 141.888 70.469 141.632C71.0663 142.315 71.749 142.699 72.517 142.784C73.285 142.784 74.1383 142.571 75.077 142.144C76.0157 141.717 76.9543 141.248 77.893 140.736C78.917 140.224 80.1117 139.712 81.477 139.2C82.8423 138.603 84.165 138.219 85.445 138.048C88.261 137.621 90.693 137.792 92.741 138.56C94.8743 139.328 96.5383 140.48 97.733 142.016C98.9277 143.467 99.8663 145.344 100.549 147.648C101.232 149.867 101.658 152 101.829 154.048C102 156.011 102.085 158.187 102.085 160.576V191.936C102.341 193.557 102.853 194.88 103.621 195.904C104.389 196.928 105.242 197.44 106.181 197.44ZM80.581 190.016C81.7757 189.76 82.7997 189.333 83.653 188.736C84.5917 188.053 85.317 187.157 85.829 186.048C86.341 184.939 86.7677 183.957 87.109 183.104C87.4503 182.165 87.6637 180.843 87.749 179.136C87.8343 177.429 87.877 176.192 87.877 175.424C87.9623 174.571 87.9623 173.205 87.877 171.328C87.877 169.365 87.877 168.128 87.877 167.616C87.7063 168.469 86.6397 169.451 84.677 170.56C82.7997 171.584 80.837 172.779 78.789 174.144C76.741 175.424 75.4183 176.747 74.821 178.112C73.285 181.44 73.285 184.384 74.821 186.944C76.4423 189.504 78.3623 190.528 80.581 190.016ZM129.841 191.68C132.316 191.595 134.065 190.485 135.089 188.352C136.113 186.219 136.668 182.763 136.753 177.984V153.024C136.753 150.72 136.326 148.8 135.473 147.264C134.705 145.643 133.724 144.832 132.529 144.832H131.121V142.4L150.065 139.2V189.376C150.065 191.68 150.449 193.643 151.217 195.264C152.07 196.8 153.052 197.568 154.161 197.568H155.697V200C150.833 200.085 147.676 200.085 146.225 200C145.713 200 145.201 199.957 144.689 199.872C144.262 199.701 143.878 199.573 143.537 199.488C143.196 199.403 142.854 199.232 142.513 198.976C142.172 198.635 141.873 198.379 141.617 198.208C141.361 198.037 141.062 197.739 140.721 197.312C140.465 196.885 140.252 196.587 140.081 196.416C139.996 196.245 139.782 195.904 139.441 195.392C139.185 194.88 139.014 194.581 138.929 194.496C138.929 194.325 138.758 193.941 138.417 193.344C138.161 192.747 138.033 192.405 138.033 192.32C135.558 198.123 132.145 201.067 127.793 201.152C116.785 201.493 111.153 192.619 110.897 174.528V153.024C110.897 150.72 110.47 148.8 109.617 147.264C108.849 145.643 107.91 144.832 106.801 144.832H105.265V142.4L124.209 139.2V174.528C123.782 186.133 125.66 191.851 129.841 191.68ZM176.596 146.496C179.327 141.888 181.929 139.243 184.404 138.56C186.793 138.048 188.884 137.877 190.676 138.048C192.553 138.133 194.132 138.816 195.412 140.096C196.777 141.376 197.887 142.827 198.74 144.448C199.679 145.984 200.404 147.947 200.916 150.336C201.428 152.64 201.769 154.944 201.94 157.248C202.196 159.467 202.367 161.941 202.452 164.672V189.504C202.452 191.723 202.836 193.643 203.604 195.264C204.457 196.8 205.439 197.568 206.548 197.568H208.084V200H183.508V197.568H184.916C186.111 197.568 187.092 196.8 187.86 195.264C188.713 193.643 189.14 191.723 189.14 189.504V164.544C189.225 159.168 188.799 155.115 187.86 152.384C186.921 149.568 185.471 148.373 183.508 148.8C179.071 149.653 176.767 154.944 176.596 164.672V189.504C176.596 191.723 176.98 193.643 177.748 195.264C178.601 196.8 179.583 197.568 180.692 197.568H182.228V200H157.652V197.568H159.188C160.297 197.568 161.236 196.8 162.004 195.264C162.857 193.643 163.284 191.723 163.284 189.504V153.152C163.284 150.933 162.857 149.013 162.004 147.392C161.236 145.685 160.297 144.832 159.188 144.832H157.652V142.4L176.596 139.2V146.496ZM224.578 110.784V133.952C224.578 137.195 225.773 138.816 228.162 138.816V138.944H235.842V142.144H229.826C228.546 142.144 227.351 142.869 226.242 144.32C225.133 145.771 224.578 147.776 224.578 150.336V180.16C224.578 182.72 224.578 184.939 224.578 186.816C224.663 188.608 224.834 190.357 225.09 192.064C225.346 193.771 225.73 195.008 226.242 195.776C226.839 196.544 227.565 196.757 228.418 196.416C229.698 195.904 230.637 194.197 231.234 191.296C231.917 188.309 232.258 185.493 232.258 182.848V178.88L234.69 178.368L240.066 193.984C239.639 194.496 238.957 195.179 238.018 196.032C237.165 196.8 235.501 197.867 233.026 199.232C230.637 200.512 228.375 201.152 226.242 201.152C221.122 201.237 217.325 199.317 214.85 195.392C212.461 191.467 211.266 186.389 211.266 180.16V142.144H206.018V138.944H207.81L207.682 138.816C209.986 138.816 211.181 137.365 211.266 134.464V123.968C211.266 123.627 211.223 123.328 211.138 123.072C211.138 122.731 211.053 122.475 210.882 122.304C210.797 122.048 210.669 121.835 210.498 121.664C210.327 121.493 210.114 121.365 209.858 121.28C209.602 121.109 209.389 120.981 209.218 120.896C209.133 120.811 208.919 120.768 208.578 120.768C208.237 120.683 207.981 120.64 207.81 120.64C207.725 120.555 207.511 120.512 207.17 120.512C206.914 120.512 206.786 120.512 206.786 120.512V118.464L224.578 110.784ZM274.986 176.576L276.906 176.192L279.338 190.912C279.253 191.168 279.125 191.552 278.954 192.064C278.783 192.491 278.229 193.301 277.29 194.496C276.437 195.605 275.413 196.629 274.218 197.568C273.023 198.421 271.317 199.232 269.098 200C266.965 200.768 264.575 201.152 261.93 201.152C257.919 201.237 254.335 200.128 251.178 197.824C248.021 195.435 245.631 192.405 244.01 188.736C242.474 184.981 241.365 180.843 240.682 176.32C239.999 171.712 240.042 167.147 240.81 162.624C241.663 158.101 242.901 153.963 244.522 150.208C246.143 146.453 248.49 143.424 251.562 141.12C254.719 138.816 258.261 137.707 262.186 137.792C268.159 137.792 272.682 140.565 275.754 146.112C278.826 151.659 280.319 158.997 280.234 168.128L253.866 173.248C254.037 178.709 254.805 183.232 256.17 186.816C257.621 190.315 259.669 192.277 262.314 192.704C263.765 192.875 265.13 192.491 266.41 191.552C267.69 190.613 268.842 189.291 269.866 187.584C270.975 185.792 271.914 184.043 272.682 182.336C273.45 180.629 274.218 178.709 274.986 176.576ZM261.418 143.936C259.541 144.021 257.919 146.197 256.554 150.464C255.189 154.731 254.335 159.723 253.994 165.44L267.818 162.752C267.562 158.4 267.05 154.773 266.282 151.872C265.599 148.885 264.831 146.837 263.978 145.728C263.21 144.533 262.357 143.936 261.418 143.936ZM331.524 197.44H333.06V199.872H323.588C321.028 199.872 318.809 198.763 316.932 196.544C316.42 195.947 315.908 195.051 315.396 193.856C314.287 195.648 313.391 196.928 312.708 197.696C312.111 198.379 310.959 199.104 309.252 199.872C307.631 200.64 305.54 201.067 302.98 201.152C297.945 201.408 293.593 198.635 289.924 192.832C286.34 186.944 284.591 179.179 284.676 169.536C284.761 157.931 287.065 149.312 291.588 143.68C296.111 138.048 301.487 136.384 307.716 138.688C310.447 139.627 312.58 141.76 314.116 145.088V124.736C314.116 122.517 313.689 120.64 312.836 119.104C312.068 117.483 311.087 116.672 309.892 116.672H308.484V114.24L327.428 110.912V189.504C327.343 191.723 327.727 193.6 328.58 195.136C329.433 196.672 330.415 197.44 331.524 197.44ZM314.116 175.168V166.08C313.945 160.363 313.391 156.053 312.452 153.152C311.599 150.165 310.276 148.288 308.484 147.52C305.753 146.496 303.535 148.203 301.828 152.64C300.207 157.077 299.353 163.179 299.268 170.944C299.183 176.32 299.823 181.227 301.188 185.664C302.639 190.101 304.601 192.448 307.076 192.704C309.124 192.875 310.745 191.467 311.94 188.48C313.135 185.408 313.86 180.971 314.116 175.168ZM353.899 113.856V111.04H381.419V113.856H379.755C378.475 113.856 377.366 114.752 376.427 116.544C375.488 118.336 375.062 120.512 375.147 123.072V165.312C375.062 168.384 375.787 170.176 377.323 170.688H390.251C391.702 170.176 392.427 168.384 392.427 165.312V123.072C392.427 120.512 391.958 118.336 391.019 116.544C390.08 114.752 388.971 113.856 387.691 113.856H386.027V111.04H413.547V113.856H411.883C410.688 113.856 409.622 114.709 408.683 116.416C407.744 118.123 407.275 120.171 407.275 122.56V188.48C407.275 190.955 407.744 193.045 408.683 194.752C409.622 196.373 410.688 197.184 411.883 197.184H413.547V200H386.027V197.184H387.691C388.971 197.184 390.08 196.288 391.019 194.496C391.958 192.704 392.427 190.571 392.427 188.096V183.616C392.427 177.472 389.952 174.4 385.003 174.4H382.443C377.579 174.4 375.147 177.472 375.147 183.616V188.096C375.062 190.571 375.488 192.704 376.427 194.496C377.366 196.288 378.475 197.184 379.755 197.184H381.419V200H353.899V197.184H355.563C356.758 197.184 357.824 196.331 358.763 194.624C359.702 192.832 360.171 190.741 360.171 188.352V132.288C360.086 120 358.55 113.856 355.563 113.856H353.899ZM420.811 147.008C424.907 140.779 429.814 137.664 435.531 137.664C441.248 137.664 446.112 140.779 450.123 147.008C454.219 153.152 456.267 160.619 456.267 169.408C456.267 178.197 454.219 185.707 450.123 191.936C446.112 198.08 441.248 201.152 435.531 201.152C429.814 201.152 424.907 198.08 420.811 191.936C416.8 185.707 414.795 178.197 414.795 169.408C414.795 160.619 416.8 153.152 420.811 147.008ZM430.411 188.864C431.862 194.155 433.568 196.8 435.531 196.8C437.579 196.8 439.286 194.155 440.651 188.864C442.102 183.488 442.827 177.045 442.827 169.536C442.827 161.941 442.102 155.456 440.651 150.08C439.286 144.704 437.579 142.016 435.531 142.016C433.568 142.016 431.862 144.704 430.411 150.08C428.96 155.456 428.235 161.941 428.235 169.536C428.235 177.045 428.96 183.488 430.411 188.864ZM482.216 191.68C484.691 191.595 486.44 190.485 487.464 188.352C488.488 186.219 489.043 182.763 489.128 177.984V153.024C489.128 150.72 488.701 148.8 487.848 147.264C487.08 145.643 486.099 144.832 484.904 144.832H483.496V142.4L502.44 139.2V189.376C502.44 191.68 502.824 193.643 503.592 195.264C504.445 196.8 505.427 197.568 506.536 197.568H508.072V200C503.208 200.085 500.051 200.085 498.6 200C498.088 200 497.576 199.957 497.064 199.872C496.637 199.701 496.253 199.573 495.912 199.488C495.571 199.403 495.229 199.232 494.888 198.976C494.547 198.635 494.248 198.379 493.992 198.208C493.736 198.037 493.437 197.739 493.096 197.312C492.84 196.885 492.627 196.587 492.456 196.416C492.371 196.245 492.157 195.904 491.816 195.392C491.56 194.88 491.389 194.581 491.304 194.496C491.304 194.325 491.133 193.941 490.792 193.344C490.536 192.747 490.408 192.405 490.408 192.32C487.933 198.123 484.52 201.067 480.168 201.152C469.16 201.493 463.528 192.619 463.272 174.528V153.024C463.272 150.72 462.845 148.8 461.992 147.264C461.224 145.643 460.285 144.832 459.176 144.832H457.64V142.4L476.584 139.2V174.528C476.157 186.133 478.035 191.851 482.216 191.68ZM539.467 157.76C539.467 156.565 538.998 155.157 538.059 153.536C537.12 151.915 535.926 150.464 534.475 149.184C533.024 147.819 531.446 146.624 529.739 145.6C528.118 144.576 526.624 144.064 525.259 144.064C523.894 143.979 522.784 144.405 521.931 145.344C521.334 146.624 521.035 148.032 521.035 149.568C521.12 151.019 521.931 152.768 523.467 154.816C525.088 156.864 527.35 158.784 530.251 160.576C535.286 163.819 538.912 166.507 541.131 168.64C543.35 170.773 544.886 173.035 545.739 175.424C546.848 179.349 547.019 182.933 546.251 186.176C545.568 189.333 544.203 192.064 542.155 194.368C540.192 196.587 537.718 198.293 534.731 199.488C531.83 200.683 528.672 201.237 525.259 201.152C519.115 201.067 514.08 199.36 510.155 196.032L518.475 177.344L520.139 178.112C519.883 185.536 522.358 190.443 527.563 192.832C531.062 194.453 534.134 194.411 536.779 192.704C538.059 191.936 538.784 190.955 538.955 189.76C539.126 188.48 539.083 187.456 538.827 186.688C538.656 185.835 538.059 184.981 537.035 184.128C536.011 183.189 534.987 182.421 533.963 181.824C533.024 181.227 531.318 180.245 528.843 178.88C526.454 177.429 524.235 176.021 522.187 174.656C518.262 172.096 515.488 168.811 513.867 164.8C512.246 160.704 511.819 156.736 512.587 152.896C513.355 148.971 515.019 145.643 517.579 142.912C519.371 140.949 521.419 139.541 523.723 138.688C526.112 137.835 528.416 137.536 530.635 137.792C532.427 138.048 534.219 138.603 536.011 139.456C537.888 140.309 539.382 141.035 540.491 141.632C541.6 142.144 542.368 142.272 542.795 142.016L544.587 142.528L541.131 158.272L539.467 157.76ZM585.236 176.576L587.156 176.192L589.588 190.912C589.503 191.168 589.375 191.552 589.204 192.064C589.033 192.491 588.479 193.301 587.54 194.496C586.687 195.605 585.663 196.629 584.468 197.568C583.273 198.421 581.567 199.232 579.348 200C577.215 200.768 574.825 201.152 572.18 201.152C568.169 201.237 564.585 200.128 561.428 197.824C558.271 195.435 555.881 192.405 554.26 188.736C552.724 184.981 551.615 180.843 550.932 176.32C550.249 171.712 550.292 167.147 551.06 162.624C551.913 158.101 553.151 153.963 554.772 150.208C556.393 146.453 558.74 143.424 561.812 141.12C564.969 138.816 568.511 137.707 572.436 137.792C578.409 137.792 582.932 140.565 586.004 146.112C589.076 151.659 590.569 158.997 590.484 168.128L564.116 173.248C564.287 178.709 565.055 183.232 566.42 186.816C567.871 190.315 569.919 192.277 572.564 192.704C574.015 192.875 575.38 192.491 576.66 191.552C577.94 190.613 579.092 189.291 580.116 187.584C581.225 185.792 582.164 184.043 582.932 182.336C583.7 180.629 584.468 178.709 585.236 176.576ZM571.668 143.936C569.791 144.021 568.169 146.197 566.804 150.464C565.439 154.731 564.585 159.723 564.244 165.44L578.068 162.752C577.812 158.4 577.3 154.773 576.532 151.872C575.849 148.885 575.081 146.837 574.228 145.728C573.46 144.533 572.607 143.936 571.668 143.936Z" fill="#FEFAE0"/>
+</svg>
diff --git a/public/haunted/haunted-text-shadow.svg b/public/haunted/haunted-text-shadow.svg
new file mode 100644
index 000000000..ed3c4e68f
--- /dev/null
+++ b/public/haunted/haunted-text-shadow.svg
@@ -0,0 +1,22 @@
+<svg width="626" height="303" viewBox="0 0 626 303" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_934_15)">
+<g filter="url(#filter0_d_934_15)">
+<path d="M1.024 113.856V111.04H28.544V113.856H26.88C25.6 113.856 24.4907 114.752 23.552 116.544C22.6133 118.336 22.1867 120.512 22.272 123.072V165.312C22.1867 168.384 22.912 170.176 24.448 170.688H37.376C38.8267 170.176 39.552 168.384 39.552 165.312V123.072C39.552 120.512 39.0827 118.336 38.144 116.544C37.2053 114.752 36.096 113.856 34.816 113.856H33.152V111.04H60.672V113.856H59.008C57.8133 113.856 56.7467 114.709 55.808 116.416C54.8693 118.123 54.4 120.171 54.4 122.56V188.48C54.4 190.955 54.8693 193.045 55.808 194.752C56.7467 196.373 57.8133 197.184 59.008 197.184H60.672V200H33.152V197.184H34.816C36.096 197.184 37.2053 196.288 38.144 194.496C39.0827 192.704 39.552 190.571 39.552 188.096V183.616C39.552 177.472 37.0773 174.4 32.128 174.4H29.568C24.704 174.4 22.272 177.472 22.272 183.616V188.096C22.1867 190.571 22.6133 192.704 23.552 194.496C24.4907 196.288 25.6 197.184 26.88 197.184H28.544V200H1.024V197.184H2.688C3.88267 197.184 4.94933 196.331 5.888 194.624C6.82667 192.832 7.296 190.741 7.296 188.352V132.288C7.21067 120 5.67467 113.856 2.688 113.856H1.024ZM106.181 197.44H107.717V199.872H98.245C95.5143 199.872 93.2103 198.763 91.333 196.544C90.6503 195.691 90.0957 194.795 89.669 193.856C88.0477 196.245 85.9997 198.123 83.525 199.488C81.0503 200.768 78.4903 201.323 75.845 201.152C72.261 200.896 69.317 199.403 67.013 196.672C64.709 193.941 63.301 190.869 62.789 187.456C62.3623 184.043 62.789 180.544 64.069 176.96C65.4343 173.376 67.6103 170.645 70.597 168.768C71.7063 168.171 73.4557 167.317 75.845 166.208C78.2343 165.099 80.325 164.075 82.117 163.136C83.9943 162.197 85.317 161.344 86.085 160.576C88.133 158.443 89.1143 156.224 89.029 153.92C89.029 151.531 88.261 149.525 86.725 147.904C85.2743 146.197 83.7383 145.643 82.117 146.24C80.581 146.923 78.8743 148.331 76.997 150.464C75.205 152.512 73.797 154.432 72.773 156.224L71.109 158.912H68.805L68.165 142.144C68.421 142.059 69.189 141.888 70.469 141.632C71.0663 142.315 71.749 142.699 72.517 142.784C73.285 142.784 74.1383 142.571 75.077 142.144C76.0157 141.717 76.9543 141.248 77.893 140.736C78.917 140.224 80.1117 139.712 81.477 139.2C82.8423 138.603 84.165 138.219 85.445 138.048C88.261 137.621 90.693 137.792 92.741 138.56C94.8743 139.328 96.5383 140.48 97.733 142.016C98.9277 143.467 99.8663 145.344 100.549 147.648C101.232 149.867 101.658 152 101.829 154.048C102 156.011 102.085 158.187 102.085 160.576V191.936C102.341 193.557 102.853 194.88 103.621 195.904C104.389 196.928 105.242 197.44 106.181 197.44ZM80.581 190.016C81.7757 189.76 82.7997 189.333 83.653 188.736C84.5917 188.053 85.317 187.157 85.829 186.048C86.341 184.939 86.7677 183.957 87.109 183.104C87.4503 182.165 87.6637 180.843 87.749 179.136C87.8343 177.429 87.877 176.192 87.877 175.424C87.9623 174.571 87.9623 173.205 87.877 171.328C87.877 169.365 87.877 168.128 87.877 167.616C87.7063 168.469 86.6397 169.451 84.677 170.56C82.7997 171.584 80.837 172.779 78.789 174.144C76.741 175.424 75.4183 176.747 74.821 178.112C73.285 181.44 73.285 184.384 74.821 186.944C76.4423 189.504 78.3623 190.528 80.581 190.016ZM129.841 191.68C132.316 191.595 134.065 190.485 135.089 188.352C136.113 186.219 136.668 182.763 136.753 177.984V153.024C136.753 150.72 136.326 148.8 135.473 147.264C134.705 145.643 133.724 144.832 132.529 144.832H131.121V142.4L150.065 139.2V189.376C150.065 191.68 150.449 193.643 151.217 195.264C152.07 196.8 153.052 197.568 154.161 197.568H155.697V200C150.833 200.085 147.676 200.085 146.225 200C145.713 200 145.201 199.957 144.689 199.872C144.262 199.701 143.878 199.573 143.537 199.488C143.196 199.403 142.854 199.232 142.513 198.976C142.172 198.635 141.873 198.379 141.617 198.208C141.361 198.037 141.062 197.739 140.721 197.312C140.465 196.885 140.252 196.587 140.081 196.416C139.996 196.245 139.782 195.904 139.441 195.392C139.185 194.88 139.014 194.581 138.929 194.496C138.929 194.325 138.758 193.941 138.417 193.344C138.161 192.747 138.033 192.405 138.033 192.32C135.558 198.123 132.145 201.067 127.793 201.152C116.785 201.493 111.153 192.619 110.897 174.528V153.024C110.897 150.72 110.47 148.8 109.617 147.264C108.849 145.643 107.91 144.832 106.801 144.832H105.265V142.4L124.209 139.2V174.528C123.782 186.133 125.66 191.851 129.841 191.68ZM176.596 146.496C179.327 141.888 181.929 139.243 184.404 138.56C186.793 138.048 188.884 137.877 190.676 138.048C192.553 138.133 194.132 138.816 195.412 140.096C196.777 141.376 197.887 142.827 198.74 144.448C199.679 145.984 200.404 147.947 200.916 150.336C201.428 152.64 201.769 154.944 201.94 157.248C202.196 159.467 202.367 161.941 202.452 164.672V189.504C202.452 191.723 202.836 193.643 203.604 195.264C204.457 196.8 205.439 197.568 206.548 197.568H208.084V200H183.508V197.568H184.916C186.111 197.568 187.092 196.8 187.86 195.264C188.713 193.643 189.14 191.723 189.14 189.504V164.544C189.225 159.168 188.799 155.115 187.86 152.384C186.921 149.568 185.471 148.373 183.508 148.8C179.071 149.653 176.767 154.944 176.596 164.672V189.504C176.596 191.723 176.98 193.643 177.748 195.264C178.601 196.8 179.583 197.568 180.692 197.568H182.228V200H157.652V197.568H159.188C160.297 197.568 161.236 196.8 162.004 195.264C162.857 193.643 163.284 191.723 163.284 189.504V153.152C163.284 150.933 162.857 149.013 162.004 147.392C161.236 145.685 160.297 144.832 159.188 144.832H157.652V142.4L176.596 139.2V146.496ZM224.578 110.784V133.952C224.578 137.195 225.773 138.816 228.162 138.816V138.944H235.842V142.144H229.826C228.546 142.144 227.351 142.869 226.242 144.32C225.133 145.771 224.578 147.776 224.578 150.336V180.16C224.578 182.72 224.578 184.939 224.578 186.816C224.663 188.608 224.834 190.357 225.09 192.064C225.346 193.771 225.73 195.008 226.242 195.776C226.839 196.544 227.565 196.757 228.418 196.416C229.698 195.904 230.637 194.197 231.234 191.296C231.917 188.309 232.258 185.493 232.258 182.848V178.88L234.69 178.368L240.066 193.984C239.639 194.496 238.957 195.179 238.018 196.032C237.165 196.8 235.501 197.867 233.026 199.232C230.637 200.512 228.375 201.152 226.242 201.152C221.122 201.237 217.325 199.317 214.85 195.392C212.461 191.467 211.266 186.389 211.266 180.16V142.144H206.018V138.944H207.81L207.682 138.816C209.986 138.816 211.181 137.365 211.266 134.464V123.968C211.266 123.627 211.223 123.328 211.138 123.072C211.138 122.731 211.053 122.475 210.882 122.304C210.797 122.048 210.669 121.835 210.498 121.664C210.327 121.493 210.114 121.365 209.858 121.28C209.602 121.109 209.389 120.981 209.218 120.896C209.133 120.811 208.919 120.768 208.578 120.768C208.237 120.683 207.981 120.64 207.81 120.64C207.725 120.555 207.511 120.512 207.17 120.512C206.914 120.512 206.786 120.512 206.786 120.512V118.464L224.578 110.784ZM274.986 176.576L276.906 176.192L279.338 190.912C279.253 191.168 279.125 191.552 278.954 192.064C278.783 192.491 278.229 193.301 277.29 194.496C276.437 195.605 275.413 196.629 274.218 197.568C273.023 198.421 271.317 199.232 269.098 200C266.965 200.768 264.575 201.152 261.93 201.152C257.919 201.237 254.335 200.128 251.178 197.824C248.021 195.435 245.631 192.405 244.01 188.736C242.474 184.981 241.365 180.843 240.682 176.32C239.999 171.712 240.042 167.147 240.81 162.624C241.663 158.101 242.901 153.963 244.522 150.208C246.143 146.453 248.49 143.424 251.562 141.12C254.719 138.816 258.261 137.707 262.186 137.792C268.159 137.792 272.682 140.565 275.754 146.112C278.826 151.659 280.319 158.997 280.234 168.128L253.866 173.248C254.037 178.709 254.805 183.232 256.17 186.816C257.621 190.315 259.669 192.277 262.314 192.704C263.765 192.875 265.13 192.491 266.41 191.552C267.69 190.613 268.842 189.291 269.866 187.584C270.975 185.792 271.914 184.043 272.682 182.336C273.45 180.629 274.218 178.709 274.986 176.576ZM261.418 143.936C259.541 144.021 257.919 146.197 256.554 150.464C255.189 154.731 254.335 159.723 253.994 165.44L267.818 162.752C267.562 158.4 267.05 154.773 266.282 151.872C265.599 148.885 264.831 146.837 263.978 145.728C263.21 144.533 262.357 143.936 261.418 143.936ZM331.524 197.44H333.06V199.872H323.588C321.028 199.872 318.809 198.763 316.932 196.544C316.42 195.947 315.908 195.051 315.396 193.856C314.287 195.648 313.391 196.928 312.708 197.696C312.111 198.379 310.959 199.104 309.252 199.872C307.631 200.64 305.54 201.067 302.98 201.152C297.945 201.408 293.593 198.635 289.924 192.832C286.34 186.944 284.591 179.179 284.676 169.536C284.761 157.931 287.065 149.312 291.588 143.68C296.111 138.048 301.487 136.384 307.716 138.688C310.447 139.627 312.58 141.76 314.116 145.088V124.736C314.116 122.517 313.689 120.64 312.836 119.104C312.068 117.483 311.087 116.672 309.892 116.672H308.484V114.24L327.428 110.912V189.504C327.343 191.723 327.727 193.6 328.58 195.136C329.433 196.672 330.415 197.44 331.524 197.44ZM314.116 175.168V166.08C313.945 160.363 313.391 156.053 312.452 153.152C311.599 150.165 310.276 148.288 308.484 147.52C305.753 146.496 303.535 148.203 301.828 152.64C300.207 157.077 299.353 163.179 299.268 170.944C299.183 176.32 299.823 181.227 301.188 185.664C302.639 190.101 304.601 192.448 307.076 192.704C309.124 192.875 310.745 191.467 311.94 188.48C313.135 185.408 313.86 180.971 314.116 175.168ZM353.899 113.856V111.04H381.419V113.856H379.755C378.475 113.856 377.366 114.752 376.427 116.544C375.488 118.336 375.062 120.512 375.147 123.072V165.312C375.062 168.384 375.787 170.176 377.323 170.688H390.251C391.702 170.176 392.427 168.384 392.427 165.312V123.072C392.427 120.512 391.958 118.336 391.019 116.544C390.08 114.752 388.971 113.856 387.691 113.856H386.027V111.04H413.547V113.856H411.883C410.688 113.856 409.622 114.709 408.683 116.416C407.744 118.123 407.275 120.171 407.275 122.56V188.48C407.275 190.955 407.744 193.045 408.683 194.752C409.622 196.373 410.688 197.184 411.883 197.184H413.547V200H386.027V197.184H387.691C388.971 197.184 390.08 196.288 391.019 194.496C391.958 192.704 392.427 190.571 392.427 188.096V183.616C392.427 177.472 389.952 174.4 385.003 174.4H382.443C377.579 174.4 375.147 177.472 375.147 183.616V188.096C375.062 190.571 375.488 192.704 376.427 194.496C377.366 196.288 378.475 197.184 379.755 197.184H381.419V200H353.899V197.184H355.563C356.758 197.184 357.824 196.331 358.763 194.624C359.702 192.832 360.171 190.741 360.171 188.352V132.288C360.086 120 358.55 113.856 355.563 113.856H353.899ZM420.811 147.008C424.907 140.779 429.814 137.664 435.531 137.664C441.248 137.664 446.112 140.779 450.123 147.008C454.219 153.152 456.267 160.619 456.267 169.408C456.267 178.197 454.219 185.707 450.123 191.936C446.112 198.08 441.248 201.152 435.531 201.152C429.814 201.152 424.907 198.08 420.811 191.936C416.8 185.707 414.795 178.197 414.795 169.408C414.795 160.619 416.8 153.152 420.811 147.008ZM430.411 188.864C431.862 194.155 433.568 196.8 435.531 196.8C437.579 196.8 439.286 194.155 440.651 188.864C442.102 183.488 442.827 177.045 442.827 169.536C442.827 161.941 442.102 155.456 440.651 150.08C439.286 144.704 437.579 142.016 435.531 142.016C433.568 142.016 431.862 144.704 430.411 150.08C428.96 155.456 428.235 161.941 428.235 169.536C428.235 177.045 428.96 183.488 430.411 188.864ZM482.216 191.68C484.691 191.595 486.44 190.485 487.464 188.352C488.488 186.219 489.043 182.763 489.128 177.984V153.024C489.128 150.72 488.701 148.8 487.848 147.264C487.08 145.643 486.099 144.832 484.904 144.832H483.496V142.4L502.44 139.2V189.376C502.44 191.68 502.824 193.643 503.592 195.264C504.445 196.8 505.427 197.568 506.536 197.568H508.072V200C503.208 200.085 500.051 200.085 498.6 200C498.088 200 497.576 199.957 497.064 199.872C496.637 199.701 496.253 199.573 495.912 199.488C495.571 199.403 495.229 199.232 494.888 198.976C494.547 198.635 494.248 198.379 493.992 198.208C493.736 198.037 493.437 197.739 493.096 197.312C492.84 196.885 492.627 196.587 492.456 196.416C492.371 196.245 492.157 195.904 491.816 195.392C491.56 194.88 491.389 194.581 491.304 194.496C491.304 194.325 491.133 193.941 490.792 193.344C490.536 192.747 490.408 192.405 490.408 192.32C487.933 198.123 484.52 201.067 480.168 201.152C469.16 201.493 463.528 192.619 463.272 174.528V153.024C463.272 150.72 462.845 148.8 461.992 147.264C461.224 145.643 460.285 144.832 459.176 144.832H457.64V142.4L476.584 139.2V174.528C476.157 186.133 478.035 191.851 482.216 191.68ZM539.467 157.76C539.467 156.565 538.998 155.157 538.059 153.536C537.12 151.915 535.926 150.464 534.475 149.184C533.024 147.819 531.446 146.624 529.739 145.6C528.118 144.576 526.624 144.064 525.259 144.064C523.894 143.979 522.784 144.405 521.931 145.344C521.334 146.624 521.035 148.032 521.035 149.568C521.12 151.019 521.931 152.768 523.467 154.816C525.088 156.864 527.35 158.784 530.251 160.576C535.286 163.819 538.912 166.507 541.131 168.64C543.35 170.773 544.886 173.035 545.739 175.424C546.848 179.349 547.019 182.933 546.251 186.176C545.568 189.333 544.203 192.064 542.155 194.368C540.192 196.587 537.718 198.293 534.731 199.488C531.83 200.683 528.672 201.237 525.259 201.152C519.115 201.067 514.08 199.36 510.155 196.032L518.475 177.344L520.139 178.112C519.883 185.536 522.358 190.443 527.563 192.832C531.062 194.453 534.134 194.411 536.779 192.704C538.059 191.936 538.784 190.955 538.955 189.76C539.126 188.48 539.083 187.456 538.827 186.688C538.656 185.835 538.059 184.981 537.035 184.128C536.011 183.189 534.987 182.421 533.963 181.824C533.024 181.227 531.318 180.245 528.843 178.88C526.454 177.429 524.235 176.021 522.187 174.656C518.262 172.096 515.488 168.811 513.867 164.8C512.246 160.704 511.819 156.736 512.587 152.896C513.355 148.971 515.019 145.643 517.579 142.912C519.371 140.949 521.419 139.541 523.723 138.688C526.112 137.835 528.416 137.536 530.635 137.792C532.427 138.048 534.219 138.603 536.011 139.456C537.888 140.309 539.382 141.035 540.491 141.632C541.6 142.144 542.368 142.272 542.795 142.016L544.587 142.528L541.131 158.272L539.467 157.76ZM585.236 176.576L587.156 176.192L589.588 190.912C589.503 191.168 589.375 191.552 589.204 192.064C589.033 192.491 588.479 193.301 587.54 194.496C586.687 195.605 585.663 196.629 584.468 197.568C583.273 198.421 581.567 199.232 579.348 200C577.215 200.768 574.825 201.152 572.18 201.152C568.169 201.237 564.585 200.128 561.428 197.824C558.271 195.435 555.881 192.405 554.26 188.736C552.724 184.981 551.615 180.843 550.932 176.32C550.249 171.712 550.292 167.147 551.06 162.624C551.913 158.101 553.151 153.963 554.772 150.208C556.393 146.453 558.74 143.424 561.812 141.12C564.969 138.816 568.511 137.707 572.436 137.792C578.409 137.792 582.932 140.565 586.004 146.112C589.076 151.659 590.569 158.997 590.484 168.128L564.116 173.248C564.287 178.709 565.055 183.232 566.42 186.816C567.871 190.315 569.919 192.277 572.564 192.704C574.015 192.875 575.38 192.491 576.66 191.552C577.94 190.613 579.092 189.291 580.116 187.584C581.225 185.792 582.164 184.043 582.932 182.336C583.7 180.629 584.468 178.709 585.236 176.576ZM571.668 143.936C569.791 144.021 568.169 146.197 566.804 150.464C565.439 154.731 564.585 159.723 564.244 165.44L578.068 162.752C577.812 158.4 577.3 154.773 576.532 151.872C575.849 148.885 575.081 146.837 574.228 145.728C573.46 144.533 572.607 143.936 571.668 143.936Z" fill="#CC5600"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_934_15" x="-3.97656" y="109.784" width="599.59" height="100.88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.996078 0 0 0 0 0.980392 0 0 0 0 0.878431 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_934_15"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_934_15" result="shape"/>
+</filter>
+<clipPath id="clip0_934_15">
+<rect width="626" height="303" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 1521c2b8913f9e97f3ab66026e6dd521970c66c6 Mon Sep 17 00:00:00 2001
From: Ivoine <ivoinestrachan242@gmail.com>
Date: Sun, 8 Oct 2023 21:18:04 -0400
Subject: [PATCH 061/111] haunted house card

---
 components/index/cards/haunted.js |   4 ++--
 public/haunted/bg.webp            | Bin 0 -> 150162 bytes
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 public/haunted/bg.webp

diff --git a/components/index/cards/haunted.js b/components/index/cards/haunted.js
index 504b5ceef..3cb09150c 100644
--- a/components/index/cards/haunted.js
+++ b/components/index/cards/haunted.js
@@ -16,12 +16,12 @@ export default function Haunted() {
       }}
       position={[null, 'bottom', 'bottom']}
       highlight="#271932"
-      image="/haunted/haunted-bg.webp"
+      image="/haunted/bg.webp"
       filter="brightness(0.7)"
     >
       <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
-          src="/haunted/haunted-text-shadow.svg"
+          src="/haunted/haunted-text.svg"
           sx={{
             width: ['200px', '250px', '300px'],
             mt: ['-10px', '-20px', '-20px'],
diff --git a/public/haunted/bg.webp b/public/haunted/bg.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b69a944cd807ad7793e00a671b1fcc9c3bdb6097
GIT binary patch
literal 150162
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

literal 0
HcmV?d00001


From 103c1d508a37c33ed2d25d4d856149b05da8c180 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Mon, 9 Oct 2023 18:57:05 +0100
Subject: [PATCH 062/111] updating haunted card link colour

---
 components/index/cards/haunted.js | 45 ++++++++++++++++---------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/components/index/cards/haunted.js b/components/index/cards/haunted.js
index 3cb09150c..a7b25f616 100644
--- a/components/index/cards/haunted.js
+++ b/components/index/cards/haunted.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text, Link } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,44 +10,45 @@ export default function Haunted() {
       github_link="https://github.com/hackclub/www-hauntedhouse"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        border: '2px solid #EB6424',
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        border: "2px solid #EB6424",
       }}
-      position={[null, 'bottom', 'bottom']}
-      highlight="#271932"
+      position={[null, "bottom", "bottom"]}
+      highlight="#cc5600"
       image="/haunted/bg.webp"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/haunted/haunted-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Haunted"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
-       Haunted House is a Chicago-based event full of sites and frights! Join us from October 28-29 
-       for a weekend of coding pushing the bounds of creativity, where fright meets byte, and check out 
-       the website at <a href='https://haunted.hackclub.com'>haunted.hackclub.com</a>!
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+          Haunted House is a Chicago-based event full of sites and frights! Join
+          us from October 28-29 for a weekend of coding pushing the bounds of
+          creativity, where fright meets byte, and check out the website at{" "}
+          <Link href="https://haunted.hackclub.com">haunted.hackclub.com</Link>!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
       </Grid>
     </CardModel>
-  )
+  );
 }

From 693af8cd7996128b81071d95e915fdd198138262 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 063/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 202 +++++++++++++++----------
 components/mail-card.js                |  23 +++
 public/home/letter-pattern.svg         |  37 +++++
 3 files changed, 181 insertions(+), 81 deletions(-)
 create mode 100644 components/mail-card.js
 create mode 100644 public/home/letter-pattern.svg

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 0f8115f20..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,102 +1,114 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
   Alert,
   Card,
   Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+  Grid,
+} from "theme-ui";
+import BGImg from "../../background-image";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
+import Link from "next/link";
+import MailCard from "../../mail-card";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
-const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1050px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
         <Flex
           sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
           }}
         >
           <Box>
             <Text
               variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
             >
-              Stay in Touch
+              Join the newsletter
             </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
               We’ll send you an email no more than once a month, when we work on
-              something cool for you.
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -105,13 +117,13 @@ const MailingList = () => {
             onSubmit={handleSubmit}
             gap={[2, 3]}
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box sx={{ width: '100%' }}>
+            <Box sx={{ width: "100%" }}>
               <Input
                 autofillBackgroundColor="highlight"
                 type="text"
@@ -119,7 +131,12 @@ const MailingList = () => {
                 id="name"
                 placeholder="Your Name"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </Box>
             <div>
@@ -130,37 +147,60 @@ const MailingList = () => {
                 id="email"
                 placeholder="Your Email"
                 required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
               {submitting ? (
                 <>
                   <Loading />
-                  &nbsp;Subscribe
+                  &nbsp; Subscribe
                 </>
               ) : (
-                'Subscribe'
+                "Subscribe"
               )}
             </Button>
           </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;
diff --git a/components/mail-card.js b/components/mail-card.js
new file mode 100644
index 000000000..e3e1c217a
--- /dev/null
+++ b/components/mail-card.js
@@ -0,0 +1,23 @@
+import { Card, Text } from "theme-ui";
+import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
+
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
+  );
+}
\ No newline at end of file
diff --git a/public/home/letter-pattern.svg b/public/home/letter-pattern.svg
new file mode 100644
index 000000000..23bda7942
--- /dev/null
+++ b/public/home/letter-pattern.svg
@@ -0,0 +1,37 @@
+<svg width="293" height="6" viewBox="0 0 293 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6L10.9823 0H15.4038L12.4215 6H8Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.421509 6L3.40379 0H7.82527L4.843 6H0.421509Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6L26.9823 0H31.4038L28.4215 6H24Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4215 6L35.4038 0H39.8253L36.843 6H32.4215Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.843 6L43.8253 0H48.2468L45.2645 6H40.843Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5785 6L18.5608 0H22.9823L20 6H15.5785Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2645 6L52.2468 0H56.6683L53.686 6H49.2645Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.686 6L60.6683 0H65.0898L62.1075 6H57.686Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1075 6L69.0898 0H73.5113L70.529 6H66.1075Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5291 6L77.5113 0H81.9328L78.9505 6H74.5291Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9506 6L85.9328 0H90.3543L87.372 6H82.9506Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3721 6L94.3543 0H98.7758L95.7936 6H91.3721Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.7936 6L102.776 0H107.197L104.215 6H99.7936Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.215 6L111.197 0H115.619L112.637 6H108.215Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.637 6L119.619 0H124.04L121.058 6H116.637Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.058 6L128.04 0H132.462L129.48 6H125.058Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M133.48 6L136.462 0H140.883L137.901 6H133.48Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M141.901 6L144.883 0H149.305L146.323 6H141.901Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.323 6L153.305 0H157.726L154.744 6H150.323Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.744 6L161.726 0H166.148L163.166 6H158.744Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.166 6L170.148 0H174.569L171.587 6H167.166Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.587 6L178.569 0H182.991L180.009 6H175.587Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.009 6L186.991 0H191.412L188.43 6H184.009Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.43 6L195.412 0H199.834L196.852 6H192.43Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200.852 6L203.834 0H208.255L205.273 6H200.852Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.273 6L212.255 0H216.677L213.695 6H209.273Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.695 6L220.677 0H225.098L222.116 6H217.695Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.116 6L229.098 0H233.52L230.538 6H226.116Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.538 6L237.52 0H241.941L238.959 6H234.538Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M242.959 6L245.942 0H250.363L247.381 6H242.959Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.381 6L254.363 0H258.785L255.802 6H251.381Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.802 6L262.785 0H267.206L264.224 6H259.802Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.224 6L271.206 0H275.628L272.645 6H268.224Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M276.645 6L279.628 0H284.049L281.067 6H276.645Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M285.067 6L288.049 0H292.471L289.488 6H285.067Z" fill="#EC3750"/>
+</svg>

From 365186edd843793bb4e55469e6c10bcf63ca59df Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 064/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From e1de05474e35cb7fd161f5109143945bc57153f6 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 065/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7891 insertions(+), 7875 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 2adfb972ae8ff1dba91faffee7d06b749dcbb3c1 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 066/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From d16cd1b26bab3cba73d74e53254867c47c484783 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 067/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From 55de0a45223ef2da99f6957171905ab4f3ed65c8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 068/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From e4a0d30142d80672e764e567e0b43174f2a4c761 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 069/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7840 insertions(+), 7877 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From d32a07a4a16ff4052c0bbe982063e4c31db05b44 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 070/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From 7b903d72dd881263ae5c0ec2a98c27d42ca8a716 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 071/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 71b3df1075e0c6d0e2785b578556161b11574513 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 072/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 230 ++++++++++++-------------
 components/mail-card.js                |  49 ++----
 2 files changed, 120 insertions(+), 159 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,8 +1,17 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
+import {
+  Box,
+  Input,
+  Button,
+  Text,
+  Alert,
+  Card,
+  Flex,
+  Grid,
+} from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -18,7 +27,6 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
-      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -66,144 +74,118 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
-          <Flex
+        <Flex
+          sx={{
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
+          }}
+        >
+          <Box>
+            <Text
+              variant="title"
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
+            >
+              Join the newsletter
+            </Text>
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
+              We’ll send you an email no more than once a month, when we work on
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
+            </Text>
+          </Box>
+          <Grid
+            as="form"
+            ref={formRef}
+            onSubmit={handleSubmit}
+            gap={[2, 3]}
             sx={{
-              placeItems: "center",
-              justifyContent: "center",
-              alignItems: ["left", "left", "center"],
-              flexDirection: "column",
-              gap: "10px",
-              width: "75%",
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box>
-              <Text
-                variant="title"
+            <Box sx={{ width: "100%" }}>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="text"
+                name="name"
+                id="name"
+                placeholder="Your Name"
+                required
                 sx={{
-                  fontSize: [4, "36px", "42px", 6],
-                  zIndex: 2,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-              >
-                Join the newsletter
-              </Text>
-              <Text
+              />
+            </Box>
+            <div>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Your Email"
+                required
                 sx={{
-                  color: "darkless",
-                  mt: 2,
-                  fontSize: 3,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-                as="p"
-              >
-                We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
-              </Text>
-            </Box>
-            <Grid
-              as="form"
-              ref={formRef}
-              onSubmit={handleSubmit}
-              gap={[2, 3]}
-              sx={{
-                textAlign: "center",
-                alignItems: "end",
-                input: { bg: "sunken" },
-                width: "100%",
-              }}
-            >
-              <Box sx={{ width: "100%" }}>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="text"
-                  name="name"
-                  id="name"
-                  placeholder="Your Name"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </Box>
-              <div>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="email"
-                  name="email"
-                  id="email"
-                  placeholder="Your Email"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </div>
-              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-                {submitting ? (
-                  <>
-                    <Loading /> Subscribe
-                  </>
-                ) : submitted ? (
-                  <>
-                    <Icon glyph="send" /> You're on the list!
-                  </>
-                ) : (
-                  "Subscribe"
-                )}
-              </Button>
-            </Grid>
-            {/*{submitted && (
+              />
+            </div>
+            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              {submitting ? (
+                <>
+                  <Loading />
+                  &nbsp; Subscribe
+                </>
+              ) : (
+                "Subscribe"
+              )}
+            </Button>
+          </Grid>
+            {submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}*/}
-          </Flex>
-          <Box
-            sx={{
-              display: "grid",
-              gridGap: 4,
-              width: "100%",
-            }}
-          >
-            <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
-            />
-            <MailCard
-              subject="Community Newsletter"
-              date="September 2022"
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-            />
-          </Box>
+            )}
         </Flex>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
       <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
         src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
   );
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,40 +1,19 @@
-import { Box, Card, Text } from "theme-ui";
+import { Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-  return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
-          <Box
-            sx={{
-              width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
-              backgroundRepeat: "repeat-x",
-            }}
-          />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
-          </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
-        </Box>
-      </Card>
-    </Link>
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 192719ea115705d2c3b6633252ffcd628756e2bf Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 073/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From baf8d2cb73d6610d44e7e65f6d231cbc801c80fd Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 074/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 6db36ccc1fa8304253084a38da55be9c06707274 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 075/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7891 insertions(+), 7875 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From ee979701f7ea9936e05647e9a7d9abdfedfd4d61 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 076/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 98371c0347c6d431b77b3ae2dc248e644d1ca941 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 077/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From 41f486df733a82217bdf932600fb4e38198434ff Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 078/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 1e762b1d2fd92b97c6a9fce794121bbaedf9b44c Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 079/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7840 insertions(+), 7877 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From 08e0adb61ae5d6c50a362c6fef81d1c366f19bad Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 080/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From f22702856c6759db76f5bc839e157547c8195e82 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 081/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 3dafeadd16b8d937b376850efc877fe3fd187ac5 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 4 Oct 2023 21:38:17 +0100
Subject: [PATCH 082/111] bloody merge conflicts!

---
 components/index/cards/mailing-list.js | 17 +++++-------
 components/mail-card.js                | 36 ++++++++++++--------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..01da5d337 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -76,7 +76,7 @@ const MailingList = () => {
               alignItems: ["left", "left", "center"],
               flexDirection: "column",
               gap: "10px",
-              width: "75%",
+              width: ["100%", "75%"],
             }}
           >
             <Box>
@@ -160,29 +160,26 @@ const MailingList = () => {
                 )}
               </Button>
             </Grid>
-            {/*{submitted && (
-                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
-                    <Icon glyph="send" />
-                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
-                </Alert>
-            )}*/}
           </Flex>
           <Box
             sx={{
               display: "grid",
               gridGap: 4,
+              mt: [4, 0],
               width: "100%",
             }}
           >
             <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+              subject="👀 What’s up at Hack Club this time? 👀"
+              date="August 2022"
+              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
+              link="/newsletter/2022/07"
             />
             <MailCard
               subject="Community Newsletter"
               date="September 2022"
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+              link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..2eea2db92 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,18 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+export default function MailCard({ body, date, subject, link }) {
+  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
+    <Card
+      variant="interactive"
+      sx={{
+        maxWidth: "1500px",
+        cursor: "pointer",
+      }}
+    >
+      <Link href={link || "/newsletter"}>
+        <div>
           <Box
             sx={{
               width: "100%",
@@ -27,14 +23,14 @@ export default function MailCard(mail) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
+            {subject}
           </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>
-        </Box>
-      </Card>
-    </Link>
+        </div>
+      </Link>
+    </Card>
   );
 }

From 38f24406bd65c2a73254c0c4673a138f1b9ac6d8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Thu, 5 Oct 2023 08:35:35 +0100
Subject: [PATCH 083/111] updating copy + fixing links

---
 components/index/cards/mailing-list.js | 4 ++--
 components/mail-card.js                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 01da5d337..1d952fa12 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -173,7 +173,7 @@ const MailingList = () => {
               subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022/07"
+              link="/newsletter/2022-08-august/"
             />
             <MailCard
               subject="Community Newsletter"
diff --git a/components/mail-card.js b/components/mail-card.js
index 2eea2db92..7b4dec7d0 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -25,7 +25,7 @@ export default function MailCard({ body, date, subject, link }) {
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
             {subject}
           </Text>
-          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To You, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From 4d416488690d2b693a2ae8e7a3ff0b679616adac Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 15:47:55 +0100
Subject: [PATCH 084/111] changes

---
 components/index/cards/mailing-list.js | 39 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 1d952fa12..fd8895339 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,6 +5,22 @@ import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
+import styled from "@emotion/styled";
+import theme from "@hackclub/theme";
+
+/*const Base = styled(Box)`
+  background: ${(props) =>
+    props.dark
+      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
+      : `${theme.colors.snow} url('/pattern.svg') repeat`};
+  ${(props) =>
+    props.dark &&
+    `
+      background-size: ${theme.space[4]}px ${theme.space[4]}px;
+    `} @media print {
+    display: none;
+  }
+`;*/
 
 const Loading = () => (
   <Box
@@ -185,17 +201,18 @@ const MailingList = () => {
         </Flex>
       </Card>
       {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
+        sx={{
+          position: "absolute",
+          display: "block",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 0,
+          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          backgroundImage: `url('/pattern.svg') repeat`,
+        }}
+      />*/}
       <BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"

From ac6b08bc1868289d3cbc2282e7dde498f6c5ed5b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 085/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 272 ++++++++++++-------------
 components/mail-card.js                |  53 ++---
 2 files changed, 146 insertions(+), 179 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fd8895339..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,26 +1,19 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
+import {
+  Box,
+  Input,
+  Button,
+  Text,
+  Alert,
+  Card,
+  Flex,
+  Grid,
+} from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
-import styled from "@emotion/styled";
-import theme from "@hackclub/theme";
-
-/*const Base = styled(Box)`
-  background: ${(props) =>
-    props.dark
-      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
-      : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
-    props.dark &&
-    `
-      background-size: ${theme.space[4]}px ${theme.space[4]}px;
-    `} @media print {
-    display: none;
-  }
-`;*/
 
 const Loading = () => (
   <Box
@@ -34,7 +27,6 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
-      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -43,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -82,143 +74,131 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 5,
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
-          <Flex
-            sx={{
-              placeItems: "center",
-              justifyContent: "center",
-              alignItems: ["left", "left", "center"],
-              flexDirection: "column",
-              gap: "10px",
-              width: ["100%", "75%"],
-            }}
-          >
-            <Box>
-              <Text
-                variant="title"
-                sx={{
-                  fontSize: [4, "36px", "42px", 6],
-                  zIndex: 2,
-                  textAlign: "left",
-                }}
-              >
-                Join the newsletter
-              </Text>
-              <Text
-                sx={{
-                  color: "darkless",
-                  mt: 2,
-                  fontSize: 3,
-                  textAlign: "left",
-                }}
-                as="p"
-              >
-                We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
-              </Text>
-            </Box>
-            <Grid
-              as="form"
-              ref={formRef}
-              onSubmit={handleSubmit}
-              gap={[2, 3]}
+        <Flex
+          sx={{
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
+          }}
+        >
+          <Box>
+            <Text
+              variant="title"
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
+            >
+              Join the newsletter
+            </Text>
+            <Text
               sx={{
-                textAlign: "center",
-                alignItems: "end",
-                input: { bg: "sunken" },
-                width: "100%",
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
               }}
+              as="p"
             >
-              <Box sx={{ width: "100%" }}>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="text"
-                  name="name"
-                  id="name"
-                  placeholder="Your Name"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </Box>
-              <div>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="email"
-                  name="email"
-                  id="email"
-                  placeholder="Your Email"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </div>
-              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-                {submitting ? (
-                  <>
-                    <Loading /> Subscribe
-                  </>
-                ) : submitted ? (
-                  <>
-                    <Icon glyph="send" /> You're on the list!
-                  </>
-                ) : (
-                  "Subscribe"
-                )}
-              </Button>
-            </Grid>
-          </Flex>
-          <Box
+              We’ll send you an email no more than once a month, when we work on
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
+            </Text>
+          </Box>
+          <Grid
+            as="form"
+            ref={formRef}
+            onSubmit={handleSubmit}
+            gap={[2, 3]}
             sx={{
-              display: "grid",
-              gridGap: 4,
-              mt: [4, 0],
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
               width: "100%",
             }}
           >
-            <MailCard
-              subject="👀 What’s up at Hack Club this time? 👀"
-              date="August 2022"
-              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022-08-august/"
-            />
-            <MailCard
-              subject="Community Newsletter"
-              date="September 2022"
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-              link="/newsletter/2022-09-september/"
-            />
-          </Box>
+            <Box sx={{ width: "100%" }}>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="text"
+                name="name"
+                id="name"
+                placeholder="Your Name"
+                required
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
+              />
+            </Box>
+            <div>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Your Email"
+                required
+                sx={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
+                }}
+              />
+            </div>
+            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              {submitting ? (
+                <>
+                  <Loading />
+                  &nbsp; Subscribe
+                </>
+              ) : (
+                "Subscribe"
+              )}
+            </Button>
+          </Grid>
+            {submitted && (
+                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+                    <Icon glyph="send" />
+                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
+                </Alert>
+            )}
         </Flex>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        </Box>
       </Card>
-      {/*<Box
-        sx={{
-          position: "absolute",
-          display: "block",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 0,
-          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
-          backgroundImage: `url('/pattern.svg') repeat`,
-        }}
-      />*/}
-      <BGImg
-        src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 7b4dec7d0..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,36 +1,23 @@
-import { Box, Card, Text } from "theme-ui";
+import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
 
-export default function MailCard({ body, date, subject, link }) {
-  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
-  return (
-    <Card
-      variant="interactive"
-      sx={{
-        maxWidth: "1500px",
-        cursor: "pointer",
-      }}
-    >
-      <Link href={link || "/newsletter"}>
-        <div>
-          <Box
-            sx={{
-              width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
-              backgroundRepeat: "repeat-x",
-            }}
-          />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {subject}
-          </Text>
-          <Text as="p">{date} — To You, From Hack Club</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
-        </div>
-      </Link>
-    </Card>
+import pattern from "../public/../public/home/letter-pattern.svg"
+
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
-}
+}
\ No newline at end of file

From 06dc03626b9173bf97249eb345ac74e300a6bf8e Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 086/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 2607c3370fe286500beeea03229647adfa1bd6c6 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 087/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  39 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  33 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7891 insertions(+), 7875 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From 8d687277f74ea9bba5e29c964cd865feed3719d6 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 088/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 50113dbda221646f3de35cb17c3f71bb1048e0e3 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 089/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From 353e8192a658ad4ee821c743dc5da341b6cf9694 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 090/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 9087cf06ce9404cdcff16336902c03cd952dc0a9 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 091/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7840 insertions(+), 7877 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From cad2ab2d41b588c9b92f3a1db4397444f8ce1009 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 092/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From 22c14dc47fea3ab758c9bcca18637d9c02c631a8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 093/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From 853ccad4e2965fb2843863cf107f9af0ed0117ea Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 094/111] started on redesign of the newsletter section +
 formatted things

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 +--
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        | 229 ++--
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |  47 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 +--
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 +--
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 ++---
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 ++-
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 +--
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7981 insertions(+), 7989 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d441f1c57..e574638e9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm' # See documentation for possible values
-    directory: '/' # Location of package manifests
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
diff --git a/components/analytics.js b/components/analytics.js
index e5f61d010..65c22f3dd 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-)
+);
 
-export default Analytics
+export default Analytics;
diff --git a/components/announcement.js b/components/announcement.js
index 575363461..f3c0b75d9 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import Icon from './icon'
+import { Card, Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import Icon from "./icon";
 
 const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
+  from: { transform: "scaleY(0)" },
+  to: { transform: "scaleY(100%)" },
+});
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = 'accent',
+  color = "accent",
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? 'a' : 'div'}
+    as={props.href ? "a" : "div"}
     variant="interactive"
     sx={{
-      variant: 'cards.translucent',
-      mx: 'auto',
-      maxWidth: 'narrow',
-      width: '100%',
-      textAlign: 'left',
-      textDecoration: 'none',
-      lineHeight: 'caption',
-      display: 'flex',
-      alignItems: 'center',
+      variant: "cards.translucent",
+      mx: "auto",
+      maxWidth: "narrow",
+      width: "100%",
+      textAlign: "left",
+      textDecoration: "none",
+      lineHeight: "caption",
+      display: "flex",
+      alignItems: "center",
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: 'scale(1)',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animation: `${unfold} 0.5s ease-out`
+      transform: "scale(1)",
+      "@media (prefers-reduced-motion: no-preference)": {
+        animation: `${unfold} 0.5s ease-out`,
       },
-      svg: { flexShrink: 'none' },
-      ...sx
+      svg: { flexShrink: "none" },
+      ...sx,
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {' '}
+          {" "}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-)
+);
 
-export default Announcement
+export default Announcement;
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index dec062e9c..8687ff915 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from '../sparkles'
+import Sparkles from "../sparkles";
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: 'currentColor',
-      WebkitTextStrokeWidth: ['2px', '3px'],
-      WebkitTextFillColor: 'transparent'
+      WebkitTextStroke: "currentColor",
+      WebkitTextStrokeWidth: ["2px", "3px"],
+      WebkitTextFillColor: "transparent",
     }}
   >
     {amount}
   </Sparkles>
-)
+);
 
-export default Amount
+export default Amount;
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 2e41e8eca..31a022edc 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-import { thousands } from '../../lib/members'
+import { Box, Button, Grid, Heading, Text } from "theme-ui";
+import Icon from "@hackclub/icons";
+import NextLink from "next/link";
+import { thousands } from "../../lib/members";
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
+        bg: "orange",
+        backgroundImage: (t) => t.util.gx("yellow", "orange"),
+        color: "white",
+        py: [4, 5],
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 701c848e5..209b2e4cc 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from './amount'
-import Signature from '../signature'
+import Amount from "./amount";
+import Signature from "../signature";
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index 074636750..b026cfa45 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from 'theme-ui'
+import { Container, BaseStyles } from "theme-ui";
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
-  )
+  );
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index dbf58a586..3629eb7b7 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'center',
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
         div: {
           mt: 0,
           mb: 2,
-          bg: 'white',
-          color: 'muted',
-          border: '1px solid',
-          borderColor: 'border',
-          bg: 'snow',
+          bg: "white",
+          color: "muted",
+          border: "1px solid",
+          borderColor: "border",
+          bg: "snow",
           fontSize: 2,
-          fontWeight: 'body',
-          lineHeight: '36px'
-        }
+          fontWeight: "body",
+          lineHeight: "36px",
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center'
+        display: "inline-flex",
+        alignItems: "center",
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  )
+  );
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  )
+  );
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index f371cc589..1cf79b34f 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from './amount'
+import Amount from "./amount";
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index 139756ad9..bc60fd03c 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from '../signature'
-import Signatures from '../signatures'
-import Image from 'theme-ui'
+import Signature from "../signature";
+import Signatures from "../signatures";
+import Image from "theme-ui";
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index 61822ec6d..e925b043e 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from 'theme-ui'
-import Image from 'next/image'
+import { Box } from "theme-ui";
+import Image from "next/image";
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from 'next/image'
  */
 
 const BGImg = ({
-  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
-  alt = '',
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
   ...props
 }) => (
   <Box
     sx={{
-      position: 'absolute',
-      display: 'block',
+      position: "absolute",
+      display: "block",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      '&:after': {
+      "&:after": {
         content: '""',
-        position: 'absolute',
+        position: "absolute",
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
       },
-      '> span': { height: '100% !important', width: '100% !important' },
-      img: { objectFit: 'cover', objectPosition: 'center center' },
-      '~ *': { position: 'relative' }
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-)
+);
 
-export default BGImg
+export default BGImg;
diff --git a/components/bio.js b/components/bio.js
index 00e822f70..785218a62 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import { useState } from 'react'
+import { Box, Flex, Text, Avatar, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import { useState } from "react";
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
-  const [expand, setExpand] = useState(false)
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
+  const [expand, setExpand] = useState(false);
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: 'flex',
-          alignItems: popup ? 'center' : 'flex-start',
-          transition: 'transform 0.125s ease-in-out',
-          '&:hover':
-            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
-          cursor: (text && popup) || href ? 'pointer' : null,
-          textDecoration: 'none',
-          maxWidth: '600px',
+          display: "flex",
+          alignItems: popup ? "center" : "flex-start",
+          transition: "transform 0.125s ease-in-out",
+          "&:hover":
+            (text && popup) || href ? { transform: "scale(1.025)" } : {},
+          cursor: (text && popup) || href ? "pointer" : null,
+          textDecoration: "none",
+          maxWidth: "600px",
           zIndex: !popup ? 1003 : 5,
-          maxHeight: '90vh',
-          overflowY: 'hidden',
-          overscrollBehavior: 'contain',
+          maxHeight: "90vh",
+          overflowY: "hidden",
+          overscrollBehavior: "contain",
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: 'relative',
+          position: "relative",
         }}
-        as={href && !text ? 'a' : 'div'}
+        as={href && !text ? "a" : "div"}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true)
+            setExpand(true);
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+            overflow: "hidden",
+            objectFit: "cover",
+            transition: "transform 0.125s ease-in-out",
+            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
             flexShrink: 0,
-            width: '64px',
-            height: '64px'
+            width: "64px",
+            height: "64px",
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ['0px', '0px', '0px'],
-                  fontSize: '1.1em',
-                  width: 'fit-content'
+                  mb: ["0px", "0px", "0px"],
+                  fontSize: "1.1em",
+                  width: "fit-content",
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ['0px', '0px', '0px'],
+                      mb: ["0px", "0px", "0px"],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: 'fit-content'
+                      width: "fit-content",
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: 'center',
-                    aspectRatio: 4 / 3
+                    justifyContent: "center",
+                    aspectRatio: 4 / 3,
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Text
                 sx={{
-                  transform: 'translateX(-4px) translateY(2px)',
-                  display: 'inline-flex',
-                  alignItems: 'center'
+                  transform: "translateX(-4px) translateY(2px)",
+                  display: "inline-flex",
+                  alignItems: "center",
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={'a'}
+                as={"a"}
                 href={href}
-                sx={{ transform: 'translateX(-2px)' }}
+                sx={{ transform: "translateX(-2px)" }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: 'fixed',
+              position: "fixed",
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: '100vh',
-              width: '100vw',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.6)',
-              pb: 4
+              height: "100vh",
+              width: "100vw",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(0,0,0,0.6)",
+              pb: 4,
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: 'fixed',
+                position: "fixed",
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: '100vh',
-                width: '100vw',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pb: 4
+                height: "100vh",
+                width: "100vw",
+                alignItems: "center",
+                justifyContent: "center",
+                pb: 4,
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  )
+  );
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index b578ed104..798235368 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from "theme-ui";
 
-const ColorSwitcher = props => {
-  const [mode, setMode] = useColorMode()
+const ColorSwitcher = (props) => {
+  const [mode, setMode] = useColorMode();
   return (
     <IconButton
-      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
       sx={{
-        position: 'absolute',
+        position: "absolute",
         top: [2, 3],
         right: [2, 3],
-        color: 'primary',
-        cursor: 'pointer',
-        borderRadius: 'circle',
-        transition: 'box-shadow .125s ease-in-out',
-        ':hover,:focus': {
-          boxShadow: '0 0 0 3px',
-          outline: 'none'
-        }
+        color: "primary",
+        cursor: "pointer",
+        borderRadius: "circle",
+        transition: "box-shadow .125s ease-in-out",
+        ":hover,:focus": {
+          boxShadow: "0 0 0 3px",
+          outline: "none",
+        },
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = props => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  )
-}
+  );
+};
 
-export default ColorSwitcher
+export default ColorSwitcher;
diff --git a/components/comma.js b/components/comma.js
index 11efc6088..5943567f1 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 722b9108f..370273f28 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Image, Link } from 'theme-ui'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Image, Link } from "theme-ui";
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`
+`;
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
       alt={name}
       {...props}
     />
   </Link>
-)
+);
 
-const Sponsors = props => (
+const Sponsors = (props) => (
   <Base maxWidth={48} {...props}>
     {[
-      'Vercel',
-      'Slack',
-      'Netlify',
-      'FullStory',
-      'BrowserStack',
-      'Stripe',
-      'Segment',
-      'Bugsnag',
-      'Google',
-      'Dialpad'
-    ].map(name => (
+      "Vercel",
+      "Slack",
+      "Netlify",
+      "FullStory",
+      "BrowserStack",
+      "Stripe",
+      "Segment",
+      "Bugsnag",
+      "Google",
+      "Dialpad",
+    ].map((name) => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = props => (
       img="fastforward.png"
     />
   </Base>
-)
+);
 
-export default Sponsors
+export default Sponsors;
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index a573b7265..1903fbaff 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,100 +1,102 @@
-import { useState } from 'react'
-import { Button, Text } from 'theme-ui'
+import { useState } from "react";
+import { Button, Text } from "theme-ui";
 
-const pricePerSprig = 100
+const pricePerSprig = 100;
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
   function url() {
-    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
+    const u = new URL(
+      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
+    );
     u.searchParams.set(
-      'amount',
-      pricePerSprig * count * 100 /* convert to cents */
-    )
-    return u
+      "amount",
+      pricePerSprig * count * 100 /* convert to cents */,
+    );
+    return u;
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ['27px !important', 3],
-          position: 'relative',
-          justifySelf: 'center',
-          alignSelf: 'center',
-          paddingBottom: ['1em', '1em', 0]
+          fontSize: ["27px !important", 3],
+          position: "relative",
+          justifySelf: "center",
+          alignSelf: "center",
+          paddingBottom: ["1em", "1em", 0],
         }}
-        style={{ userSelect: 'none' }}
+        style={{ userSelect: "none" }}
       >
-        I'm donating{' '}
+        I'm donating{" "}
         <Text
           sx={{
-            position: 'relative',
+            position: "relative",
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'rgba(0,0,0,0.5)'
+            borderRadius: "default",
+            color: "white",
+            bg: "rgba(0,0,0,0.5)",
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: 'relative' }}
+            sx={{ position: "relative" }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? '' : 's'} to teens
+        Sprig kit{count === 1 ? "" : "s"} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
+        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  )
-}
-export default SprigForm
+  );
+};
+export default SprigForm;
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1))
+    setCount(Math.max(count - 1, 1));
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? 'not-allowed' : 'pointer',
-        position: 'absolute',
-        top: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: count <= 1 ? "not-allowed" : "pointer",
+        position: "absolute",
+        top: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  )
+  );
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1)
+    setCount(count + 1);
   }
   return (
     <span
       style={{
-        cursor: 'pointer',
-        position: 'absolute',
-        bottom: '1.2em',
-        left: '50%',
-        transform: 'translateX(-50%)'
+        cursor: "pointer",
+        position: "absolute",
+        bottom: "1.2em",
+        left: "50%",
+        transform: "translateX(-50%)",
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  )
+  );
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index c161b1452..859c6b080 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  )
-}
-export default SprigMeta
+  );
+};
+export default SprigMeta;
diff --git a/components/dot.js b/components/dot.js
index d60284521..72881533f 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        display: hideOnMobile ? ['none', 'default'] : 'default'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        display: hideOnMobile ? ["none", "default"] : "default",
       }}
     />
-  )
+  );
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 6139c20d8..067b08e08 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default FadeIn
+export default FadeIn;
diff --git a/components/flag.js b/components/flag.js
index bb4863e74..9cf083337 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from '../lib/theme'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import Link from 'next/link'
+import theme from "../lib/theme";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import Link from "next/link";
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`
+`;
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`
+`;
 
-const scrolled = props =>
+const scrolled = (props) =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = props =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `
+  `;
 
-const Base = styled('a')`
+const Base = styled("a")`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled('a')`
     animation: none !important;
   }
   ${scrolled};
-`
+`;
 
-const Flag = props => (
+const Flag = (props) => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-)
+);
 
-export default Flag
+export default Flag;
diff --git a/components/flex-col.js b/components/flex-col.js
index c20f4c9fa..dd01f6e00 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from 'theme-ui'
+import { Flex } from "theme-ui";
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
+  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
 }
diff --git a/components/footer.js b/components/footer.js
index eb437af3f..386fc90e6 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,27 +1,25 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
-import NextLink from 'next/link'
-import theme from '@hackclub/theme'
-import Icon from './icon'
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
+import NextLink from "next/link";
+import theme from "@hackclub/theme";
+import Icon from "./icon";
 
 const Base = styled(Box)`
-  background: ${props =>
+  background: ${(props) =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${props =>
+  ${(props) =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`
+`;
 
-
-
-const Logo = props => (
+const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -37,9 +35,9 @@ const Logo = props => (
       clipRule="evenodd"
     />
   </svg>
-)
+);
 
-const Service = ({ href, icon, name = '', ...props }) => (
+const Service = ({ href, icon, name = "", ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -49,14 +47,14 @@ const Service = ({ href, icon, name = '', ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-)
+);
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? 'muted' : 'slate'}
+    color={dark ? "muted" : "slate"}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: 'left' }}
+    sx={{ textAlign: "left" }}
     as="footer"
     {...props}
   >
@@ -69,18 +67,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: 'none',
-            color: 'muted',
-            transition: '0.125s color ease-in-out',
-            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
+            textDecoration: "none",
+            color: "muted",
+            transition: "0.125s color ease-in-out",
+            ":hover,:focus": { color: "slate", textDecoration: "underline" },
           },
-          '> div > a': {
-            display: 'block',
-            mb: 2
+          "> div > a": {
+            display: "block",
+            mb: 2,
           },
-          'h2,p': { color: 'muted' },
+          "h2,p": { color: "muted" },
           h2: { fontSize: 3 },
-          'a,p': { fontSize: 2 }
+          "a,p": { fontSize: 2 },
         }}
       >
         <Box>
@@ -117,24 +115,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
+        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: 'center',
+              alignItems: "center",
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: 'currentColor', width: 32, height: 32 },
+              svg: { fill: "currentColor", width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  'transform .125s ease-in-out, color .125s ease-in-out',
-                ':hover,:focus': { transform: 'scale(1.125)' }
-              }
+                  "transform .125s ease-in-out, color .125s ease-in-out",
+                ":hover,:focus": { transform: "scale(1.125)" },
+              },
             }}
           >
             <Service
@@ -190,6 +188,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-)
+);
 
-export default Footer
+export default Footer;
diff --git a/components/force-theme.js b/components/force-theme.js
index b5b544095..ae9004315 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from 'theme-ui'
+import { useColorMode } from "theme-ui";
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode()
-  setColorMode(theme)
-  return null
-}
+  const [colorMode, setColorMode] = useColorMode();
+  setColorMode(theme);
+  return null;
+};
 
-export default ForceTheme
+export default ForceTheme;
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 4d365cb65..8a65d4e43 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import Link from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: theme => theme.util.gx('yellow', 'red')
+          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('slate', 'black'),
+      backgroundImage: (t) => t.util.gx("slate", "black"),
       opacity: 0.7,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
+  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Marketing = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Marketing
+export default Marketing;
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index 1411e37f9..c7bb3ff2c 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
-import NextLink from 'next/link'
-import { Fade } from 'react-reveal'
-import Icon from '../../icon'
+import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
+import NextLink from "next/link";
+import { Fade } from "react-reveal";
+import Icon from "../../icon";
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: 'flex',
-        flexDirection: ['column'],
-        width: ['100%', '100%', '100%', '85%'],
-        color: 'smoke',
+        display: "flex",
+        flexDirection: ["column"],
+        width: ["100%", "100%", "100%", "85%"],
+        color: "smoke",
         px: 4,
         py: [4, 5, 6],
-        borderRadius: 'default',
-        position: 'relative'
+        borderRadius: "default",
+        position: "relative",
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{' '}
+              by Hack Club with the help of{" "}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: 'italic', color: 'white' }}
+                sx={{ fontStyle: "italic", color: "white" }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
             for HCB
-          </Box>{' '}
+          </Box>{" "}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-)
+);
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
   </Box>
-)
+);
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: 'flex',
-        pl: 0
+        display: "flex",
+        pl: 0,
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: 'primary',
-          flexShrink: 'none',
+          color: "primary",
+          flexShrink: "none",
           flexShrink: 0,
-          mr: 2
+          mr: 2,
         }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
           sx={{
-            display: [null, null, 'flex'],
-            alignItems: 'center'
+            display: [null, null, "flex"],
+            alignItems: "center",
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: '1',
-                bg: 'muted',
-                color: 'steel',
-                fontWeight: 'normal',
-                ml: 2
+                zIndex: "1",
+                bg: "muted",
+                color: "steel",
+                fontWeight: "normal",
+                ml: 2,
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
       opacity: 0.875,
-      zIndex: 0
+      zIndex: 0,
     }}
   />
-)
+);
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Money = () => {
-  return <Static />
-}
+  return <Static />;
+};
 
-export default Money
+export default Money;
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index c09675669..645c9f155 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
-import usePrefersMotion from '../../../lib/use-prefers-motion'
-import useHasMounted from '../../../lib/use-has-mounted'
-import NextLink from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
+import usePrefersMotion from "../../../lib/use-prefers-motion";
+import useHasMounted from "../../../lib/use-has-mounted";
+import NextLink from "next/link";
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{' '}
+      A hackathon organizer's{" "}
       <Text
         as="span"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: 'nowrap',
-          color: 'currentColor',
-          bg: 'green'
+          whiteSpace: "nowrap",
+          color: "currentColor",
+          bg: "green",
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The{' '}
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+      The{" "}
       <Box
         as="span"
         sx={{
-          bg: 'rgb(245, 233, 181, .3)',
+          bg: "rgb(245, 233, 181, .3)",
           px: 1,
-          borderRadius: 5
+          borderRadius: 5,
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: 'none', color: 'currentColor' }}
+          sx={{ textDecoration: "none", color: "currentColor" }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{' '}
+      </Box>{" "}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
+  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index ac9f818bc..e5c664bc4 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from 'theme-ui'
-import { Link, Button, Card } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Zoom from 'react-reveal/Zoom'
-import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import { Box, Badge, Grid, Heading } from "theme-ui";
+import { Link, Button, Card } from "theme-ui";
+import { Slide } from "react-reveal";
+import Zoom from "react-reveal/Zoom";
+import MSparkles from "../../sparkles/money";
+import Image from "next/image";
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
-      {' '}
-      <Box sx={{ position: 'relative' }}>
+      {" "}
+      <Box sx={{ position: "relative" }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
+            width: "fit-content",
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: '14px',
+            p: "14px",
             px: 0,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
-            position: 'absolute',
-            bottom: '20px',
-            left: '20px',
-            fontSize: '20px'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            position: "absolute",
+            bottom: "20px",
+            left: "20px",
+            fontSize: "20px",
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: '20px' }}>
+      <Box sx={{ mt: "20px" }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: 'muted'
+              color: "muted",
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated'
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{' '}
+                On{" "}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{' '}
+                , send your website to{" "}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: 'none' }}
+          sx={{ textDecoration: "none" }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: 'block',
-              mx: 'auto',
-              width: 'fit-content'
+              display: "block",
+              mx: "auto",
+              width: "fit-content",
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ['14px', 1, 1],
-            textAlign: 'center',
-            color: 'muted',
+            fontSize: ["14px", 1, 1],
+            textAlign: "center",
+            color: "muted",
             my: 3,
-            width: '60%',
-            mx: 'auto'
+            width: "60%",
+            mx: "auto",
           }}
         >
-          Already have an account? Join the{' '}
+          Already have an account? Join the{" "}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{' '}
+          </Link>{" "}
           channel!
         </Box>
       </Slide>
     </>
-  )
-}
+  );
+};
 
-export default Apply
+export default Apply;
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 68c01b839..5c7a80f9a 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import { Box, Label, Input, Button, Text } from 'theme-ui'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Label, Input, Button, Text } from "theme-ui";
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
     await fetch(
-      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
+      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
       {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          Email: e.target.email.value
-        })
-      }
-    )
+          Email: e.target.email.value,
+        }),
+      },
+    );
 
-    formRef.current.reset()
+    formRef.current.reset();
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Box
-      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
+      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: 'darkless',
+            bg: "darkless",
             my: 0,
             mt: 1,
-            mb: 2
+            mb: 2,
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
+        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
+            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index 163c28d10..c42b9abb6 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
-import Link from 'next/link'
-import Icon from '../icon'
+import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
+import Link from "next/link";
+import Icon from "../icon";
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
+          backgroundImage: (t) => t.util.gx("orange", "red"),
+          margin: "auto",
+          maxWidth: "90%",
           my: 4,
           borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          color: "white",
+          textAlign: "center",
+          py: 5,
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            display: "flex",
+            justifyContent: "center",
+            alignContent: "center",
           }}
         >
-          Keep exploring{' '}
+          Keep exploring{" "}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
+            sx={{ display: ["none", "flex", "flex"] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: 'white',
-              color: 'red',
+              bg: "white",
+              color: "red",
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3]
+              fontSize: [2, 3],
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Teenagers organize hackathons like{' '}
+            Teenagers organize hackathons like{" "}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{' '}
-            &{' '}
+            </a>{" "}
+            &{" "}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index 522e12eb6..dafbd2c4f 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hackathons/assemble.JPG'
-import Icon from '../icon'
+import { Box, Button, Heading, Text, Card } from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hackathons/assemble.JPG";
+import Icon from "../icon";
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 140,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96
+              paddingTop: 96,
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: 'layout.container',
+                  variant: "layout.container",
                   maxWidth: [null, 700, 1000],
-                  borderRadius: 'extra',
+                  borderRadius: "extra",
                   p: [3, 4],
-                  position: 'relative',
-                  color: 'black'
+                  position: "relative",
+                  color: "black",
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: t => t.util.gx('yellow', 'pink'),
-                    position: 'absolute',
+                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
+                    position: "absolute",
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      'translateY(-50%) rotate(8deg)',
-                      'translateX(15%) rotate(12deg)'
+                      "translateY(-50%) rotate(8deg)",
+                      "translateX(15%) rotate(12deg)",
                     ],
                     fontSize: [2, 3],
-                    display: ['none', 'inline', 'inline']
+                    display: ["none", "inline", "inline"],
                   }}
                 >
-                  Looking for hackathons?{' '}
+                  Looking for hackathons?{" "}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: 'black',
-                    span: { color: 'white', display: 'block' }
+                    color: "black",
+                    span: { color: "white", display: "block" },
                   }}
                 >
-                  Welcome to the{' '}
+                  Welcome to the{" "}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: 'currentColor',
-                      WebkitTextStrokeWidth: '2px',
-                      WebkitTextFillColor: '#33D6A6',
-                      whiteSpace: [null, null, 'nowrap']
+                      WebkitTextStroke: "currentColor",
+                      WebkitTextStrokeWidth: "2px",
+                      WebkitTextFillColor: "#33D6A6",
+                      whiteSpace: [null, null, "nowrap"],
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{' '}
+                  </strong>{" "}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index dc20476d3..81da20248 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
-import Photo from '../photo'
+import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
+import Photo from "../photo";
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
-        <Container sx={{ width: '95vw' }}>
+      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+        <Container sx={{ width: "95vw" }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: 'purple'
+              color: "purple",
             }}
           >
-            A hackathon is a social coding marathon where teenagers{' '}
-            <Highlight>come together</Highlight> to{' '}
-            <Highlight>build projects</Highlight> for a weekend and{' '}
+            A hackathon is a social coding marathon where teenagers{" "}
+            <Highlight>come together</Highlight> to{" "}
+            <Highlight>build projects</Highlight> for a weekend and{" "}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: 'yellow',
-        borderRadius: 'default',
+        bg: "yellow",
+        borderRadius: "default",
         px: 1,
-        color: '#5d114c',
-        lineHeight: '1.3'
+        color: "#5d114c",
+        lineHeight: "1.3",
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index cb6e9c76c..67d7c1d0c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
-import Stage from '../stage'
+import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
+import Stage from "../stage";
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{' '}
+          Resources so you can organize an{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              bg: 'rgb(91, 255, 205)',
-              color: '#095365',
-              display: 'inline-block',
-              whiteSpace: ['wrap', 'nowrap']
+              bg: "rgb(91, 255, 205)",
+              color: "#095365",
+              display: "inline-block",
+              whiteSpace: ["wrap", "nowrap"],
             }}
           >
             amazing
-          </Text>{' '}
+          </Text>{" "}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: 'left',
-          '> a, > div': {
-            borderRadius: 'extra',
-            boxShadow: 'elevated',
+          textAlign: "left",
+          "> a, > div": {
+            borderRadius: "extra",
+            boxShadow: "elevated",
             px: [3, null, 4],
-            py: [4, null, 5]
+            py: [4, null, 5],
           },
           span: {
             boxShadow:
-              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
           },
-          svg: { fill: 'currentColor' }
+          svg: { fill: "currentColor" },
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-            color: 'white',
-            svg: { color: '#fb558e' }
+            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+            color: "white",
+            svg: { color: "#fb558e" },
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(236, 55, 80)' }
+              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(236, 55, 80)" },
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-            color: 'white',
-            svg: { color: 'rgb(51, 142, 218)' }
+              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+            color: "white",
+            svg: { color: "rgb(51, 142, 218)" },
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  )
+  );
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index f61caf69d..59fc00d5c 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from 'react-ticker'
+import Ticker from "react-ticker";
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link
-} from 'theme-ui'
-import { useState } from 'react'
-import { keyframes } from '@emotion/react'
-import Tilt from '../tilt'
-import NextLink from 'next/link'
-import PageVisibility from 'react-page-visibility'
-import { formatAddress } from '../../lib/helpers'
+  Link,
+} from "theme-ui";
+import { useState } from "react";
+import { keyframes } from "@emotion/react";
+import Tilt from "../tilt";
+import NextLink from "next/link";
+import PageVisibility from "react-page-visibility";
+import { formatAddress } from "../../lib/helpers";
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true)
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: 'black',
-              textAlign: 'center',
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              mt: 4
+              color: "black",
+              textAlign: "center",
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              mt: 4,
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ['95vw', '66vw'],
-              margin: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2
+              maxWidth: ["95vw", "66vw"],
+              margin: "auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 2,
             }}
           >
-            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
+            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
+              sx={{ color: "muted", mr: 2, textAlign: "center" }}
             >
-              from{' '}
+              from{" "}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: 'currentcolor' }}>
+                <Link sx={{ color: "currentcolor" }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || 'string'} {...props}>
+          <Ticker mode={mode || "string"} {...props}>
             {() => (
-              <Box as="div" sx={{ display: 'flex', py: 3 }}>
+              <Box as="div" sx={{ display: "flex", py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  )
+  );
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer
+  footer,
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           px: 4,
           mx: 4,
-          borderRadius: 'extra',
-          width: '400px',
-          height: '200px',
-          textDecoration: 'none',
-          color: 'white'
+          borderRadius: "extra",
+          width: "400px",
+          height: "200px",
+          textDecoration: "none",
+          color: "white",
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: 'center',
-          backgroundSize: 'cover'
+          textAlign: "center",
+          backgroundSize: "cover",
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 16,
             right: 16,
-            bg: 'snow',
-            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
-            fontSize: 'inherit',
-            textShadow: 'none',
-            borderRadius: 5
+            bg: "snow",
+            color: virtual ? "red" : hybrid ? "orange" : "blue",
+            fontSize: "inherit",
+            textShadow: "none",
+            borderRadius: 5,
           }}
         >
-          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
+          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: 'contain',
-              borderRadius: 'default',
-              mt: 'auto'
+              objectFit: "contain",
+              borderRadius: "default",
+              mt: "auto",
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: 'anywhere',
-            width: '100%',
-            color: 'white',
-            textDecoration: 'none'
+            overflowWrap: "anywhere",
+            width: "100%",
+            color: "white",
+            textDecoration: "none",
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: 'auto',
+            mt: "auto",
             mb: 0,
-            width: '100%',
-            opacity: 0.875
+            width: "100%",
+            opacity: 0.875,
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: 'none' }}>
+        <Box sx={{ display: "none" }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? 'https://schema.org/OnlineEventAttendanceMode'
-              : 'https://schema.org/OfflineEventAttendanceMode'}
+              ? "https://schema.org/OnlineEventAttendanceMode"
+              : "https://schema.org/OfflineEventAttendanceMode"}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  )
+  );
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859f..98e3e0138 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from 'theme-ui'
-import Icon from '../icon'
+import { Button, Text, Image, Flex } from "theme-ui";
+import Icon from "../icon";
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: '100%',
-        height: '4.2rem'
+        width: "100%",
+        height: "4.2rem",
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: 'center',
+          alignItems: "center",
           gap: 3,
-          mr: '-32px' // Man...
+          mr: "-32px", // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index e4b40cd64..234d3981d 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, Input, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
-import AutofillColourFix from './autofill-colour-fix'
-import { geocode, search } from '../../../lib/hcb/apply/address-validation'
-import Icon from '../../icon'
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Input, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
+import AutofillColourFix from "./autofill-colour-fix";
+import { geocode, search } from "../../../lib/hcb/apply/address-validation";
+import Icon from "../../icon";
 
 const approvedCountries = [
-  'AT',
-  'FI',
-  'FR',
-  'DE',
-  'GR',
-  'ES',
-  'IT',
-  'SE',
-  'TR',
-  'GB',
-  'NO',
-  'UA',
-  'BR',
-  'CO',
-  'US',
-  'CA',
-  'MX',
-  'JP',
-  'PH',
-  'MY',
-  'SG'
-]
+  "AT",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "ES",
+  "IT",
+  "SE",
+  "TR",
+  "GB",
+  "NO",
+  "UA",
+  "BR",
+  "CO",
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "PH",
+  "MY",
+  "SG",
+];
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef()
-  const base = useRef()
-  const [predictions, setPredictions] = useState(null)
-  const [countryCode, setCountryCode] = useState(null)
+  const input = useRef();
+  const base = useRef();
+  const [predictions, setPredictions] = useState(null);
+  const [countryCode, setCountryCode] = useState(null);
 
-  const optionClicked = async prediction => {
-    input.current.value = prediction.name
-    await onInput(prediction.name)
-    setPredictions(null)
-  }
-  const clickOutside = e => {
+  const optionClicked = async (prediction) => {
+    input.current.value = prediction.name;
+    await onInput(prediction.name);
+    setPredictions(null);
+  };
+  const clickOutside = (e) => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null)
+      setPredictions(null);
     }
-  }
+  };
 
-  const onInput = async value => {
-    setPredictions(value ? (await search(value)).results : null)
+  const onInput = async (value) => {
+    setPredictions(value ? (await search(value)).results : null);
 
-    if (isPersonalAddressInput) return
+    if (isPersonalAddressInput) return;
     geocode(value)
-      .then(res => {
-        const country = res?.results[0]?.country
-        const countryCode = res?.results[0]?.countryCode
+      .then((res) => {
+        const country = res?.results[0]?.country;
+        const countryCode = res?.results[0]?.countryCode;
 
-        setCountryCode(countryCode)
+        setCountryCode(countryCode);
 
-        sessionStorage.setItem('bank-signup-eventCountry', country)
-        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
+        sessionStorage.setItem("bank-signup-eventCountry", country);
+        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
       })
-      .catch(err => console.error(err))
-  }
+      .catch((err) => console.error(err));
+  };
 
-  const onInputWrapper = async e => {
-    if (e.target.value) await onInput(e.target.value)
-  }
+  const onInputWrapper = async (e) => {
+    if (e.target.value) await onInput(e.target.value);
+  };
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current
-    if (!inputEl) return
+    const inputEl = input.current;
+    if (!inputEl) return;
 
-    document.addEventListener('click', clickOutside)
-    inputEl.addEventListener('input', onInputWrapper)
-    inputEl.addEventListener('focus', onInputWrapper)
+    document.addEventListener("click", clickOutside);
+    inputEl.addEventListener("input", onInputWrapper);
+    inputEl.addEventListener("focus", onInputWrapper);
 
     return () => {
-      document.removeEventListener('click', clickOutside)
-      inputEl.removeEventListener('input', onInputWrapper)
-      inputEl.removeEventListener('focus', onInputWrapper)
-    }
-  }, [])
+      document.removeEventListener("click", clickOutside);
+      inputEl.removeEventListener("input", onInputWrapper);
+      inputEl.removeEventListener("focus", onInputWrapper);
+    };
+  }, []);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ position: "relative", width: "100%" }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: "center" }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
+                sx={{ color: "red", mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: 'red'
+                  color: "red",
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: '#47454f',
-            border: '1px solid #696675',
-            width: '100%',
+            background: "#47454f",
+            border: "1px solid #696675",
+            width: "100%",
             p: 3,
-            borderRadius: '4px',
-            position: 'absolute',
-            bottom: 'calc(100% + 0.5em)'
+            borderRadius: "4px",
+            position: "absolute",
+            bottom: "calc(100% + 0.5em)",
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: 'pointer',
-                    border: 'none',
-                    background: 'none',
-                    color: '#d1cbe7',
-                    '&:hover': {
-                      color: 'white'
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    color: "#d1cbe7",
+                    "&:hover": {
+                      color: "white",
                     },
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    textAlign: 'inherit'
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    textAlign: "inherit",
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: '100%',
-                      color: '#8492a6'
+                      width: "100%",
+                      color: "#8492a6",
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 09b06f791..71bbeb504 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from 'theme-ui'
-import Icon from '../../icon'
+import { Box, Button, Flex, Text } from "theme-ui";
+import Icon from "../../icon";
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null
+  if (!formError) return null;
 
-  const close = () => setFormError(null)
+  const close = () => setFormError(null);
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          background: '#000000',
+          background: "#000000",
           opacity: 0.5,
-          zIndex: 1000
+          zIndex: 1000,
         }}
       />
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          flexDirection: "column",
+          alignItems: "center",
           gap: 3,
-          background: '#252429',
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
+          background: "#252429",
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           zIndex: 1001,
           padding: 4,
-          borderRadius: 'default'
+          borderRadius: "default",
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index b9aa59d11..275d36272 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 100px #252429 inset !important',
-    WebkitTextFillColor: 'white'
-  }
-}
+  "&:-webkit-autofill": {
+    boxShadow: "0 0 0 100px #252429 inset !important",
+    WebkitTextFillColor: "white",
+  },
+};
 
-export default autofillColourFix
+export default autofillColourFix;
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343c..ac8b45c10 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-import Icon from '../../icon'
+import { useEffect, useState } from "react";
+import Icon from "../../icon";
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked)
-  const toggle = () => setChecked(!checked)
+  const [checked, setChecked] = useState(defaultChecked);
+  const toggle = () => setChecked(!checked);
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      const input = document.getElementById(name);
+      input && setChecked(value === "true");
     }
-  }, [name])
+  }, [name]);
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? 'checkmark' : 'checkbox'}
+        glyph={checked ? "checkmark" : "checkbox"}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={e => e.key === 'Enter' && toggle()}
+        onKeyDown={(e) => e.key === "Enter" && toggle()}
       />
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1fc..be5c411da 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { Box, Flex, Label, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { Box, Flex, Label, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children
+  children,
 }) {
-  const router = useRouter()
+  const router = useRouter();
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name)
+    requiredFields[parseInt(router.query.step) - 1].includes(name);
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = sessionStorage.getItem("bank-signup-" + name);
     if (value) {
-      const input = document.getElementById(name)
-      if (input) input.value = value
+      const input = document.getElementById(name);
+      if (input) input.value = value;
     }
-  }, [name])
+  }, [name]);
 
   return (
-    <FlexCol gap={2} width={'100%'}>
+    <FlexCol gap={2} width={"100%"}>
       <Flex
         sx={{
-          flexDirection: col ? 'column' : 'row',
-          alignItems: col ? 'flex-start' : 'center',
-          gap: 2
+          flexDirection: col ? "column" : "row",
+          alignItems: col ? "flex-start" : "center",
+          gap: 2,
         }}
       >
-        <Flex sx={{ alignItems: 'center', gap: 2 }}>
+        <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: 'capitalize',
+              textTransform: "capitalize",
               fontSize: 3,
-              width: 'fit-content'
+              width: "fit-content",
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: 'muted',
-                padding: '4px 6px',
-                borderRadius: '999px',
-                lineHeight: '1',
-                fontSize: 14
+                backgroundColor: "muted",
+                padding: "4px 6px",
+                borderRadius: "999px",
+                lineHeight: "1",
+                fontSize: 14,
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  )
+  );
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index f9ff0fd9e..fbe1ec707 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import { forwardRef } from "react";
+import { Box } from "theme-ui";
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: '100%',
-        width: ['100%', null, null, '50ch'],
-        flex: '1',
-        overflowY: ['none', null, null, 'auto'],
-        pr: [0, null, '2ch'],
+        height: "100%",
+        width: ["100%", null, null, "50ch"],
+        flex: "1",
+        overflowY: ["none", null, null, "auto"],
+        pr: [0, null, "2ch"],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
       }}
     >
       {children}
     </Box>
-  )
-})
+  );
+});
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = 'formContainer'
-export default formContainer
+formContainer.displayName = "formContainer";
+export default formContainer;
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index d88eda205..75c128834 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from 'theme-ui'
-import Icon from '../../icon'
-import FlexCol from '../../flex-col'
+import { Box, Flex, Link, Text } from "theme-ui";
+import Icon from "../../icon";
+import FlexCol from "../../flex-col";
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: 'center', gap: 2 }}>
+              <Flex sx={{ alignItems: "center", gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: 'inline-flex',
-                    alignItems: 'flex-end',
-                    gap: 1
+                    display: "inline-flex",
+                    alignItems: "flex-end",
+                    gap: 1,
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{' '}
-                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
+                A bank!{" "}
+                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index 2436a323e..f6c76c92e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { Button, Flex, Text, Spinner } from 'theme-ui'
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Button, Flex, Text, Spinner } from "theme-ui";
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {}
+  const data = {};
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i)
-    if (key.startsWith('bank-signup-')) {
-      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
+    const key = sessionStorage.key(i);
+    if (key.startsWith("bank-signup-")) {
+      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
     }
   }
-  console.dir('Sending data:', data)
+  console.dir("Sending data:", data);
 
   // Send the data
   try {
-    const res = await fetch('/api/hcb/apply', {
-      method: 'POST',
-      cors: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    })
+    const res = await fetch("/api/hcb/apply", {
+      method: "POST",
+      cors: "no-cors",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: '1em',
-    fill: 'white',
+    height: "1em",
+    fill: "white",
     margin: 0,
-    flexShrink: 0
-  }
+    flexShrink: 0,
+  };
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  )
+  );
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError
+  setFormError,
 }) {
-  const router = useRouter()
-  const [spinner, setSpinner] = useState(false)
+  const router = useRouter();
+  const [spinner, setSpinner] = useState(false);
 
   useEffect(() => {
-    setSpinner(false)
-  }, [router.query.step])
+    setSpinner(false);
+  }, [router.query.step]);
 
-  const minStep = 1
-  const maxStep = 3
+  const minStep = 1;
+  const maxStep = 3;
 
   const click = async () => {
-    setSpinner(true)
+    setSpinner(true);
 
-    let step = parseInt(router.query.step)
+    let step = parseInt(router.query.step);
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s }
+          query: { ...router.query, step: s },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep)
+      await setStep(minStep);
     } else if (step === minStep && isBack) {
-      await router.push('/hcb')
-      return
+      await router.push("/hcb");
+      return;
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep)
+      await setStep(minStep);
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false
+    let wasError = false;
 
-    const formData = new FormData(form.current)
+    const formData = new FormData(form.current);
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem('bank-signup-' + key, value)
+      sessionStorage.setItem("bank-signup-" + key, value);
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === '') &&
+          (!value || value.trim() === "") &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get('contactOption') === 'slack' &&
-          !formData.get('slackUsername')) // I'm so sorry for this
+          formData.get("contactOption") === "slack" &&
+          !formData.get("slackUsername")) // I'm so sorry for this
       ) {
-        setFormError('Please fill all required fields')
-        wasError = true
-        setSpinner(false)
+        setFormError("Please fill all required fields");
+        wasError = true;
+        setSpinner(false);
       }
-    })
-    if (wasError) return
+    });
+    if (wasError) return;
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler()
+    if (clickHandler) await clickHandler();
 
     if (step >= maxStep && !isBack) {
-      await sendApplication()
-      await router.push('/hcb/apply/success')
-      return
+      await sendApplication();
+      await router.push("/hcb/apply/success");
+      return;
     } else {
-      step += isBack ? -1 : 1
+      step += isBack ? -1 : 1;
     }
-    await setStep(step)
-  }
+    await setStep(step);
+  };
 
   return (
     <Button
-      variant={isBack ? 'outline' : 'ctaLg'}
+      variant={isBack ? "outline" : "ctaLg"}
       sx={{
-        color: 'white',
-        width: '100%',
-        maxWidth: isBack ? '8rem' : '10rem',
-        position: 'relative'
+        color: "white",
+        width: "100%",
+        maxWidth: isBack ? "8rem" : "10rem",
+        position: "relative",
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? 'row' : 'row-reverse',
-          justifyContent: 'center',
-          placeItems: 'center',
+          flexDirection: isBack ? "row" : "row-reverse",
+          justifyContent: "center",
+          placeItems: "center",
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3]
+          gap: [2, null, null, 3],
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold'
+            textTransform: "none",
+            fontWeight: "bold",
           }}
         >
-          {isBack ? 'Back' : 'Next'}
+          {isBack ? "Back" : "Next"}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: '32px',
-            color: 'white',
-            position: 'absolute',
-            right: '-0.3rem',
-            margin: '0 !important'
+            height: "32px",
+            color: "white",
+            position: "absolute",
+            right: "-0.3rem",
+            margin: "0 !important",
           }}
         />
       )}
     </Button>
-  )
+  );
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index f71c467d1..806e71088 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Input, Textarea } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
+import { useState, useEffect } from "react";
+import { Input, Textarea } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('organization')
+  const [org, setOrg] = useState("organization");
 
   useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('organisation')
-  }, [])
+    if (navigator.language === "en-GB") setOrg("organisation");
+  }, []);
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: 'vertical',
-            width: '100%',
-            ...AutofillColourFix
+            resize: "vertical",
+            width: "100%",
+            ...AutofillColourFix,
           }}
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index dc7cb869c..d05508055 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from 'theme-ui'
-import Checkbox from './checkbox'
-import AddressInput from './address-input'
-import Field from './field'
-import AutofillColourFix from './autofill-colour-fix'
-import { useState } from 'react'
+import { Input, Flex, Label, Radio } from "theme-ui";
+import Checkbox from "./checkbox";
+import AddressInput from "./address-input";
+import Field from "./field";
+import AutofillColourFix from "./autofill-colour-fix";
+import { useState } from "react";
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields
+  requiredFields,
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const [selectedContactOption, setSelectedContactOption] = useState("Email");
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem('bank-signup-userEmail')
-  ) // For display only, is not used for data submission.
+    window.sessionStorage.getItem("bank-signup-userEmail"),
+  ); // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
+      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={e => setEmail(e.target.value)}
+          onInput={(e) => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
+              onInput={() => setSelectedContactOption("Email")}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: 'flex',
-              flexDirection: 'row'
+              display: "flex",
+              flexDirection: "row",
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption('Slack')}
+              onInput={() => setSelectedContactOption("Slack")}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === 'Slack' ? (
+        {selectedContactOption === "Slack" ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === 'Email' ? (
+        ) : selectedContactOption === "Email" ? (
           <div>
-            We'll use {email ?? 'whatever you put for your email above!'}
+            We'll use {email ?? "whatever you put for your email above!"}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  )
+  );
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index a82976f9b..d4ab64ea7 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import FlexCol from '../../flex-col'
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import FlexCol from "../../flex-col";
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? '#33d6a6' : '#8492a6'
-  let fillColour = completed ? '#33d6a6' : 'none'
+  let strokeColour = completed ? "#33d6a6" : "#8492a6";
+  let fillColour = completed ? "#33d6a6" : "none";
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <svg
-        style={{ translate: '0 1px' }}
+        style={{ translate: "0 1px" }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          inset: '0'
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          inset: "0",
         }}
       >
         <Text
           sx={{
-            color: 'white',
-            fontSize: 2
+            color: "white",
+            fontSize: 2,
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  )
+  );
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
+    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: '3',
-          display: ['none', null, null, 'block']
+          fontSize: "3",
+          display: ["none", null, null, "block"],
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Progress() {
-  const router = useRouter()
-  const step = parseInt(router.query.step)
+  const router = useRouter();
+  const step = parseInt(router.query.step);
 
-  const labels = ['Intro', 'Organization info', 'Personal info']
+  const labels = ["Intro", "Organization info", "Personal info"];
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, '-1rem 0'],
-        flexDirection: ['row', null, null, 'column']
+        translate: [0, null, null, "-1rem 0"],
+        flexDirection: ["row", null, null, "column"],
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  )
+  );
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index a6b6323c9..bcefad827 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef()
-  const svgRef = useRef()
+  const shineRef = useRef();
+  const svgRef = useRef();
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return
+    if (!shineRef.current || !svgRef.current) return;
 
-    const svgWidth = svgRef.current.clientWidth / 100
-    const svgFromTop = svgRef.current.getBoundingClientRect().top
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left
+    const svgWidth = svgRef.current.clientWidth / 100;
+    const svgFromTop = svgRef.current.getBoundingClientRect().top;
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
-  }
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
+  };
 
   // Bind event
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [])
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
         top: -330,
-        left: -480
+        left: -480,
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: 'fixed',
-          width: '4600px',
-          overflow: 'hidden'
+          position: "fixed",
+          width: "4600px",
+          overflow: "hidden",
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '#1d181f',
-                clipPath: 'url(#my-clip-path)'
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1d181f",
+                clipPath: "url(#my-clip-path)",
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: 'absolute',
-                  width: '2px',
-                  height: '2px',
-                  borderRadius: '50%',
-                  backgroundColor: 'red',
-                  filter: 'blur(2px)'
+                  position: "absolute",
+                  width: "2px",
+                  height: "2px",
+                  borderRadius: "50%",
+                  backgroundColor: "red",
+                  filter: "blur(2px)",
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  )
+  );
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index c3b27ce7f..cc482a6e6 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
-import { Organization } from '../../../pages/hcb/climate'
-import Tilt from '../../../components/tilt'
-import Icon from '@hackclub/icons'
-import Tooltip from '../tooltip'
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
+import { Organization } from "../../../pages/hcb/climate";
+import Tilt from "../../../components/tilt";
+import Icon from "@hackclub/icons";
+import Tooltip from "../tooltip";
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: 'contain',
-        backgroundColor: 'unset',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        backgroundSize: "contain",
+        backgroundColor: "unset",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'block',
+        display: "block",
         height: 30,
-        width: 38
+        width: 38,
       }}
     >
-      <span style={{ opacity: '0' }}>.</span>
+      <span style={{ opacity: "0" }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: 'snow',
-        fontSize: 'inherit',
-        textShadow: 'none',
+        color: "snow",
+        fontSize: "inherit",
+        textShadow: "none",
         borderRadius: 5,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  )
+  );
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map(name => badges[name])
+        .map((name) => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  )
-}
+  );
+};
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false
+  showTags = false,
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
+        justifyContent: "center",
+        alignItems: "center",
         minHeight: 128,
-        color: 'white',
-        cursor: 'pointer',
-        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
-        textDecoration: 'none',
-        backgroundColor: 'black',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: 'extra',
-        overflow: 'hidden',
-        position: 'relative',
+        color: "white",
+        cursor: "pointer",
+        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
+        textDecoration: "none",
+        backgroundColor: "black",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        borderRadius: "extra",
+        overflow: "hidden",
+        position: "relative",
         p: 3,
-        height: '100%',
-        display: 'flex',
+        height: "100%",
+        display: "flex",
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: 'center',
-        flexDirection: 'column'
+        textAlign: "center",
+        flexDirection: "column",
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'end',
-          alignItems: 'center',
-          width: '100%',
+          display: "flex",
+          justifyContent: "end",
+          alignItems: "center",
+          width: "100%",
           gap: 2,
-          flexDirection: 'row',
-          mb: 3
+          flexDirection: "row",
+          mb: 3,
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: 'contain',
-            objectPosition: 'left',
-            borderRadius: 'default',
-            mt: 'auto'
+            objectFit: "contain",
+            objectPosition: "left",
+            borderRadius: "default",
+            mt: "auto",
           }}
         />
       )}
       <Heading
-        as={'h3'}
+        as={"h3"}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: 'anywhere',
-          width: '100%',
-          display: 'block'
+          overflowWrap: "anywhere",
+          width: "100%",
+          display: "block",
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: 'auto',
+          mt: "auto",
           mb: 0,
-          width: '100%',
+          width: "100%",
           opacity: 0.875,
-          textTransform: 'none'
+          textTransform: "none",
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: 'none' }}>
+      <Box sx={{ display: "none" }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-)
+);
 
-export default OrganizationCard
+export default OrganizationCard;
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1474a82f2..1dcaa1c8c 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
-import Run from './run'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
+import Run from "./run";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: 'darker'
+          bg: "darker",
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
-          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
+          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              'Legal entity with 501(c)(3) status': 'briefcase',
-              'We do your taxes': 'checkmark',
-              'Share access with your whole team': 'member-add',
-              'Backed by a bank account under the hood': 'bank-account',
-              'Instant invoice sending': 'transactions',
-              'Real-time dashboard of finances': 'analytics',
-              'Transaction data export': 'download',
-              'Record shared notes on transactions': 'docs',
-              '24-hour response support': 'clock',
-              'Reimbursement process': 'enter'
+              "Legal entity with 501(c)(3) status": "briefcase",
+              "We do your taxes": "checkmark",
+              "Share access with your whole team": "member-add",
+              "Backed by a bank account under the hood": "bank-account",
+              "Instant invoice sending": "transactions",
+              "Real-time dashboard of finances": "analytics",
+              "Transaction data export": "download",
+              "Record shared notes on transactions": "docs",
+              "24-hour response support": "clock",
+              "Reimbursement process": "enter",
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = 'enter']) => (
+            }).map(([item, icon = "enter"]) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              'Physical check sending & voiding': '',
-              'Online direct deposit & ACH transfers': '',
-              'Generate attendee legal waivers': '',
-              'Virtual debit cards (with Apple & Google Pay)': '',
-              'Debit card transaction paper trail': '',
-              'Transparency Mode': ''
+              "Physical check sending & voiding": "",
+              "Online direct deposit & ACH transfers": "",
+              "Generate attendee legal waivers": "",
+              "Virtual debit cards (with Apple & Google Pay)": "",
+              "Debit card transaction paper trail": "",
+              "Transparency Mode": "",
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes('signup')
-                    ? 'bolt'
-                    : item.includes('card')
-                    ? 'card'
-                    : item.includes('Transparency')
-                    ? 'explore'
-                    : item.includes('Physical')
-                    ? 'email'
-                    : 'enter'
+                  item.includes("signup")
+                    ? "bolt"
+                    : item.includes("card")
+                    ? "card"
+                    : item.includes("Transparency")
+                    ? "explore"
+                    : item.includes("Physical")
+                    ? "email"
+                    : "enter"
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  'Online, embeddable donation form': ''
+                  "Online, embeddable donation form": "",
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith('Instant')
-                        ? 'bolt'
-                        : item.includes('form')
-                        ? 'link'
-                        : 'enter'
+                      item.startsWith("Instant")
+                        ? "bolt"
+                        : item.includes("form")
+                        ? "link"
+                        : "enter"
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ''}
+              : ""}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              textAlign: 'center'
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 18,
-              lineHeight: '1.25',
-              letterSpacing: '-.03ch',
+              lineHeight: "1.25",
+              letterSpacing: "-.03ch",
               marginTop: 4,
-              marginBottom: 5
+              marginBottom: 5,
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
-                HCB is a{' '}
+              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
+                HCB is a{" "}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: 'none'
+          listStyle: "none",
         }}
       >
-        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
+        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
           {children}
         </Grid>
       </ol>
     </Container>
-  )
+  );
 }
 
-function ListItem({ icon = 'enter', start, ...props }) {
+function ListItem({ icon = "enter", start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: 'avoid',
-          display: 'flex',
-          alignItems: 'center',
+          breakInside: "avoid",
+          display: "flex",
+          alignItems: "center",
           paddingBottom: 4,
-          marginBottom: 8
+          marginBottom: 8,
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: 'muted', marginRight: 2 }}
+            sx={{ color: "muted", marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
+        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
       </li>
     </Fade>
-  )
+  );
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        bg: 'slate',
-        color: 'green',
+        display: "flex",
+        alignItems: "center",
+        bg: "slate",
+        color: "green",
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: 'circle',
-        fontWeight: 'bold',
-        justifyContent: 'center',
-        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
+        borderRadius: "circle",
+        fontWeight: "bold",
+        justifyContent: "center",
+        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
         fontSize: [48, 84],
-        '&:after': {
+        "&:after": {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: 'normal',
+          fontWeight: "normal",
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: 'muted'
-        }
+          color: "muted",
+        },
       }}
     >
       {fee}
     </Box>
-  )
+  );
 }
 
-const recent = dt => {
-  const past = new Date()
-  past.setMonth(past.getMonth() - 2)
-  return new Date(dt) > past
-}
+const recent = (dt) => {
+  const past = new Date();
+  past.setMonth(past.getMonth() - 2);
+  return new Date(dt) > past;
+};
diff --git a/components/hcb/features.js b/components/hcb/features.js
index be946c56f..d7f2b004d 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
+import Icon from "../icon";
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, 'span 2'],
-              gridRow: [null, null, 'span 2']
+              gridColumn: [null, null, "span 2"],
+              gridRow: [null, null, "span 2"],
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{' '}
+                Issue physical debit cards to all your teammates, backed by{" "}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{' '}
+                Send email newsletters for free using our hosted instance of{" "}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{' '}
+                Issue the{" "}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{' '}
+                </Link>{" "}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: 'muted',
+            color: "muted",
             fontSize: 3,
-            marginTop: [4, 5]
+            marginTop: [4, 5],
           }}
         >
-          Have more questions? <br /> Check out the{' '}
+          Have more questions? <br /> Check out the{" "}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'start' }}>
+    <Box sx={{ display: "flex", alignItems: "start" }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
+        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
       />
       <Box>
-        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
-        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
+        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: '#252429',
-        color: 'smoke',
+        bg: "#252429",
+        color: "smoke",
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
-        borderRadius: 'default'
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
+        borderRadius: "default",
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1ecde2c31..1b6219863 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
-import Icon from '../../icon'
-import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
+import Icon from "../../icon";
+import Masonry from "react-masonry-css";
+import NextImage from "next/image";
 
-import Fade from 'react-reveal/Fade'
+import Fade from "react-reveal/Fade";
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             right: 2,
             mt: -36,
-            display: ['none', 'none', 'none', 'block'],
-            '&:hover': {
-              transform: 'scale(1.05)'
-            }
+            display: ["none", "none", "none", "block"],
+            "&:hover": {
+              transform: "scale(1.05)",
+            },
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
+        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1
+            default: 1,
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: 'muted',
-          textAlign: 'center'
+          borderColor: "muted",
+          textAlign: "center",
         }}
       >
-        <Text variant="caption" sx={{ color: 'muted' }}>
+        <Text variant="caption" sx={{ color: "muted" }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  )
+  );
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          p: [4, null, 4]
+          display: "flex",
+          flexDirection: "column",
+          p: [4, null, 4],
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: 'fit-content',
-            background: iconColor || 'primary',
-            borderRadius: 'default',
+            width: "fit-content",
+            background: iconColor || "primary",
+            borderRadius: "default",
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: 'inline-block',
-            transform: ['scale(0.75)', 'none'],
-            transformOrigin: 'bottom left',
+            display: "inline-block",
+            transform: ["scale(0.75)", "none"],
+            transformOrigin: "bottom left",
             boxShadow:
-              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
           <Text
             sx={{
-              color: 'muted',
-              lineHeight: '1.375',
-              fontSize: 17
+              color: "muted",
+              lineHeight: "1.375",
+              fontSize: 17,
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  )
+  );
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: 'none',
-          color: 'smoke',
-          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-          borderRadius: 'default',
+          bg: "none",
+          color: "smoke",
+          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+          borderRadius: "default",
           p: 0,
-          mb: 3
+          mb: 3,
         }}
       >
         {children}
       </Box>
     </Fade>
-  )
+  );
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: 'green' }}
+        sx={{ flexShrink: 0, color: "green" }}
       />
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  )
+  );
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          minHeight: '16rem',
-          backgroundSize: 'auto 115%',
+          display: "block",
+          width: "100%",
+          height: "100%",
+          minHeight: "16rem",
+          backgroundSize: "auto 115%",
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat'
+          backgroundPosition: "center top",
+          backgroundRepeat: "no-repeat",
         }}
       ></Box>
     </Link>
-  )
+  );
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index 0ecdef36a..e8c461c7e 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'dark'
+            bg: "dark",
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [teamType, setTeamType] = useState('')
-  const [teamNumber, setTeamNumber] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [teamType, setTeamType] = useState("");
+  const [teamNumber, setTeamNumber] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false)
+  const [teamNameLoading, setTeamNameLoading] = useState(false);
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async teamNumber => {
+    debounce(async (teamNumber) => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`
-        ).then(res => res.json())
+          `/api/first-team?teamNumber=${teamNumber}`,
+        ).then((res) => res.json());
 
-        setTeamNameLoading(false)
+        setTeamNameLoading(false);
 
         if (data.ok !== false) {
-          setEventName(data.nickname)
+          setEventName(data.nickname);
         } else {
-          setEventName('')
+          setEventName("");
         }
       } catch (e) {}
-    }, 200)
-  )
+    }, 200),
+  );
 
   useEffect(() => {
-    if (teamNumber && teamType === 'FRC') {
-      setTeamNameLoading(true)
-      debouncedTeamNameUpdate.current(teamNumber)
+    if (teamNumber && teamType === "FRC") {
+      setTeamNameLoading(true);
+      debouncedTeamNameUpdate.current(teamNumber);
     } else {
-      setEventName('')
+      setEventName("");
     }
-  }, [teamType, teamNumber])
+  }, [teamType, teamNumber]);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: 'robotics team'
-      })
-    })
+        eventCategory: "robotics team",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setTeamType('')
-    setTeamNumber('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setTeamType("");
+    setTeamNumber("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
-          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
+          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: 'dark', w: '500px !important' }}
-              onChange={e => setTeamType(e.target.value)}
+              sx={{ bg: "dark", w: "500px !important" }}
+              onChange={(e) => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={e => setTeamNumber(e.target.value)}
+            onChange={(e) => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('orange', 'red'),
+            backgroundImage: theme.util.gx("orange", "red"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index be4d257e9..49c03212d 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../../icon";
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: '#3c4858',
-          height: '200px',
-          width: '4px',
+          background: "#3c4858",
+          height: "200px",
+          width: "4px",
           marginLeft: 26,
-          position: 'absolute',
-          zIndex: -1
+          position: "absolute",
+          zIndex: -1,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [null, null, 0],
-          width: [null, null, 0]
-        }
+          width: [null, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
-        color: 'white',
+        background: "red",
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer' }}>
+            <Link href={href} sx={{ cursor: "pointer" }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'muted',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
+              bg: "muted",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
               width: 64,
               fontSize: 18,
-              px: 2
+              px: 2,
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  )
+  );
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index aadd20f57..f274da0df 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
+  Button,
+} from "theme-ui";
+import { Slide } from "react-reveal";
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  )
+  );
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: 'default',
-              objectFit: 'cover'
+              borderRadius: "default",
+              objectFit: "cover",
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {teamNum}
-                  </Link>{' '}
+                  </Link>{" "}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: 'snow',
-                textIndent: '-.375em',
-                lineHeight: 'caption',
-                fontSize: 18
+                color: "snow",
+                textIndent: "-.375em",
+                lineHeight: "caption",
+                fontSize: 18,
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: '100%'
+                    borderRadius: "100%",
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index 34753d552..b8be43cb4 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge
-} from 'theme-ui'
-import Fade from 'react-reveal/Fade'
-import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
-import hero from '../../public/hcb/bg.webp'
+  Badge,
+} from "theme-ui";
+import Fade from "react-reveal/Fade";
+import ScrollHint from "../scroll-hint";
+import Image from "next/image";
+import hero from "../../public/hcb/bg.webp";
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: 'absolute',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
             bottom: 5,
-            mx: 'auto',
-            width: '100%'
+            mx: "auto",
+            width: "100%",
           }}
         >
           <Box
             sx={{
-              zIndex: '100',
-              paddingTop: '96px'
+              zIndex: "100",
+              paddingTop: "96px",
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  textAlign: 'center'
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  textAlign: "center",
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                    letterSpacing: '-0.02em',
-                    '@media screen and (max-height: 600px)': {
-                      lineHeight: 0.875
+                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                    letterSpacing: "-0.02em",
+                    "@media screen and (max-height: 600px)": {
+                      lineHeight: 0.875,
+                    },
+                    "@media screen and (min-height: 610px)": {
+                      lineHeight: 1.125,
                     },
-                    '@media screen and (min-height: 610px)': {
-                      lineHeight: 1.125
-                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 4
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: 4,
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: 'auto'
+                      margin: "auto",
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
-                      '@media screen and (max-height: 600px)': {
-                        lineHeight: 1
-                      }
+                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
+                      "@media screen and (max-height: 600px)": {
+                        lineHeight: 1,
+                      },
                     }}
                   >
-                    The team behind the{' '}
+                    The team behind the{" "}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{' '}
+                    </Link>{" "}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: 3
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: 3,
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: '100' }}
+                  style={{ zIndex: "100" }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 3,
             right: 2,
-            display: ['none', 'block']
+            display: ["none", "block"],
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: '1',
-              bg: 'muted',
-              color: 'steel',
-              fontWeight: 'normal'
+              zIndex: "1",
+              bg: "muted",
+              color: "steel",
+              fontWeight: "normal",
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  )
+  );
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline-red.svg)',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 1rem',
-        backgroundPosition: 'bottom center'
+        backgroundImage: "url(/underline-red.svg)",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1rem",
+        backgroundPosition: "bottom center",
       }}
     >
       {children}
     </span>
-  )
+  );
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'end',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundColor: '#000000',
-        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        width: '100%',
-        minHeight: '100vh',
-        position: 'relative'
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "end",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundColor: "#000000",
+        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        width: "100%",
+        minHeight: "100vh",
+        position: "relative",
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  )
+  );
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
-        height: '100vh',
-        left: '0',
-        right: '0',
-        position: 'absolute',
-        zIndex: '0'
+          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
+        height: "100vh",
+        left: "0",
+        right: "0",
+        position: "absolute",
+        zIndex: "0",
       }}
     ></Box>
-  )
+  );
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index 888cd68e7..a8f0ff9d3 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const orgs = [
   {
-    logo: '/hcb/nonprofits/girlgenius.png',
-    name: 'Girl Genius',
-    director: 'Chloe Yan',
-    role: 'Executive Director',
+    logo: "/hcb/nonprofits/girlgenius.png",
+    name: "Girl Genius",
+    director: "Chloe Yan",
+    role: "Executive Director",
     budget: 5,
-    website: 'girlgeniusmag.tech',
+    website: "girlgeniusmag.tech",
     description:
-      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
+      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
   },
   {
-    logo: '/hcb/nonprofits/techshift.png',
-    transparency: 'techshift',
-    name: 'TechShift',
-    director: 'Daniel Jin',
-    role: 'Co-Executive Director',
+    logo: "/hcb/nonprofits/techshift.png",
+    transparency: "techshift",
+    name: "TechShift",
+    director: "Daniel Jin",
+    role: "Co-Executive Director",
     budget: 100,
-    website: 'techshift.org',
+    website: "techshift.org",
     description:
-      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
+      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
   },
   {
-    logo: '/hcb/nonprofits/projectboom.jpg',
-    transparency: 'projectboom',
-    name: 'Project Boom',
-    director: 'Kunal Botla',
-    role: 'Founder',
-    budget: '5.6',
-    budgetLabel: 'raised',
-    website: 'projectboom.org',
-    url: 'https://projectboom.org/',
+    logo: "/hcb/nonprofits/projectboom.jpg",
+    transparency: "projectboom",
+    name: "Project Boom",
+    director: "Kunal Botla",
+    role: "Founder",
+    budget: "5.6",
+    budgetLabel: "raised",
+    website: "projectboom.org",
+    url: "https://projectboom.org/",
     description:
-      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
+      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
   },
   {
-    logo: '/hcb/nonprofits/executebig.png',
-    name: 'Execute Big',
-    director: 'Mingjie Jiang',
-    role: 'Co-Executive Director',
-    budget: '4',
-    budgetLabel: 'funded',
-    website: 'executebig.org',
+    logo: "/hcb/nonprofits/executebig.png",
+    name: "Execute Big",
+    director: "Mingjie Jiang",
+    role: "Co-Executive Director",
+    budget: "4",
+    budgetLabel: "funded",
+    website: "executebig.org",
     description:
-      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
-  }
-]
+      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
+  },
+];
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          textAlign: 'center',
-          pb: 3
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          pb: 3,
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
         }}
       >
-        {orgs.map(org => {
-          const id = kebabCase(org.name)
+        {orgs.map((org) => {
+          const id = kebabCase(org.name);
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          )
+          );
         })}
       </Grid>
     </Container>
-  )
+  );
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description
+  description,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: "flex", alignItems: "center" }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: '4rem',
-                    width: '4rem',
-                    objectFit: 'cover',
-                    borderRadius: 'default'
+                    height: "4rem",
+                    width: "4rem",
+                    objectFit: "cover",
+                    borderRadius: "default",
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1
+                      letterSpacing: -0.1,
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: 'none',
-                      color: 'muted',
-                      '&:hover': { textDecoration: 'underline' }
+                      textDecoration: "none",
+                      color: "muted",
+                      "&:hover": { textDecoration: "underline" },
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? 'budget'}
+                label={budgetLabel ?? "budget"}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'snow',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "snow",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index b787962ec..70d195a2f 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from 'theme-ui'
-import { Fade } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Text, Container } from "theme-ui";
+import { Fade } from "react-reveal";
+import Icon from "../icon";
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: 'flex',
-          flexDirection: ['column', null, 'row'],
-          alignItems: 'center',
-          width: ['100%', '100%', '100%', '85%'],
-          bg: '#252429',
-          color: 'smoke',
+          display: "flex",
+          flexDirection: ["column", null, "row"],
+          alignItems: "center",
+          width: ["100%", "100%", "100%", "85%"],
+          bg: "#252429",
+          color: "smoke",
           px: 4,
 
-          borderRadius: 'default',
-          position: 'relative'
+          borderRadius: "default",
+          position: "relative",
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  )
+  );
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
     </Box>
-  )
+  );
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: 'flex',
-          alignItems: 'center',
-          pl: 0
+          display: "flex",
+          alignItems: "center",
+          pl: 0,
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
+          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  )
+  );
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index de1a02b1b..646ccf48c 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from 'theme-ui'
-import Timeline from './timeline'
-import Stats from './stats'
-import ApplyButton from './apply-button'
+import { Box, Link, Text, Heading, Flex } from "theme-ui";
+import Timeline from "./timeline";
+import Stats from "./stats";
+import ApplyButton from "./apply-button";
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
+          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: 'column',
-              textAlign: 'center',
-              gap: 3
+              flexDirection: "column",
+              textAlign: "center",
+              gap: 3,
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
+            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{' '}
+              We run Hack Club HQ on HCB!{" "}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  )
+  );
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4b2524a20..4ce569799 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from 'theme-ui'
-import { useEffect, useState } from 'react'
+import { Text, Box, Flex } from "theme-ui";
+import { useEffect, useState } from "react";
 
-const easeInOutExpo = x =>
+const easeInOutExpo = (x) =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2
+    : (2 - Math.pow(2, -20 * x + 10)) / 2;
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter
+  moneyFormatter,
 ) {
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   function animate() {
-    const time = performance.now() - startTime
-    const progress = time / duration
-    const easedProgress = easeInOutExpo(progress)
+    const time = performance.now() - startTime;
+    const progress = time / duration;
+    const easedProgress = easeInOutExpo(progress);
 
-    setBalance(moneyFormatter(amount * easedProgress))
+    setBalance(moneyFormatter(amount * easedProgress));
 
     if (progress < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     } else {
-      setBalance(moneyFormatter(amount))
+      setBalance(moneyFormatter(amount));
     }
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100
+  const normalisedAmount = amount / 100;
   return normalisedAmount
-    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-    .split('.')
+    .toLocaleString("en-US", { style: "currency", currency: "USD" })
+    .split(".");
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      e => {
+      (e) => {
         if (e[0].isIntersecting) {
-          console.info('intersecting')
+          console.info("intersecting");
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney
-          )
+            formatMoney,
+          );
         }
       },
-      { threshold: 1.0 }
-    )
-    observer.observe(document.querySelector('#parent'))
+      { threshold: 1.0 },
+    );
+    observer.observe(document.querySelector("#parent"));
 
-    return () => observer.disconnect()
-  }, [stats.transactions_volume])
+    return () => observer.disconnect();
+  }, [stats.transactions_volume]);
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
+      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: 'green',
-                fontSize: [5, 6]
+                color: "green",
+                fontSize: [5, 6],
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: 'green',
-              fontSize: [5, 6]
+              color: "green",
+              fontSize: [5, 6],
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  )
-}
+  );
+};
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
-    }
-  }
+      stats,
+    },
+  };
 }
 
-export default Stats
+export default Stats;
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index d341b3bbd..3d0ba0e57 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link
-} from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Stat from '../stat'
-import kebabCase from 'lodash/kebabCase'
+  Link,
+} from "theme-ui";
+import { Slide } from "react-reveal";
+import Stat from "../stat";
+import kebabCase from "lodash/kebabCase";
 
 const events = [
   {
-    transparency: 'hackpenn',
-    name: 'Hack Pennsylvania',
-    location: 'State College, PA',
-    organizer: 'Joy Liu',
+    transparency: "hackpenn",
+    name: "Hack Pennsylvania",
+    location: "State College, PA",
+    organizer: "Joy Liu",
     budget: 15,
     attendees: 115,
     testimonial:
-      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
+      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
   },
   {
-    name: 'Teenhacks LI',
-    location: 'Long Island, NY',
-    organizer: 'Wesley Pergament',
+    name: "Teenhacks LI",
+    location: "Long Island, NY",
+    organizer: "Wesley Pergament",
     budget: 35,
     attendees: 300,
     testimonial:
-      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
+      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
   },
   {
-    transparency: 'mahacks',
-    name: 'MAHacks',
-    location: 'Boston, MA',
-    organizer: 'Kat Huang',
+    transparency: "mahacks",
+    name: "MAHacks",
+    location: "Boston, MA",
+    organizer: "Kat Huang",
     budget: 10,
     attendees: 70,
     testimonial:
-      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
+      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
   },
   {
-    transparency: 'dv-hacks',
-    name: 'DV Hacks',
-    location: 'Santa Clara, CA',
-    organizer: 'Khushi Wadhwa',
+    transparency: "dv-hacks",
+    name: "DV Hacks",
+    location: "Santa Clara, CA",
+    organizer: "Khushi Wadhwa",
     budget: 12,
     attendees: 150,
     testimonial:
-      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
-  }
-]
+      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
+  },
+];
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            textAlign: 'center'
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
           }}
         >
           <Heading variant="title">
@@ -78,29 +78,31 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: 'smoke',
+            color: "smoke",
             px: [null, null, 4],
-            mx: 'auto',
+            mx: "auto",
             mt: 2,
             borderRadius: 0,
-            position: 'relative'
+            position: "relative",
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
+              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
             }}
           >
-            {events.map(event => {
-              const id = kebabCase(event.name)
-              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+            {events.map((event) => {
+              const id = kebabCase(event.name);
+              return (
+                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
+              );
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
 function Event({
@@ -111,16 +113,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency
+  transparency,
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: 'darkless',
-          color: 'smoke',
-          borderRadius: 'extra',
-          mx: 'auto'
+          backgroundColor: "darkless",
+          color: "smoke",
+          borderRadius: "extra",
+          mx: "auto",
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -128,21 +130,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: '20rem',
-              objectFit: 'cover',
-              width: '100%',
-              borderRadius: 'default',
-              mb: -3
+              maxHeight: "20rem",
+              objectFit: "cover",
+              width: "100%",
+              borderRadius: "default",
+              mb: -3,
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', 'row', 'row'],
-                alignItems: ['baseline', 'center'],
-                justifyContent: 'space-between',
-                marginBottom: -3
+                display: "flex",
+                flexDirection: ["column", "row", "row"],
+                alignItems: ["baseline", "center"],
+                justifyContent: "space-between",
+                marginBottom: -3,
               }}
             >
               <Text
@@ -154,12 +156,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
                   my: 0,
                   ml: -2,
-                  pl: 0
+                  pl: 0,
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -170,22 +172,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                justifyContent: 'space-between',
-                marginTop: ['0px', 3]
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+                marginTop: ["0px", 3],
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mt: ['16px', '0px']
+                  display: "flex",
+                  alignItems: "center",
+                  mt: ["16px", "0px"],
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -194,11 +196,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: 'flex',
-                    flexDirection: 'column'
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -209,12 +211,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ['16px', '0px'] }}
+                  sx={{ mt: ["16px", "0px"] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, 'auto']}
-                    sx={{ textTransform: 'none' }}
+                    ml={[0, "auto"]}
+                    sx={{ textTransform: "none" }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -227,7 +229,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  )
+  );
 }
 
 function DetailStat({ value, label }) {
@@ -235,7 +237,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  )
+  );
 }
 
 function Quote({ children }) {
@@ -243,13 +245,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: 'muted',
-        textIndent: '-.375em',
-        lineHeight: 'caption',
-        fontSize: 18
+        color: "muted",
+        textIndent: "-.375em",
+        lineHeight: "caption",
+        fontSize: 18,
       }}
     >
       {children}
     </Text>
-  )
+  );
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 44ba05450..823a329d0 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from 'theme-ui'
-import Slide from 'react-reveal'
+import { Flex, Text, Image, Box, Container } from "theme-ui";
+import Slide from "react-reveal";
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ['row', null, 'column'],
-        flex: '1 0 0',
-        alignItems: 'center',
-        maxWidth: ['24rem', null, '12rem'],
-        gap: 3
+        flexDirection: ["row", null, "column"],
+        flex: "1 0 0",
+        alignItems: "center",
+        maxWidth: ["24rem", null, "12rem"],
+        gap: 3,
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ['left', null, 'center'],
-          margin: '0px !important'
+          textAlign: ["left", null, "center"],
+          margin: "0px !important",
         }}
       >
         {label}
       </Text>
     </Flex>
-  )
+  );
 }
 
 export default function Timeline() {
   const labels = [
-    'Register your organization for HCB',
-    'Explore the interface in Playground mode',
-    'Hop on an intro call with our team',
-    'Start fundraising!'
-  ]
-  const stepSideLength = 64
+    "Register your organization for HCB",
+    "Explore the interface in Playground mode",
+    "Hop on an intro call with our team",
+    "Start fundraising!",
+  ];
+  const stepSideLength = 64;
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
+          flexDirection: ["column", null, "row"],
+          justifyContent: "space-between",
           gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
+          maxWidth: ["300px", null, "1200px"],
+          mx: "auto",
+          position: "relative",
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
+            border: "solid #8492a6",
+            borderWidth: "3px 3px 0 0",
+            position: "absolute",
             top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1
+            left: "10%", // TODO: make this dynamic
+            right: ["auto", null, "10%"],
+            bottom: [stepSideLength / 2, null, "auto"],
+            zIndex: -1,
           }}
         />
       </Flex>
     </Slide>
-  )
+  );
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index f730ca824..aa686949f 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react";
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, child =>
+  React.Children.map(children, (child) =>
     React.cloneElement(child, {
-      className: `${child.props.className || ''} ${className}`
-    })
-  )
+      className: `${child.props.className || ""} ${className}`,
+    }),
+  );
 
-const tooltip = direction =>
+const tooltip = (direction) =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'")
+    const escapedText = text.replace(/'/g, "\\'");
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = direction =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `
-    }[direction || 'e']
+        `,
+    }[direction || "e"];
 
     return (
       <>
-        <style>{`.tooltipped${id ? '-' + id : ''} {
+        <style>{`.tooltipped${id ? "-" + id : ""} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = direction =>
             
                 }
             
-                .tooltipped${id ? '-' + id : ''}:hover:after,
-                .tooltipped${id ? '-' + id : ''}:active:after,
-                .tooltipped${id ? '-' + id : ''}:focus:after {
+                .tooltipped${id ? "-" + id : ""}:hover:after,
+                .tooltipped${id ? "-" + id : ""}:active:after,
+                .tooltipped${id ? "-" + id : ""}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? '-' + id : ''}:after {
+                .tooltipped${id ? "-" + id : ""}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    )
-  }
+    );
+  };
 
-const Tooltip = tooltip()
-Tooltip.N = tooltip('n')
-Tooltip.S = tooltip('s')
-Tooltip.E = tooltip('e')
-Tooltip.W = tooltip('w')
+const Tooltip = tooltip();
+Tooltip.N = tooltip("n");
+Tooltip.S = tooltip("s");
+Tooltip.E = tooltip("e");
+Tooltip.W = tooltip("w");
 
-export { Tooltip }
-export default Tooltip
+export { Tooltip };
+export default Tooltip;
diff --git a/components/icon.js b/components/icon.js
index 3aae1161a..b947763c5 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import Icon from '@hackclub/icons'
+import { jsx } from "theme-ui";
+import Icon from "@hackclub/icons";
 
-const IconComponent = props => <Icon {...props} />
+const IconComponent = (props) => <Icon {...props} />;
 
-export default IconComponent
+export default IconComponent;
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index 650b5c981..baadf1925 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from './card-model'
+import CardModel from "./card-model";
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import Buttons from './button'
-import Dot from '../../dot'
+  Text,
+} from "theme-ui";
+import Buttons from "./button";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          filter: 'brightness(0.3)',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          filter: "brightness(0.3)",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ['270px', '270px', '290px', '390px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["270px", "270px", "290px", "390px"],
+              position: "relative",
+              zIndex: 2,
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#ffb400' }}
+              sx={{ color: "#ffb400" }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index 792aedd52..ef332adbc 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import { Box, Button, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
-import Icon from '@hackclub/icons'
+import React from "react";
+import { Box, Button, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
+import Icon from "@hackclub/icons";
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? '700' : '400'
+  let fontWeight = primary ? "700" : "400";
 
   return (
     <Box
       as="button"
-      sx={{ background: 'transparent', border: 'none', color: 'white' }}
+      sx={{ background: "transparent", border: "none", color: "white" }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
-          borderRadius: '100px',
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          px: '3',
-          py: primary ? '12px' : 2,
-          width: 'fit-content',
-          textTransform: 'none',
-          fontWeight: '400',
-          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
-          backdropFilter: 'blur(2px)',
-          fontWeight: fontWeight
+          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
+          borderRadius: "100px",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          color: "inherit",
+          px: "3",
+          py: primary ? "12px" : 2,
+          width: "fit-content",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
+          backdropFilter: "blur(2px)",
+          fontWeight: fontWeight,
         }}
         as="a"
-        href={link || '/'}
+        href={link || "/"}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || 'plus-fill'}
-          sx={{ color: 'inherit', marginRight: 2 }}
+          glyph={icon || "plus-fill"}
+          sx={{ color: "inherit", marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
+        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null
+          return null;
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index ed1e9e0e2..5d00bfad1 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from '../../icon'
-import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import ReactTooltip from 'react-tooltip'
-import Comma from '../../comma'
+import Icon from "../../icon";
+import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
+import { Zoom } from "react-reveal";
+import ReactTooltip from "react-tooltip";
+import Comma from "../../comma";
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       color: color,
       my: [4, 4],
-      p: '24px',
-      backgroundSize: 'cover',
-      backgroundImage: `url(${background})` || '',
-      backgroundPosition: 'center bottom',
-      backgroundRepeat: 'no-repeat',
-      '& p': {
-        fontSize: ['18px', '20px', '22px']
-      }
+      p: "24px",
+      backgroundSize: "cover",
+      backgroundImage: `url(${background})` || "",
+      backgroundPosition: "center bottom",
+      backgroundRepeat: "no-repeat",
+      "& p": {
+        fontSize: ["18px", "20px", "22px"],
+      },
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ['relative', 'relative', 'relative', 'absolute'],
-          width: 'fit-content',
+          position: ["relative", "relative", "relative", "absolute"],
+          width: "fit-content",
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: '12px',
-          py: '4px',
+          px: "12px",
+          py: "4px",
           mb: 2,
-          float: [null, 'right', null],
+          float: [null, "right", null],
           // background: 'rgba(255,255,255,0.2)',
-          border: 'rgba(255,255,255,0.2) dashed 1px',
-          borderRadius: 'circle',
-          fontWeight: 'bold'
+          border: "rgba(255,255,255,0.2) dashed 1px",
+          borderRadius: "circle",
+          fontWeight: "bold",
         }}
       >
-        {text || 'Happening now'}
+        {text || "Happening now"}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === 'bottom' ? (
+        {position === "bottom" ? (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               left: 3,
               bottom: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: '#000',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  color: "#000",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: 'absolute',
+              position: "absolute",
               right: 2,
               top: 2,
-              alignItems: 'center',
-              zIndex: 2
+              alignItems: "center",
+              zIndex: 2,
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
+              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: '0.4s',
-                  '&:hover': {
-                    color: highlight || color
-                  }
+                  transition: "0.4s",
+                  "&:hover": {
+                    color: highlight || color,
+                  },
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
           zIndex: 0,
-          filter
+          filter,
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-)
+);
 
-export default CardModel
+export default CardModel;
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index fe035e253..d15218d4c 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
-import { Box, Grid, Flex, Image, Text } from 'theme-ui'
-import ReactTooltip from 'react-tooltip'
+import React, { useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import { Box, Grid, Flex, Image, Text } from "theme-ui";
+import ReactTooltip from "react-tooltip";
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'red'
+        backgroundColor: "red",
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '120%',
-          height: '120%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px'],
-          zIndex: 0
+          objectFit: "cover",
+          position: "absolute",
+          width: "120%",
+          height: "120%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
+          zIndex: 0,
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: 'default',
+          borderRadius: "default",
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, 'nowrap', 'nowrap'],
-          fontSize: ['36px', 4, 5],
-          position: 'relative',
+          whiteSpace: [null, "nowrap", "nowrap"],
+          fontSize: ["36px", 4, 5],
+          position: "relative",
           zIndex: 2,
-          width: 'fit-content'
+          width: "fit-content",
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: '1px 1px 5px black' }}
+            sx={{ textShadow: "1px 1px 5px black" }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 788c886e4..5c22e716a 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useEffect, useState } from 'react'
-import Buttons from './button'
-import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useEffect, useState } from "react";
+import Buttons from "./button";
+import CardModel from "./card-model";
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
-    let timeLeft = {}
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: '#FF4794',
-          position: 'relative',
-          width: [null, '85%', '80%'],
-          height: [null, '50%', '85%'],
-          border: 'none',
-          borderColor: '#FF4794',
+        sx={(theme) => ({
+          color: "#FF4794",
+          position: "relative",
+          width: [null, "85%", "80%"],
+          height: [null, "50%", "85%"],
+          border: "none",
+          borderColor: "#FF4794",
           fontSize: [3, 4],
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center',
-          opacity: 0.7
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          opacity: 0.7,
         })}
       >
         <Box>
           <Text
             sx={{
-              color: '#FF4794'
+              color: "#FF4794",
             }}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
             sx={{
-              color: 'white',
-              position: 'relative',
-              fontSize: [1, '16px', '20px'],
-              display: 'block',
-              pb: '15px'
+              color: "white",
+              position: "relative",
+              fontSize: [1, "16px", "20px"],
+              display: "block",
+              pb: "15px",
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: '#000'
+        backgroundColor: "#000",
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
+      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ['220px', '220px', '240px', '350px'],
-              position: 'relative',
-              zIndex: 2
+              width: ["220px", "220px", "240px", "350px"],
+              position: "relative",
+              zIndex: 2,
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={['1fr 1fr 1fr 1fr']}
+                columns={["1fr 1fr 1fr 1fr"]}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{' '}
+            In{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{' '}
+            , or{" "}
             <Link
-              sx={{ color: '#FF4794' }}
+              sx={{ color: "#FF4794" }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               mt: [4, 3, 4],
-              position: 'relative'
+              position: "relative",
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index 5419b3a65..ed7f7f73a 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Button, Grid, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
+import CardModel from "./card-model";
+import { Box, Button, Grid, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: 'center center',
-        backgroundSize: '100% auto'
+        backgroundPositon: "center center",
+        backgroundSize: "100% auto",
       }}
     >
-      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, '0.6fr 1fr']}>
+      <Grid columns={[1, "0.6fr 1fr"]}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{' '}
+            Sometimes, we also invite someone we really want to speak to (like{" "}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Sal Khan
             </Link>
-            ,{' '}
+            ,{" "}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               George Hotz
             </Link>
-            , and{' '}
+            , and{" "}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: 'inherit',
-                fontStyle: 'italic',
-                textDecoration: 'none'
+                color: "inherit",
+                fontStyle: "italic",
+                textDecoration: "none",
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{' '}
+            ) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3ddf..54b8a31d1 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
-import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
-import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import { useState, useEffect } from "react";
+import Buttons from "./button";
+import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
+import Dot from "../../dot";
+import { formatDate } from "../../../lib/dates";
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'dark'
+        backgroundColor: "dark",
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
           ml: -4,
           mt: -4,
-          zIndex: 0
+          zIndex: 0,
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
+        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
+        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{' '}
+            more!{" "}
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            alignSelf: 'flex-end',
-            position: ['absolute', 'absolute', 'relative'],
+            flexDirection: "column",
+            alignItems: "flex-end",
+            alignSelf: "flex-end",
+            position: ["absolute", "absolute", "relative"],
             right: 0,
             bottom: 0,
-            display: ['none', 'none', 'block']
+            display: ["none", "none", "block"],
           }}
         >
-          <Box sx={{ width: 'fit-content', float: 'right' }}>
+          <Box sx={{ width: "fit-content", float: "right" }}>
             <Text
               as="h4"
-              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
+              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map(data => (
+            {data.slice(0, 5).map((data) => (
               <Box
                 sx={{
-                  zIndex: '1',
+                  zIndex: "1",
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: 'white',
-                  textDecoration: 'none',
-                  fontWeight: 'normal',
-                  width: 'fit-content',
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: 'small',
+                  color: "white",
+                  textDecoration: "none",
+                  fontWeight: "normal",
+                  width: "fit-content",
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "small",
                   my: 2,
                   a: {
-                    textDecoration: 'none',
-                    color: 'white'
-                  }
+                    textDecoration: "none",
+                    color: "white",
+                  },
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: 'circle',
-                      height: ['20px', '25px', '30px'],
-                      width: ['20px', '25px', '30px'],
-                      mr: '10px'
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "circle",
+                      height: ["20px", "25px", "30px"],
+                      width: ["20px", "25px", "30px"],
+                      mr: "10px",
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: '70%',
-                        width: '70%',
-                        objectFit: 'contain',
-                        borderRadius: 'default'
+                        height: "70%",
+                        width: "70%",
+                        objectFit: "contain",
+                        borderRadius: "default",
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: 'column' }}>
+                <Flex sx={{ flexDirection: "column" }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      fontWeight: 'bold'
+                      color: "inherit",
+                      textDecoration: "none",
+                      fontWeight: "bold",
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: '400',
-                      fontSize: '0.8em',
-                      color: 'sunken'
+                      fontWeight: "400",
+                      fontSize: "0.8em",
+                      color: "sunken",
                     }}
                   >
-                    {formatDate('mmmm d', new Date(data.start))}
+                    {formatDate("mmmm d", new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: 'row',
-          position: 'relative',
-          alignItems: 'center',
+          flexDirection: "row",
+          position: "relative",
+          alignItems: "center",
           mt: 2,
-          justifyContent: 'space-between',
-          display: ['block', 'block', 'none']
+          justifyContent: "space-between",
+          display: ["block", "block", "none"],
         }}
       >
-        <Text sx={{ fontSize: 'small', color: 'white' }}>
+        <Text sx={{ fontSize: "small", color: "white" }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: '10px' }}>
-          {data.slice(0, 2).map(data => (
+        <Flex sx={{ gap: "10px" }}>
+          {data.slice(0, 2).map((data) => (
             <Box
               sx={{
-                zIndex: '1',
+                zIndex: "1",
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: 'white',
-                textDecoration: 'none',
-                fontWeight: 'normal',
-                width: 'fit-content',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'small',
+                color: "white",
+                textDecoration: "none",
+                fontWeight: "normal",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "small",
                 my: 2,
                 a: {
-                  textDecoration: 'none',
-                  color: 'white'
-                }
+                  textDecoration: "none",
+                  color: "white",
+                },
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 'circle',
-                    height: ['20px', '25px', '30px'],
-                    width: ['20px', '25px', '30px'],
-                    mr: '5px'
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "circle",
+                    height: ["20px", "25px", "30px"],
+                    width: ["20px", "25px", "30px"],
+                    mr: "5px",
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: '70%',
-                      width: '70%',
-                      objectFit: 'contain',
-                      borderRadius: 'default',
-                      fontSize: 'small'
+                      height: "70%",
+                      width: "70%",
+                      objectFit: "contain",
+                      borderRadius: "default",
+                      fontSize: "small",
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 31bf491cd..147395cb5 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5',
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index 282ae61b8..f316dc453 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from 'theme-ui'
-import { keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
+import { Text } from "theme-ui";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion()
+  const prefersMotion = usePrefersMotion();
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`
+  }`;
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `
+  `;
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `
+  `;
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: 'Hacker? Inspect 🔍 this page to learn more.';
+      content: "Hacker? Inspect 🔍 this page to learn more.";
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `
+  `;
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
+        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  )
+  );
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,8 +1,18 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
+import {
+  Box,
+  Label,
+  Input,
+  Button,
+  Text,
+  Alert,
+  Card,
+  Flex,
+  Grid,
+} from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -18,7 +28,6 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
-      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -59,151 +68,121 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
+          display: "flex",
+            gridGap: 4,
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
-          <Flex
+        <Flex
+          sx={{
+            justifyContent: "space-between",
+            alignItems: ["left", "left", "center"],
+            flexDirection: ["column", "column", "column"],
+            gap: "10px",
+          }}
+        >
+          <Box>
+            <Text
+              variant="title"
+              sx={{
+                fontSize: [4, "36px", "42px", 6],
+                zIndex: 2,
+                textAlign: "left",
+              }}
+            >
+              Join the newsletter
+            </Text>
+            <Text
+              sx={{
+                color: "darkless",
+                mt: 2,
+                fontSize: 3,
+                textAlign: "left",
+              }}
+              as="p"
+            >
+              We’ll send you an email no more than once a month, when we work on
+              something cool for you. Check out{" "}
+              <Link href="#">past issues</Link>.
+            </Text>
+          </Box>
+          <Grid
+            as="form"
+            ref={formRef}
+            onSubmit={handleSubmit}
+            gap={[2, 3]}
             sx={{
-              placeItems: "center",
-              justifyContent: "center",
-              alignItems: ["left", "left", "center"],
-              flexDirection: "column",
-              gap: "10px",
-              width: "75%",
+              textAlign: "center",
+              alignItems: "end",
+              input: { bg: "sunken" },
+              width: "100%",
             }}
           >
-            <Box>
-              <Text
-                variant="title"
+            <Box sx={{ width: "100%" }}>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="text"
+                name="name"
+                id="name"
+                placeholder="Your Name"
+                required
                 sx={{
-                  fontSize: [4, "36px", "42px", 6],
-                  zIndex: 2,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-              >
-                Join the newsletter
-              </Text>
-              <Text
+              />
+            </Box>
+            <div>
+              <Input
+                autofillBackgroundColor="highlight"
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Your Email"
+                required
                 sx={{
-                  color: "darkless",
-                  mt: 2,
-                  fontSize: 3,
-                  textAlign: "left",
+                  width: "100%",
+                  textAlign: "center",
+                  fontSize: 2,
+                  outline: "none",
                 }}
-                as="p"
-              >
-                We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
-              </Text>
-            </Box>
-            <Grid
-              as="form"
-              ref={formRef}
-              onSubmit={handleSubmit}
-              gap={[2, 3]}
-              sx={{
-                textAlign: "center",
-                alignItems: "end",
-                input: { bg: "sunken" },
-                width: "100%",
-              }}
-            >
-              <Box sx={{ width: "100%" }}>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="text"
-                  name="name"
-                  id="name"
-                  placeholder="Your Name"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </Box>
-              <div>
-                <Input
-                  autofillBackgroundColor="highlight"
-                  type="email"
-                  name="email"
-                  id="email"
-                  placeholder="Your Email"
-                  required
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontSize: 2,
-                  }}
-                />
-              </div>
-              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-                {submitting ? (
-                  <>
-                    <Loading /> Subscribe
-                  </>
-                ) : submitted ? (
-                  <>
-                    <Icon glyph="send" /> You're on the list!
-                  </>
-                ) : (
-                  "Subscribe"
-                )}
-              </Button>
-            </Grid>
-            {/*{submitted && (
+              />
+            </div>
+            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+              {submitting ? (
+                <>
+                  <Loading />
+                  &nbsp; Subscribe
+                </>
+              ) : (
+                "Subscribe"
+              )}
+            </Button>
+          </Grid>
+            {submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}*/}
-          </Flex>
-          <Box
-            sx={{
-              display: "grid",
-              gridGap: 4,
-              width: "100%",
-            }}
-          >
-            <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
-            />
-            <MailCard
-              subject="Community Newsletter"
-              date="September 2022"
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-            />
-          </Box>
+            )}
         </Flex>
+        <Box>
+            <MailCard/>
+        </Box>
       </Card>
-      {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
       <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
         src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
   );
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index f514c06e7..58df5e5e4 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#95C9E5'
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ['200px', '250px', '300px'],
-            mt: ['-10px', '-20px', '-20px'],
-            position: 'relative',
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: 'column',
+            flexDirection: "column",
             mt: [3, 3, 4],
-            alignItems: 'end',
-            justifyContent: 'flex-end'
+            alignItems: "end",
+            justifyContent: "flex-end",
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index fdd4045c4..5cf8335f1 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: '#271932'
+        backgroundColor: "#271932",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ['200px', '250px', '300px'],
-          mt: ['-10px', '-20px', '-20px'],
-          position: 'relative',
+          width: ["200px", "250px", "300px"],
+          mt: ["-10px", "-20px", "-20px"],
+          position: "relative",
           zIndex: 2,
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
+        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: '#271932' }}
+              sx={{ color: "#271932" }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index 3615bdf19..f5985e67f 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import Event from '../events'
-import Dot from '../../dot'
-import Comma from '../../comma'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import Event from "../events";
+import Dot from "../../dot";
+import Comma from "../../comma";
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
+        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
       opacity: 0.8,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
+  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
+      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: 'muted',
-        fontSize: ['14px', '16px', '18px'],
-        fontWeight: '400'
+        color: "muted",
+        fontSize: ["14px", "16px", "18px"],
+        fontWeight: "400",
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-)
+);
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundImage: t => t.util.gx('cyan', 'purple'),
-        minHeight: ['500px', '400px'],
-        py: [3, 3, 4]
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: (t) => t.util.gx("cyan", "purple"),
+        minHeight: ["500px", "400px"],
+        py: [3, 3, 4],
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: 'cover',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          ml: ['-24px', '-32px', '-32px', '-32px'],
-          mt: ['-24px', '-32px', '-32px', '-32px']
+          objectFit: "cover",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          ml: ["-24px", "-32px", "-32px", "-32px"],
+          mt: ["-24px", "-32px", "-32px", "-32px"],
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ['36px', 4, 5],
+            fontSize: ["36px", 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, '70%', null]
+            maxWidth: [null, null, "70%", null],
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2
+            zIndex: 2,
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, '16px', '24px'] }}
+            sx={{ fontSize: [1, "16px", "24px"] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{' '}
+            Khan, George Hotz, and Lady Ada) and host an{" "}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
             >
               AMA
-            </Link>{' '}
-            with them.{' '}
+            </Link>{" "}
+            with them.{" "}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
+              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
             }}
           >
             <Box
               sx={{
-                background: 'rgb(0,0,0,0.6)',
-                height: ['130px', '170px', '170px', '100%'],
-                position: ['relative', 'relative', 'absolute'],
+                background: "rgb(0,0,0,0.6)",
+                height: ["130px", "170px", "170px", "100%"],
+                position: ["relative", "relative", "absolute"],
                 zIndex: 3,
-                width: ['120%', '120%', '260px'],
+                width: ["120%", "120%", "260px"],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ['-10%', '-10%', '-5%'],
-                mb: ['-10%', '-10%', '-5%'],
+                ml: ["-10%", "-10%", "-5%"],
+                mb: ["-10%", "-10%", "-5%"],
                 p: 4,
-                py: [3, 3, 2]
+                py: [3, 3, 2],
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ['row', 'row', 'column'],
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                  textAlign: 'center'
+                  flexDirection: ["row", "row", "column"],
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  textAlign: "center",
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 3e5455ae2..7a8c23a29 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from 'theme-ui'
-import Buttons from './button'
-import CardModel from './card-model'
-import Tilt from '../../tilt'
+import { Box, Grid, Image, Text } from "theme-ui";
+import Buttons from "./button";
+import CardModel from "./card-model";
+import Tilt from "../../tilt";
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: 'cover',
-          backgroundColor: '#1A3C14',
-          backgroundPosition: 'center center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: ['300px', '400px', '400px']
+          backgroundSize: "cover",
+          backgroundColor: "#1A3C14",
+          backgroundPosition: "center center",
+          backgroundRepeat: "no-repeat",
+          minHeight: ["300px", "400px", "400px"],
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: 'cover',
-            position: 'absolute',
-            width: '100%',
-            height: '120%',
-            ml: '-24px',
-            opacity: '0.4',
-            mt: '-24px',
-            zIndex: 0
+            objectFit: "cover",
+            position: "absolute",
+            width: "100%",
+            height: "120%",
+            ml: "-24px",
+            opacity: "0.4",
+            mt: "-24px",
+            zIndex: 0,
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ['90%', '320px', '450px', '500px'],
-            mt: ['42px', 0, 0],
-            position: 'relative',
+            width: ["90%", "320px", "450px", "500px"],
+            mt: ["42px", 0, 0],
+            position: "relative",
             zIndex: 2,
-            fontSize: ['36px', 4, 5],
-            color: 'white'
+            fontSize: ["36px", 4, 5],
+            color: "white",
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: 'fit-content',
-            borderRadius: 'extra',
-            color: 'white',
-            border: 'rgba(255,255,255,0.2) dashed 1px',
+            width: "fit-content",
+            borderRadius: "extra",
+            color: "white",
+            border: "rgba(255,255,255,0.2) dashed 1px",
             zIndex: 2,
-            position: ['absolute', 'relative', 'relative'],
-            top: ['24px', 0, '5px']
+            position: ["absolute", "relative", "relative"],
+            top: ["24px", 0, "5px"],
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
-          sx={{ zIndex: 2, position: 'relative' }}
+          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
+          sx={{ zIndex: 2, position: "relative" }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ['120%', '', ''],
-                maxWidth: ['120%', '', ''],
-                ml: ['-10%', '', ''],
-                mt: ['-10px', '-30px', '', ''],
-                mb: ['-15px', '-30px', '', ''],
-                display: [null, null, 'none', 'none']
+                width: ["120%", "", ""],
+                maxWidth: ["120%", "", ""],
+                ml: ["-10%", "", ""],
+                mt: ["-10px", "-30px", "", ""],
+                mb: ["-15px", "-30px", "", ""],
+                display: [null, null, "none", "none"],
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{' '}
+              programming.{" "}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: 'absolute',
-            right: ['', '-50%', '-35%', '-25%'],
-            top: ['', '15%', '15%', '10%'],
-            width: ['', '100%', '85%', '70%'],
-            display: ['none', 'none', 'block', 'block'],
-            '&:hover': {
-              cursor: 'pointer'
+            position: "absolute",
+            right: ["", "-50%", "-35%", "-25%"],
+            top: ["", "15%", "15%", "10%"],
+            width: ["", "100%", "85%", "70%"],
+            display: ["none", "none", "block", "block"],
+            "&:hover": {
+              cursor: "pointer",
             },
-            zIndex: 3
+            zIndex: 3,
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  )
+  );
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index 7c441cb58..e7a338b8b 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import Buttons from './button'
-import styled from '@emotion/styled'
-import RelativeTime from 'react-relative-time'
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
+import Buttons from "./button";
+import styled from "@emotion/styled";
+import RelativeTime from "react-relative-time";
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '14rem',
-        background: 'rgba(54, 66, 85, 0.75)',
-        borderStyle: 'solid',
-        borderWidth: '4px',
-        boxSizing: 'border-box',
-        borderImageRepeat: 'stretch',
-        borderImageSlice: '3',
-        borderImageWidth: '3',
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "14rem",
+        background: "rgba(54, 66, 85, 0.75)",
+        borderStyle: "solid",
+        borderWidth: "4px",
+        boxSizing: "border-box",
+        borderImageRepeat: "stretch",
+        borderImageSlice: "3",
+        borderImageWidth: "3",
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: '2',
-        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          background: 'rgba(77, 90, 114, 0.8)'
-        }
+        borderImageOutset: "2",
+        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
+        "&:hover": {
+          transform: "scale(1.05)",
+          background: "rgba(77, 90, 114, 0.8)",
+        },
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: 'solid',
-          borderWidth: '4px',
-          padding: '0.6rem 0.6rem 0 0.6rem',
-          borderImageRepeat: 'stretch',
-          borderImageSlice: '3',
-          borderImageWidth: '3',
+          borderStyle: "solid",
+          borderWidth: "4px",
+          padding: "0.6rem 0.6rem 0 0.6rem",
+          borderImageRepeat: "stretch",
+          borderImageSlice: "3",
+          borderImageWidth: "3",
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: '2',
-          height: '100%',
-          textDecoration: 'none'
+          borderImageOutset: "2",
+          height: "100%",
+          textDecoration: "none",
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
+        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
           <Text
             as="h3"
             sx={{
-              textTransform: 'lowercase',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              color: 'white',
-              whiteSpace: 'nowrap',
-              margin: '0.8rem 0 0.8rem 0',
-              fontSize: '1.4rem',
-              fontWeight: '400',
+              textTransform: "lowercase",
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              color: "white",
+              whiteSpace: "nowrap",
+              margin: "0.8rem 0 0.8rem 0",
+              fontSize: "1.4rem",
+              fontWeight: "400",
               my: 0,
-              lineHeight: '1.4rem'
+              lineHeight: "1.4rem",
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: '300',
-              fontSize: '1.1rem',
-              color: 'rgb(151, 166, 187)',
+              fontWeight: "300",
+              fontSize: "1.1rem",
+              color: "rgb(151, 166, 187)",
               padding: 0,
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
               mt: 0,
-              lineHeight: '1rem'
+              lineHeight: "1rem",
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: '300',
-              fontSize: '0.8rem',
-              color: 'snow',
+              fontWeight: "300",
+              fontSize: "0.8rem",
+              color: "snow",
               padding: 0,
               opacity: 0.3,
-              mb: 1
+              mb: 1,
             }}
           >
-            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: '#0C0C16' }}
+      sx={{ backgroundColor: "#0C0C16" }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ['150px', '180px', '220px'],
+          width: ["150px", "180px", "220px"],
           zIndex: 3,
-          position: 'relative',
-          fontSize: ['36px', 4, 5],
-          color: 'white'
+          position: "relative",
+          fontSize: ["36px", 4, 5],
+          color: "white",
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: 'relative' }}
+            sx={{ zIndex: 2, position: "relative" }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: 'black' }}
+              sx={{ color: "black" }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: 'italic',
-              fontSize: [1, '14px', '16px'],
-              position: 'relative'
+              fontStyle: "italic",
+              fontSize: [1, "14px", "16px"],
+              position: "relative",
             }}
           >
-            New from{' '}
+            New from{" "}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: 'none', color: 'inherit' }}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: '20px',
+              gap: "20px",
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ['100%', '90%', '90%']
+              width: ["100%", "90%", "90%"],
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'flex', 'flex'] }}
+              sx={{ display: ["none", "flex", "flex"] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ['none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "flex"] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ['none', 'none', 'none', 'flex'] }}
+              sx={{ display: ["none", "none", "none", "flex"] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index 4da7a77ab..c0d7d5da3 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
-import Buttons from './button'
-import Icon from '@hackclub/icons'
-import Dot from '../../dot'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
+import Buttons from "./button";
+import Icon from "@hackclub/icons";
+import Dot from "../../dot";
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Card
       sx={{
-        color: 'white',
-        background: 'rgba(54,98,166,0.4)',
-        height: '100%',
-        cursor: `${href ? 'pointer' : 'default'}`,
-        display: 'flex',
-        flexDirection: 'column',
+        color: "white",
+        background: "rgba(54,98,166,0.4)",
+        height: "100%",
+        cursor: `${href ? "pointer" : "default"}`,
+        display: "flex",
+        flexDirection: "column",
         zIndex: 2,
-        p: [2, 3, '24px']
+        p: [2, 3, "24px"],
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
-        <Icon glyph={icon} size={32} color={'white'} />
+      <Flex sx={{ alignItems: "center", gap: "10px" }}>
+        <Icon glyph={icon} size={32} color={"white"} />
         <Heading
           sx={{
-            fontSize: ['16px', '16px', '24px', '26px']
+            fontSize: ["16px", "16px", "24px", "26px"],
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, '16px !important', '18px !important'],
+          fontSize: [1, "16px !important", "18px !important"],
           lineHeight: 1.25,
-          display: ['none', 'none', 'block', 'block'],
-          mt: [1, 2, 2]
+          display: ["none", "none", "block", "block"],
+          mt: [1, 2, 2],
         }}
       >
         {description}
       </Text>
     </Card>
-  )
+  );
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: 'cover',
-        backgroundColor: '#3561A4'
+        backgroundSize: "cover",
+        backgroundColor: "#3561A4",
       }}
-      position={[null, 'bottom', 'bottom']}
+      position={[null, "bottom", "bottom"]}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index b986e4010..c2aed8d8d 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from './card-model'
-import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import { useState } from 'react'
-import Buttons from './button'
+import CardModel from "./card-model";
+import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import { useState } from "react";
+import Buttons from "./button";
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: 'text',
-      textDecoration: 'none',
+      color: "text",
+      textDecoration: "none",
       p: [0, 0],
       lineHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '80%',
-      '& span': {
-        lineHeight: 1.25
+      display: "flex",
+      flexDirection: "column",
+      height: "80%",
+      "& span": {
+        lineHeight: 1.25,
       },
-      maxWidth: '250px',
-      height: '250px'
+      maxWidth: "250px",
+      height: "250px",
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: 'body' }}>
+    <Box sx={{ p: 3, lineHeight: "body" }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: '100%',
-        height: '100%'
+        width: "100%",
+        height: "100%",
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: '100%', height: 'auto' }}
+        sx={{ width: "100%", height: "auto" }}
       />
     </Box>
   </Card>
-)
+);
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: 'elevated',
+        backgroundColor: "elevated",
         background:
-          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-        height: 'fit-content'
+          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+        height: "fit-content",
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
-        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
+        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: 'blue', mt: [3, 3, 4] }}
+            sx={{ color: "blue", mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ['none', 'none', 'none', 'flex'] }}
+            sx={{ display: ["none", "none", "none", "flex"] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  )
+  );
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 2058efde4..16827acbe 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from 'theme-ui'
-import Icon from '../icon'
+import { Box, Card, Image, Link, Text } from "theme-ui";
+import Icon from "../icon";
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link
+  link,
 }) {
   return (
     <Box
       sx={{
-        position: 'relative',
-        display: 'inline-block',
-        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
-        '&:hover': { transform: 'scale(1.0625)' },
-        '.icon': {
-          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+        position: "relative",
+        display: "inline-block",
+        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
+        "&:hover": { transform: "scale(1.0625)" },
+        ".icon": {
+          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
+        },
+        ":hover,:focus": {
+          ".icon": {
+            transform: "translateX(28px) translateY(-28px)",
+            opacity: 0,
+          },
         },
-        ':hover,:focus': {
-          '.icon': {
-            transform: 'translateX(28px) translateY(-28px)',
-            opacity: 0
-          }
-        }
       }}
     >
       <Link
         sx={{
-          textDecoration: 'none',
-          '&:hover': { cursor: 'pointer' },
-          '&:hover svg': { opacity: 0.5 }
+          textDecoration: "none",
+          "&:hover": { cursor: "pointer" },
+          "&:hover svg": { opacity: 0.5 },
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: 'absolute',
-            top: ['-26px', '-30px', '-35px'],
-            left: ['10px', '12px', '15px'],
+            position: "absolute",
+            top: ["-26px", "-30px", "-35px"],
+            left: ["10px", "12px", "15px"],
             zIndex: 2,
-            width: ['42px', '50px', '58px'],
-            height: ['42px', '50px', '58px']
+            width: ["42px", "50px", "58px"],
+            height: ["42px", "50px", "58px"],
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: 'relative',
-            color: 'white',
-            width: ['200px', '300px', '300px'],
-            padding: ['12px !important', '16px !important', '20px !important'],
+            position: "relative",
+            color: "white",
+            width: ["200px", "300px", "300px"],
+            padding: ["12px !important", "16px !important", "20px !important"],
             paddingTop: [
-              '14px !important',
-              '20px !important',
-              '24px !important'
+              "14px !important",
+              "20px !important",
+              "24px !important",
             ],
-            height: '100%'
+            height: "100%",
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
+            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
+            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, '16px', '20px']
+              fontSize: [1, "16px", "20px"],
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  )
+  );
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index cd033c406..68873e8cf 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from 'theme-ui'
-import CarouselCards from './carousel-cards'
-import { keyframes } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import Ticker from 'react-ticker'
-import PageVisibility from 'react-page-visibility'
-import { Fade } from 'react-reveal'
+import { Box, Text } from "theme-ui";
+import CarouselCards from "./carousel-cards";
+import { keyframes } from "@emotion/react";
+import React, { useEffect, useState } from "react";
+import Ticker from "react-ticker";
+import PageVisibility from "react-page-visibility";
+import { Fade } from "react-reveal";
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5)
+  let [speed, setSpeed] = useState(5);
 
-  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const [pageIsVisible, setPageIsVisible] = useState(true);
 
-  const handleVisibilityChange = isVisible => {
-    setPageIsVisible(isVisible)
-  }
+  const handleVisibilityChange = (isVisible) => {
+    setPageIsVisible(isVisible);
+  };
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ['22px', 2, 3],
+              fontSize: ["22px", 2, 3],
               mt: [4, 4, 5],
-              maxWidth: 'layout',
-              width: '90vw',
-              margin: 'auto'
+              maxWidth: "layout",
+              width: "90vw",
+              margin: "auto",
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
+          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: 'flex', py: [4, 5, 5] }}
+                sx={{ display: "flex", py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  )
+  );
 }
diff --git a/components/index/events.js b/components/index/events.js
index 36af639ba..0a2c36541 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
-import tt from 'tinytime'
-import Link from 'next/link'
-import { keyframes } from '@emotion/react'
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
+import tt from "tinytime";
+import Link from "next/link";
+import { keyframes } from "@emotion/react";
 
-const past = dt => new Date(dt) < new Date()
+const past = (dt) => new Date(dt) < new Date();
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end)
+  new Date() > new Date(start) && new Date() < new Date(end);
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: 'relative',
-        textDecoration: 'none',
-        bg: 'elevated',
-        color: 'text',
-        p: [3, 3]
+        position: "relative",
+        textDecoration: "none",
+        bg: "elevated",
+        color: "text",
+        p: [3, 3],
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
-          color: past(end) ? 'text' : 'white',
-          lineHeight: ['subheading', 'body'],
+          bg: past(end) ? "sunken" : "primary",
+          color: past(end) ? "text" : "white",
+          lineHeight: ["subheading", "body"],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: { display: ["block", "inline"] },
         }}
       >
         <Text>
-          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
-          {tt('{h}:{mm}').render(new Date(start))}–
-          {tt('{h}:{mm} {a}').render(new Date(end))}
+          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
+          {tt("{h}:{mm}").render(new Date(start))}–
+          {tt("{h}:{mm} {a}").render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: 'center',
-          color: 'muted'
+          alignItems: "center",
+          color: "muted",
         }}
       >
         {now(start, end)}
-        {!avatar.includes('emoji') && (
+        {!avatar.includes("emoji") && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-)
+);
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.5em',
-        height: '.5em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".5em",
+        height: ".5em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: 'sunken',
-          borderRadius: 'extra',
-          overflow: 'hidden',
-          boxShadow: 'elevated'
+          bg: "sunken",
+          borderRadius: "extra",
+          overflow: "hidden",
+          boxShadow: "elevated",
         }}
       >
         {events
           .slice(0, 3)
-          .map(event =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
+          .map((event) =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
           )}
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/index/github.js b/components/index/github.js
index 1c4d62ff0..3c89e2926 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
-import RelativeTime from 'react-relative-time'
+import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
+import RelativeTime from "react-relative-time";
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: 'black',
-        textDecoration: 'none',
-        fontWeight: '400',
+        color: "black",
+        textDecoration: "none",
+        fontWeight: "400",
         zIndex: 4,
-        px: '4px !important',
-        py: '2px !important',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
+        px: "4px !important",
+        py: "2px !important",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
         gap: 2,
-        height: '2rem',
-        width: ['fit-content', null, null, '100%'],
-        maxWidth: '30rem'
+        height: "2rem",
+        width: ["fit-content", null, null, "100%"],
+        maxWidth: "30rem",
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: 'ellipsis',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
+          textOverflow: "ellipsis",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
           flexShrink: 0,
-          display: ['none', 'inline-block', 'inline-block', 'inline-block']
+          display: ["none", "inline-block", "inline-block", "inline-block"],
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: 'ellipsis',
-          maxWidth: '100%',
-          display: 'inline-block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          flexShrink: 1
+          textOverflow: "ellipsis",
+          maxWidth: "100%",
+          display: "inline-block",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          flexShrink: 1,
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ['8px', '8px', '10px'],
-          color: 'inherit',
+          fontSize: ["8px", "8px", "10px"],
+          color: "inherit",
           mx: 2,
           flexShrink: 0,
-          ml: 'auto'
+          ml: "auto",
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  )
+  );
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index b82ebba0d..5ca297f47 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from './nav'
-import Footer from './footer'
-import ForceTheme from './force-theme'
+import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "./nav";
+import Footer from "./footer";
+import ForceTheme from "./force-theme";
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'a, span, time': {
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      "a, span, time": {
         mt: 0,
         mb: 2,
-        bg: 'white',
-        color: 'muted',
-        border: '1px solid',
-        borderColor: 'background',
-        bg: 'sunken',
+        bg: "white",
+        color: "muted",
+        border: "1px solid",
+        borderColor: "background",
+        bg: "sunken",
         fontSize: 2,
-        fontWeight: 'body',
-        lineHeight: '36px',
-        '@media print': {
-          bg: 'transparent',
+        fontWeight: "body",
+        lineHeight: "36px",
+        "@media print": {
+          bg: "transparent",
           border: 0,
-          fontSize: 1
-        }
-      }
+          fontSize: 1,
+        },
+      },
     }}
   >
     <Badge
       variant="pill"
-      as={url ? 'a' : 'span'}
+      as={url ? "a" : "span"}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith('20') ? date : undefined}
+      dateTime={date?.startsWith("20") ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-)
+);
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
+          textAlign: ["left", "center"],
+          color: "cyan",
           my: 4,
-          a: { color: 'inherit' }
-        }
+          a: { color: "inherit" },
+        },
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Letterhead
+export default Letterhead;
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,40 +1,15 @@
-import { Box, Card, Text } from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+export default function MailCard({ mail }) {
   return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
-          <Box
-            sx={{
-              width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
-              backgroundRepeat: "repeat-x",
-            }}
-          />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
-          </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
-        </Box>
-      </Card>
-    </Link>
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
 }
diff --git a/components/mention.js b/components/mention.js
index 658e95dd8..a80097b01 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { memo } from 'react'
+import Link from "next/link";
+import { memo } from "react";
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: 'inline-flex',
-          alignItems: 'baseline',
-          textDecoration: 'none'
+          display: "inline-flex",
+          alignItems: "baseline",
+          textDecoration: "none",
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: '50%',
-              marginRight: '4px',
-              alignSelf: 'flex-end'
+              borderRadius: "50%",
+              marginRight: "4px",
+              alignSelf: "flex-end",
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  )
-})
+  );
+});
 
-export default StaticMention
+export default StaticMention;
diff --git a/components/nav.js b/components/nav.js
index eee8f9418..0165a7330 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import { Box, Container, Flex, Link, Text } from 'theme-ui'
-import theme from '../lib/theme'
-import Icon from './icon'
-import Flag from './flag'
-import ScrollLock from 'react-scrolllock'
-import NextLink from 'next/link'
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { css, keyframes } from "@emotion/react";
+import { Box, Container, Flex, Link, Text } from "theme-ui";
+import theme from "../lib/theme";
+import Icon from "./icon";
+import Flag from "./flag";
+import ScrollLock from "react-scrolllock";
+import NextLink from "next/link";
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`
+  )`;
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = props =>
+const fixed = (props) =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? 'transparent'
+        ? "transparent"
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `
+  `;
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`
+`;
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`
+`;
 
-const hoverColor = name =>
+const hoverColor = (name) =>
   ({
-    white: 'smoke',
-    smoke: 'muted',
-    muted: 'slate',
-    slate: 'black',
-    black: 'slate',
-    primary: 'error'
-  })[name] || 'black'
+    white: "smoke",
+    smoke: "muted",
+    muted: "slate",
+    slate: "black",
+    black: "slate",
+    primary: "error",
+  })[name] || "black";
 
 const slide = keyframes({
-  from: { transform: 'translateY(-25%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-25%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
-const layout = props =>
+const layout = (props) =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? 'flex' : 'none'};
+        display: ${props.toggled ? "flex" : "none"};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = props =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
+          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = props =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `
+      `;
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${props => theme.colors[props.color] || props.color};
+      color: ${(props) => theme.colors[props.color] || props.color};
     }
   }
-`
+`;
 
-const Navigation = props => (
+const Navigation = (props) => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = props => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-)
+);
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`
+`;
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false)
-  const [toggled, setToggled] = useState(false)
-  const [mobile, setMobile] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  const [mobile, setMobile] = useState(false);
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16
+    const newState = window.scrollY >= 16;
 
-    setScrolled(newState)
-  }
+    setScrolled(newState);
+  };
 
   const handleToggleMenu = () => {
-    setToggled(t => !t)
-  }
+    setToggled((t) => !t);
+  };
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (!unfixed) {
-        window.addEventListener('scroll', onScroll)
+        window.addEventListener("scroll", onScroll);
       }
 
-      const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', () => {
-        setMobile(true)
-        setToggled(false)
-      })
+      const mobileQuery = window.matchMedia("(max-width: 48em)");
+      mobileQuery.addEventListener("change", () => {
+        setMobile(true);
+        setToggled(false);
+      });
     }
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [unfixed])
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [unfixed]);
 
   const baseColor = dark
-    ? color || 'white'
-    : color === 'white' && scrolled
-    ? 'black'
-    : color
+    ? color || "white"
+    : color === "white" && scrolled
+    ? "black"
+    : color;
   const toggleColor = dark
-    ? color || 'snow'
-    : toggled || (color === 'white' && scrolled)
-    ? 'slate'
-    : color
+    ? color || "snow"
+    : toggled || (color === "white" && scrolled)
+    ? "slate"
+    : color;
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? 'view-close' : 'menu'} />
+          <Icon glyph={toggled ? "view-close" : "menu"} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  )
+  );
 }
 
 Header.defaultProps = {
-  color: 'white'
-}
+  color: "white",
+};
 
-export default Header
+export default Header;
diff --git a/components/particles.js b/components/particles.js
index ade21b6bc..6f5994838 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from 'react-tsparticles'
-import React from 'react'
+import Particles from "react-tsparticles";
+import React from "react";
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: 'push'
+              mode: "push",
             },
             onHover: {
               enable: true,
-              mode: 'repulse'
+              mode: "repulse",
             },
-            resize: true
+            resize: true,
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40
+              size: 40,
             },
             push: {
-              quantity: 2
+              quantity: 2,
             },
             repulse: {
               distance: 100,
-              duration: 0.5
-            }
-          }
+              duration: 0.5,
+            },
+          },
         },
         particles: {
           color: {
-            value: '#CDAEFB',
-            opacity: 0.2
+            value: "#CDAEFB",
+            opacity: 0.2,
           },
           links: {
-            color: '#82A9F9',
+            color: "#82A9F9",
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1
+            width: 1,
           },
           collisions: {
-            enable: false
+            enable: false,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outMode: 'bounce',
+            outMode: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              area: 500
+              area: 500,
             },
-            value: 50
+            value: 50,
           },
           opacity: {
-            value: 0.25
+            value: 0.25,
           },
           shape: {
-            type: 'circle'
+            type: "circle",
           },
           size: {
             random: true,
-            value: 1.5
-          }
+            value: 1.5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       }}
     />
-  )
-})
+  );
+});
 
-export default Particle
+export default Particle;
diff --git a/components/photo.js b/components/photo.js
index c487c6d51..d44dc9f41 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
-import { Box, Card, Text, useColorMode } from 'theme-ui'
-import Image from 'next/image'
-import theme from '../lib/theme'
+import styled from "@emotion/styled";
+import { Box, Card, Text, useColorMode } from "theme-ui";
+import Image from "next/image";
+import theme from "../lib/theme";
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`
+`;
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode()
-  const showCaption = showAlt && alt
+  const [colorMode] = useColorMode();
+  const showCaption = showAlt && alt;
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: 'elevated',
-        borderRadius: 'extra',
-        position: 'relative',
-        maxWidth: '100%',
+        boxShadow: "elevated",
+        borderRadius: "extra",
+        position: "relative",
+        maxWidth: "100%",
         lineHeight: 0,
-        height: 'fit-content',
+        height: "fit-content",
         ...props.sx,
-        img: { objectFit: 'cover', objectPosition: 'center' }
+        img: { objectFit: "cover", objectPosition: "center" },
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || 'lazy'}
+        loading={loading || "lazy"}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
+          variant={dark ? "cards.translucentDark" : "cards.translucent"}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Photo
+export default Photo;
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 1f7a513a1..366c55f1d 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from 'react'
-import Image from 'next/image'
+import { memo, useState, useEffect } from "react";
+import Image from "next/image";
 
-const stripColons = str => {
-  const colonIndex = str.indexOf(':')
+const stripColons = (str) => {
+  const colonIndex = str.indexOf(":");
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex)
-      return stripColons(str)
+      str = str.substring(0, colonIndex);
+      return stripColons(str);
     } else {
-      str = str.substr(colonIndex + 1)
-      return stripColons(str)
+      str = str.substr(colonIndex + 1);
+      return stripColons(str);
     }
   }
-  return str
-}
+  return str;
+};
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + ' emoji'}
+    alt={name + " emoji"}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-)
+);
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name)
-  let [image, setImage] = useState()
+  const emoji = stripColons(name);
+  let [image, setImage] = useState();
 
   useEffect(() => {
-    fetch('https://scrapbook.hackclub.com/api/emoji')
-      .then(r => r.json())
-      .then(emojis => {
+    fetch("https://scrapbook.hackclub.com/api/emoji")
+      .then((r) => r.json())
+      .then((emojis) => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji])
-          return
+          setImage(emojis[emoji]);
+          return;
         }
         setImage(
-          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
-        )
+          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
+        );
       })
-      .catch(console.error)
-  }, [emoji])
+      .catch(console.error);
+  }, [emoji]);
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  )
-})
+  );
+});
 
-export default CustomEmoji
+export default CustomEmoji;
diff --git a/components/posts/index.js b/components/posts/index.js
index 7eb4b9d56..560a34059 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
-import { formatDate } from '../../lib/dates'
-import { Fragment, memo } from 'react'
-import { last, filter } from 'lodash'
-import Masonry from 'react-masonry-css'
-import Image from 'next/image'
-import Mention from './mention'
-import Emoji from './emoji'
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
+import { formatDate } from "../../lib/dates";
+import { Fragment, memo } from "react";
+import { last, filter } from "lodash";
+import Masonry from "react-masonry-css";
+import Image from "next/image";
+import Mention from "./mention";
+import Emoji from "./emoji";
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
 
-export const formatText = text =>
+export const formatText = (text) =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
-      return <Emoji name={chunk} key={i} />
+    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
+      return <Emoji name={chunk} key={i} />;
     }
-    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
-      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
+    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
+      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      )
+      );
     }
-    if (chunk?.startsWith('<')) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
-      const url = parts?.[2] || last(parts)
+    if (chunk?.startsWith("<")) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
+      const url = parts?.[2] || last(parts);
       const children = last(parts)
-        ?.replace(/https?:\/\//, '')
-        .replace(/\/$/, '')
+        ?.replace(/https?:\/\//, "")
+        .replace(/\/$/, "");
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      )
+      );
     }
-    if (chunk?.startsWith('```')) {
-      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
+    if (chunk?.startsWith("```")) {
+      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
     }
-    if (chunk?.startsWith('`')) {
-      return <code key={i}>{chunk.replace(/`/g, '')}</code>
+    if (chunk?.startsWith("`")) {
+      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
     }
-    if (chunk?.startsWith('*')) {
-      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
+    if (chunk?.startsWith("*")) {
+      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
     }
-    if (chunk?.startsWith('_')) {
-      return <i key={i}>{chunk.replace(/_/g, '')}</i>
+    if (chunk?.startsWith("_")) {
+      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
-  })
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
+  });
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: 'abc',
-    avatar: '',
+    username: "abc",
+    avatar: "",
     streakDisplay: false,
-    streakCount: 0
+    streakCount: 0,
   },
   text,
   attachments = [],
-  postedAt
+  postedAt,
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
+  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: 'inherit',
-        textDecoration: 'none',
-        alignItems: 'center',
-        mb: 2
+        color: "inherit",
+        textDecoration: "none",
+        alignItems: "center",
+        mb: 2,
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: 'primary',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          color: "primary",
+          wordBreak: "break-all",
+          wordWrap: "break-word",
         },
-        '> div': { width: 18, height: 18 }
+        "> div": { width: 18, height: 18 },
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: 'center',
-            textAlign: 'center',
+            alignItems: "center",
+            textAlign: "center",
             mt: 2,
             div: {
-              maxWidth: '100%',
+              maxWidth: "100%",
               maxHeight: 256,
-              bg: 'sunken',
-              gridColumn: attachments.length === 1 ? 'span 2' : null
+              bg: "sunken",
+              gridColumn: attachments.length === 1 ? "span 2" : null,
             },
-            img: { objectFit: 'cover', width: '100%' }
+            img: { objectFit: "cover", width: "100%" },
           }}
         >
-          {filter(attachments, a =>
-            ['jpg', 'jpeg', 'png'].includes(
-              a.split('.')[a.split('.').length - 1]
-            )
-          ).map(img => (
+          {filter(attachments, (a) =>
+            ["jpg", "jpeg", "png"].includes(
+              a.split(".")[a.split(".").length - 1],
+            ),
+          ).map((img) => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-)
+);
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: 'relative' }}>
+  <Box as="section" sx={{ position: "relative" }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1
+        default: 1,
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map(post => (
+      {data.map((post) => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: '30px',
-        textAlign: 'center'
+        paddingBottom: "30px",
+        textAlign: "center",
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-)
+);
 
-export default Posts
+export default Posts;
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1aeb839a9..b99b46fd5 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from 'theme-ui'
-import { memo, useState, useEffect } from 'react'
-import { trim } from 'lodash'
+import { Link, Avatar } from "theme-ui";
+import { memo, useState, useEffect } from "react";
+import { trim } from "lodash";
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null)
+  const [img, setImg] = useState(null);
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then(r => r.json())
-      .then(profile => setImg(profile.avatar))
-      .catch(console.error)
-  }, [username])
+      .then((r) => r.json())
+      .then((profile) => setImg(profile.avatar))
+      .catch(console.error);
+  }, [username]);
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        textDecoration: 'none'
+        display: "inline-flex",
+        alignItems: "baseline",
+        textDecoration: "none",
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: 'flex-end' }}
+          sx={{ mr: 1, alignSelf: "flex-end" }}
         />
       )}
       @{username}
     </Link>
-  )
-})
+  );
+});
 
-export default Mention
+export default Mention;
diff --git a/components/press.mdx b/components/press.mdx
index 34b6f8dbe..92caa211d 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from 'theme-ui'
+import { Grid } from "theme-ui";
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 32dd985ea..8c09489e5 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from 'theme-ui'
-import anime from 'animejs/lib/anime.es.js'
+import { Box } from "theme-ui";
+import anime from "animejs/lib/anime.es.js";
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop }
+  const scroll = { x: document.scrollingElement.scrollTop };
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: 'easeOutExpo',
+    easing: "easeOutExpo",
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x
-    }
-  })
-}
+      document.scrollingElement.scrollTop = scroll.x;
+    },
+  });
+};
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: 'block',
-      position: 'relative',
-      height: '32px',
-      width: '32px',
-      margin: '0 auto',
-      borderBottom: '2px solid #fff',
-      borderRight: '2px solid #fff',
-      transform: 'rotate(45deg)',
-      opacity: '.6',
-      cursor: 'pointer',
-      transition: 'transform .3s',
+      display: "block",
+      position: "relative",
+      height: "32px",
+      width: "32px",
+      margin: "0 auto",
+      borderBottom: "2px solid #fff",
+      borderRight: "2px solid #fff",
+      transform: "rotate(45deg)",
+      opacity: ".6",
+      cursor: "pointer",
+      transition: "transform .3s",
 
-      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
+      "&:active": { transform: " translateY(6px) rotate(45deg)" },
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-)
+);
 
-export default ScrollHint
+export default ScrollHint;
diff --git a/components/secret.js b/components/secret.js
index bb19dc03f..2360db5a5 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,135 +1,137 @@
-import { Box, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { Box, Text } from "theme-ui";
+import { useState, useEffect } from "react";
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState('')
+  const [img, setImage] = useState("");
 
   useEffect(() => {
-    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
-  }, [])
+    setImage(
+      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
+    );
+  }, []);
 
   return (
     <Box
       sx={{
-        position: 'fixed',
+        position: "fixed",
         right: 5,
         bottom: 0,
-        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
-        zIndex: 3
+        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
+        transition: "1s",
+        zIndex: 3,
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: '200px',
-          width: '300px',
-          backgroundColor: 'black',
-          position: 'relative',
-          display: 'flex',
-          justifyContent: 'center',
+          height: "200px",
+          width: "300px",
+          backgroundColor: "black",
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
           zIndex: 0,
-          '&:hover > .lid-one': {
-            transform: 'rotateX(90deg)',
-            transitionDelay: '0s'
+          "&:hover > .lid-one": {
+            transform: "rotateX(90deg)",
+            transitionDelay: "0s",
           },
-          '&:hover > .lid-two': {
-            transform: 'rotateX(180deg)',
-            transitionDelay: '0.25s'
+          "&:hover > .lid-two": {
+            transform: "rotateX(180deg)",
+            transitionDelay: "0.25s",
+          },
+          "&:hover > .letter": {
+            transform: "translateY(-50px)",
+            transitionDelay: "0.5s",
           },
-          '&:hover > .letter': {
-            transform: 'translateY(-50px)',
-            transitionDelay: '0.5s'
-          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(0deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(0deg)",
             zIndex: 3,
-            transitionDelay: '0.75s'
+            transitionDelay: "0.75s",
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderRight: '150px solid transparent',
-            borderBottom: '100px solid transparent',
-            borderLeft: '150px solid transparent',
-            transformOrigin: 'top',
-            transition: 'transform 0.25s linear',
-            borderTop: '100px solid #8492a6',
-            transform: 'rotateX(90deg)',
+            borderRight: "150px solid transparent",
+            borderBottom: "100px solid transparent",
+            borderLeft: "150px solid transparent",
+            transformOrigin: "top",
+            transition: "transform 0.25s linear",
+            borderTop: "100px solid #8492a6",
+            transform: "rotateX(90deg)",
             zIndex: 1,
-            transitionDelay: '0.5s'
+            transitionDelay: "0.5s",
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
+            position: "absolute",
+            height: "100%",
+            width: "100%",
             top: 0,
             left: 0,
-            borderTop: '100px solid transparent',
-            borderRight: '150px solid #f9fafc',
-            borderBottom: '150px solid #f9fafc',
-            borderLeft: '150px solid #f9fafc',
-            zIndex: 3
+            borderTop: "100px solid transparent",
+            borderRight: "150px solid #f9fafc",
+            borderBottom: "150px solid #f9fafc",
+            borderLeft: "150px solid #f9fafc",
+            zIndex: 3,
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            width: '80%',
-            height: '80%',
-            backgroundColor: 'white',
-            borderRadius: '5px',
-            border: '3px solid #e0e6ed',
+            width: "80%",
+            height: "80%",
+            backgroundColor: "white",
+            borderRadius: "5px",
+            border: "3px solid #e0e6ed",
             zIndex: 2,
-            transition: '0.5s',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            mt: 3
+            transition: "0.5s",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            mt: 3,
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: 'auto' }}
+            sx={{ margin: "auto" }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index ff924ecb9..65b8ff2b8 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from 'theme-ui'
+import { Card } from "theme-ui";
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index f998ebf52..be7237754 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signature
+export default Signature;
diff --git a/components/signatures.js b/components/signatures.js
index 1505fbddc..20dad0fd0 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from 'theme-ui'
+import { Image, useColorMode } from "theme-ui";
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode()
-  colorMode = colorMode === 'dark' ? 'light' : 'dark'
+  let [colorMode] = useColorMode();
+  colorMode = colorMode === "dark" ? "light" : "dark";
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ '+ p': { mt: 0 } }}
+      sx={{ "+ p": { mt: 0 } }}
     />
-  )
-}
+  );
+};
 
-export default Signatures
+export default Signatures;
diff --git a/components/slack.js b/components/slack.js
index 74721c322..77a1f034a 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
-import styled from '@emotion/styled'
-import usePrefersMotion from '../lib/use-prefers-motion'
-import useHasMounted from '../lib/use-has-mounted'
-import { formatted } from '../lib/members'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
+import styled from "@emotion/styled";
+import usePrefersMotion from "../lib/use-prefers-motion";
+import useHasMounted from "../lib/use-has-mounted";
+import { formatted } from "../lib/members";
+import Link from "next/link";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: 'center',
+      textAlign: "center",
       zIndex: 999,
       py: 6,
-      color: 'white',
-      'h2,p': { textShadow: 'text' },
-      textAlign: [null, 'center'],
-      position: 'relative',
-      overflow: 'hidden'
+      color: "white",
+      "h2,p": { textShadow: "text" },
+      textAlign: [null, "center"],
+      position: "relative",
+      overflow: "hidden",
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{' '}
+      stereotype of a programmer is a person who sits alone in a dark room.{" "}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.825,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/header.js b/components/slack/header.js
index 93e540243..764a54123 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from 'theme-ui'
-import SlideUp from '../slide-up'
-import JoinForm from './join-form'
-import usePrefersMotion from '../../lib/use-prefers-motion'
-import useHasMounted from '../../lib/use-has-mounted'
+import { Box, Heading, Grid } from "theme-ui";
+import SlideUp from "../slide-up";
+import JoinForm from "./join-form";
+import usePrefersMotion from "../../lib/use-prefers-motion";
+import useHasMounted from "../../lib/use-has-mounted";
 
 const Content = () => (
-  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
     <Box
       sx={{
-        position: 'relative',
+        position: "relative",
         zIndex: 1,
-        textShadow: 'text',
-        textAlign: ['center', 'center']
+        textShadow: "text",
+        textAlign: ["center", "center"],
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: 'white',
+          color: "white",
           fontSize: [5, 6, 7],
-          lineHeight: 'limit',
-          mb: [2, 3]
+          lineHeight: "limit",
+          mb: [2, 3],
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
+    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
       <JoinForm
         sx={{
-          variant: 'cards.translucent',
-          position: 'relative',
+          variant: "cards.translucent",
+          position: "relative",
           zIndex: 3,
-          maxWidth: 'null'
+          maxWidth: "null",
         }}
       />
     </SlideUp>
   </Grid>
-)
+);
 
 const Cover = () => (
   <Box
     sx={{
-      position: 'absolute',
+      position: "absolute",
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      backgroundImage: (t) => t.util.gx("cyan", "purple"),
       opacity: 0.625,
-      zIndex: 1
+      zIndex: 1,
     }}
   />
-)
+);
 
 const Static = ({
-  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: 'relative',
-      overflow: 'hidden',
+      position: "relative",
+      overflow: "hidden",
       backgroundImage: `url(${img})`,
-      backgroundSize: 'cover'
+      backgroundSize: "cover",
     }}
   >
     <Cover />
     <Content />
   </Box>
-)
+);
 
 const Slack = () => {
-  const hasMounted = useHasMounted()
-  const prefersMotion = usePrefersMotion()
+  const hasMounted = useHasMounted();
+  const prefersMotion = usePrefersMotion();
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: 'hidden', position: 'relative' }}
+        sx={{ overflow: "hidden", position: "relative" }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: '100%',
+            height: "100%",
             zIndex: -1,
-            width: '100vw',
-            objectFit: 'cover'
+            width: "100vw",
+            objectFit: "cover",
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    )
+    );
   } else {
-    return <Static />
+    return <Static />;
   }
-}
+};
 
-export default Slack
+export default Slack;
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index ecf1ab7d5..0a531f38e 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box
-} from 'theme-ui'
-import { useRouter } from 'next/router'
-import useForm from '../../lib/use-form'
-import Submit from '../submit'
-import { getCookie, hasCookie } from 'cookies-next'
+  Box,
+} from "theme-ui";
+import { useRouter } from "next/router";
+import useForm from "../../lib/use-form";
+import Submit from "../submit";
+import { getCookie, hasCookie } from "cookies-next";
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter()
-  const { status, formProps, useField } = useForm('/api/join/', null, {
+  const router = useRouter();
+  const { status, formProps, useField } = useForm("/api/join/", null, {
     clearOnSubmit: 5000,
-    method: 'POST',
-    initData: hasCookie('continent')
+    method: "POST",
+    initData: hasCookie("continent")
       ? {
-          continent: getCookie('continent'),
+          continent: getCookie("continent"),
           reason: router.query.reason,
-          event: router.query.event
+          event: router.query.event,
         }
-      : { reason: router.query.reason, event: router.query.event }
-  })
+      : { reason: router.query.reason, event: router.query.event },
+  });
 
-  const eventReferrer = useField('event').value
-  const isAdult = useField('educationLevel').value === 'tertiary'
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
+  const eventReferrer = useField("event").value;
+  const isAdult = useField("educationLevel").value === "tertiary";
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
 
   return (
-    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: 'purple',
-              color: 'white',
+              bg: "purple",
+              color: "white",
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: 'center'
+              textAlign: "center",
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === 'onboard'
+              {eventReferrer === "onboard"
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField('name')}
+              {...useField("name")}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField('email')}
+              {...useField("email")}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField('continent')}
+              {...useField("continent")}
               required
-              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
+              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField('educationLevel')}
+              {...useField("educationLevel")}
               required
               sx={{
-                color: useField('educationLevel').value === '' ? 'muted' : ''
+                color: useField("educationLevel").value === "" ? "muted" : "",
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField('reason')}
+            {...useField("reason")}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
+            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{' '}
+            out more about what all we do, check out our{" "}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{' '}
+            a email at{" "}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={'0px!important'}
+            mt={"0px!important"}
             labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
+              default: useWaitlist ? "Join Waitlist" : "Get Invite",
+              error: "Something went wrong",
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : 'Email coming soon!'
+                : "Email coming soon!",
             }}
           />
         )}
       </form>
     </Card>
-  )
-}
+  );
+};
 
-export default JoinForm
+export default JoinForm;
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 9d811ccd0..6333f8075 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from 'lodash'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
-import useWebSocket from 'react-use-websocket'
-import { Box, Text } from 'theme-ui'
+import { sample, take } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Slide } from "react-reveal";
+import useWebSocket from "react-use-websocket";
+import { Box, Text } from "theme-ui";
 
-const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
+const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-)
+);
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter(i => i.length > 0)
-)
+    .filter((i) => i.length > 0),
+);
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false)
-  const [events, setEvents] = useState([])
+  const didUnmount = useRef(false);
+  const [events, setEvents] = useState([]);
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000
+      reconnectInterval: 3000,
     }),
-    []
-  )
+    [],
+  );
 
   const { lastJsonMessage } = useWebSocket(
-    'wss://joebunyan.haas.hackclub.com/stream',
-    STATIC_OPTIONS
-  )
+    "wss://joebunyan.haas.hackclub.com/stream",
+    STATIC_OPTIONS,
+  );
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === 'message' ||
+          !lastJsonMessage.type === "message" ||
           !lastJsonMessage.channel
         ) {
-          return false
+          return false;
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
         )
-          .then(r => r.json())
-          .catch(err => console.error(err))
+          .then((r) => r.json())
+          .catch((err) => console.error(err));
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents(prev => [
+          setEvents((prev) => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors)
+              color: sample(colors),
             },
-            ...prev
-          ])
+            ...prev,
+          ]);
         }
       }
 
-      resolveEvent()
+      resolveEvent();
     } catch (err) {
-      true
+      true;
     }
-  }, [lastJsonMessage])
+  }, [lastJsonMessage]);
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true
-    }
-  })
+      didUnmount.current = true;
+    };
+  });
 
   return (
     <Box
       as="ol"
       sx={{
-        height: '100%',
-        minHeight: '4em',
+        height: "100%",
+        minHeight: "4em",
         maxHeight: [128, 256],
-        overflow: 'hidden',
-        listStyle: 'none',
-        lineHeight: 'heading',
+        overflow: "hidden",
+        listStyle: "none",
+        lineHeight: "heading",
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || "black",
         fontSize: 2,
-        overflowY: 'hidden',
-        position: 'relative',
-        ':after': {
+        overflowY: "hidden",
+        position: "relative",
+        ":after": {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           bottom: 0,
           left: 0,
           right: 0,
-          display: 'block',
-          height: '2em',
-          backgroundImage: theme =>
+          display: "block",
+          height: "2em",
+          backgroundImage: (theme) =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`
+            })`,
         },
         div: { mb: [1, 2] },
-        'circle:last-of-type': { animationDuration: '1s' },
-        ...sx
+        "circle:last-of-type": { animationDuration: "1s" },
+        ...sx,
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === 'message' && (
+            {type === "message" && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  )
-}
+  );
+};
 
-export default SlackEvents
+export default SlackEvents;
diff --git a/components/slide-down.js b/components/slide-down.js
index cf37c3a5b..e0a4c836b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideDown = keyframes({
-  from: { transform: 'translateY(-100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideDown
+export default SlideDown;
diff --git a/components/slide-up.js b/components/slide-up.js
index 87a19bcda..67f5ff6cb 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
+import React from "react";
+import { Box } from "theme-ui";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
 
 const slideUp = keyframes({
-  from: { transform: 'translateY(100%)', opacity: 0 },
-  to: { transform: 'translateY(0)', opacity: 1 }
-})
+  from: { transform: "translateY(100%)", opacity: 0 },
+  to: { transform: "translateY(0)", opacity: 1 },
+});
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`
+`;
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms'
+      animationDuration: duration + "ms",
+      animationDelay: delay + "ms",
     }}
   />
-)
+);
 
-export default SlideUp
+export default SlideUp;
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index fdcf53913..0d6f8e4e4 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + '%',
-      left: random(0, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(0, 100) + "%",
+      left: random(0, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const Sparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450
-  )
+    prefersReducedMotion ? null : 450,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
+    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default Sparkles
+export default Sparkles;
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index 46404316f..e20419142 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { range, sample, random } from 'lodash'
-import { Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import useRandomInterval from '../../lib/use-random-interval'
-import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { range, sample, random } from "lodash";
+import { Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import useRandomInterval from "../../lib/use-random-interval";
+import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
 
-const generateSparkle = color => {
+const generateSparkle = (color) => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + '%',
-      left: random(-10, 100) + '%'
-    }
-  }
-  return sparkle
-}
+      top: random(-10, 100) + "%",
+      left: random(-10, 100) + "%",
+    },
+  };
+  return sparkle;
+};
 
 const MSparkles = ({
-  colors = ['orange', 'yellow', 'green'],
+  colors = ["orange", "yellow", "green"],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map(n => theme.colors[n])
-  const getColor = () => sample(allColors)
+  const allColors = colors.map((n) => theme.colors[n]);
+  const getColor = () => sample(allColors);
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()))
-  })
-  const prefersReducedMotion = usePrefersReducedMotion()
+    return range(3).map(() => generateSparkle(getColor()));
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor())
-      const now = Date.now()
-      const nextSparkles = sparkles.filter(sp => {
-        const delta = now - sp.createdAt
-        return delta < 750
-      })
-      nextSparkles.push(sparkle)
-      setSparkles(nextSparkles)
+      const sparkle = generateSparkle(getColor());
+      const now = Date.now();
+      const nextSparkles = sparkles.filter((sp) => {
+        const delta = now - sp.createdAt;
+        return delta < 750;
+      });
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150
-  )
+    prefersReducedMotion ? null : 150,
+  );
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map(sparkle => (
+      {sparkles.map((sparkle) => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  )
-}
+  );
+};
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || '0 0 82 82'}
+        viewBox={viewBox || "0 0 82 82"}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  )
-}
+  );
+};
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`
+`;
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`
+`;
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`
+`;
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`
+`;
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`
+`;
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`
+`;
 
-export default MSparkles
+export default MSparkles;
diff --git a/components/stage.js b/components/stage.js
index 67c8383a8..2dda84ddf 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from 'theme-ui'
-import Icon from '../components/icon'
+import { Box, Heading, Text } from "theme-ui";
+import Icon from "../components/icon";
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
-export default Stage
+export default Stage;
diff --git a/components/stat.js b/components/stat.js
index f858a098c..c7f2cfd27 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from 'theme-ui'
-import { isEmpty } from 'lodash'
+import { Flex, Text } from "theme-ui";
+import { isEmpty } from "lodash";
 
 const Stat = ({
   value,
   label,
-  unit = '',
-  color = 'text',
+  unit = "",
+  color = "text",
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: 'heading',
-      flexDirection: reversed ? 'column-reverse' : 'column',
+      fontFamily: "heading",
+      flexDirection: reversed ? "column-reverse" : "column",
       lineHeight: 1,
-      ...props.sx
+      ...props.sx,
     }}
   >
     <Flex
       sx={{
-        alignItems: 'center',
-        justifyContent: center ? 'center' : 'start',
-        position: 'relative'
+        alignItems: "center",
+        justifyContent: center ? "center" : "start",
+        position: "relative",
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: 'heading',
-          letterSpacing: 'title',
-          my: 0
+          fontWeight: "heading",
+          letterSpacing: "title",
+          my: 0,
         }}
       >
-        {value || '—'}
+        {value || "—"}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === 'text' ? 'secondary' : color,
-            ml: [null, unit === '%' ? 1 : null],
+            color: color === "text" ? "secondary" : color,
+            ml: [null, unit === "%" ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1]
+            pt: [null, 1],
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: 'muted',
+            color: "muted",
             ml: [null, 1],
             pt: [null, 1],
-            '::before': {
-              content: '"/"'
-            }
+            "::before": {
+              content: '"/"',
+            },
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: 'headline',
-          textTransform: 'uppercase'
+          letterSpacing: "headline",
+          textTransform: "uppercase",
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-)
+);
 
-export default Stat
+export default Stat;
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 01efcf822..29b789846 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from 'theme-ui'
-import useForm from '../../lib/use-form'
-import countries from '../../lib/countries'
-import Submit from '../submit'
+import { Grid, Card, Label, Input, Select } from "theme-ui";
+import useForm from "../../lib/use-form";
+import countries from "../../lib/countries";
+import Submit from "../submit";
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm('/api/stickers')
+  const { status, formProps, useField } = useForm("/api/stickers");
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ['span 2', 'auto'] },
-        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
-        'input, select': { bg: 'dark' }
+        label: { gridColumn: ["span 2", "auto"] },
+        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
+        "input, select": { bg: "dark" },
       }}
     >
       <Label>
         Full name
-        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
+        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField('email')}
+          {...useField("email")}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField('addressFirst')}
+          {...useField("addressFirst")}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField('addressSecond')}
+          {...useField("addressSecond")}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         City
-        <Input {...useField('city')} placeholder="West Hollywood" required />
+        <Input {...useField("city")} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         State/Province
-        <Input {...useField('state')} placeholder="CA" required />
+        <Input {...useField("state")} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Zip Code
-        <Input {...useField('zipCode')} placeholder="90069" />
+        <Input {...useField("zipCode")} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: 'span 1 !important' }}>
+      <Label sx={{ gridColumn: "span 1 !important" }}>
         Country
-        <Select {...useField('country')} defaultValue="Choose a country">
+        <Select {...useField("country")} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map(country => (
+          {countries.countries.map((country) => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: 'Request stickers',
-          error: 'Something went wrong',
-          success: 'Coming your way!'
+          default: "Request stickers",
+          error: "Something went wrong",
+          success: "Coming your way!",
         }}
       />
     </Grid>
-  )
-}
+  );
+};
 
-export default RequestForm
+export default RequestForm;
diff --git a/components/submit.js b/components/submit.js
index dff96e2f6..5aa6a7219 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from 'theme-ui'
-import theme from '../lib/theme'
+import { Button } from "theme-ui";
+import theme from "../lib/theme";
 
 const bg = {
   default: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   submitting: {
-    bg: 'blue',
-    backgroundImage: theme.util.gx('cyan', 'blue')
+    bg: "blue",
+    backgroundImage: theme.util.gx("cyan", "blue"),
   },
   success: {
-    bg: 'green',
-    backgroundImage: theme.util.gx('yellow', 'green')
+    bg: "green",
+    backgroundImage: theme.util.gx("yellow", "green"),
   },
   error: {
-    bg: 'orange',
-    backgroundImage: theme.util.gx('orange', 'red'),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
-  }
-}
+    bg: "orange",
+    backgroundImage: theme.util.gx("orange", "red"),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
+  },
+};
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: 'none',
-  cursor: 'not-allowed'
-}
+  pointerEvents: "none",
+  cursor: "not-allowed",
+};
 
 const Submit = ({
   status,
   labels = {
-    default: 'Submit',
-    error: 'Error!',
-    success: 'Check your email!'
+    default: "Submit",
+    error: "Error!",
+    success: "Check your email!",
   },
-  width = '100%',
+  width = "100%",
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
-      ...sx
+      ...(status === "submitting" ? submitting : bg[status]),
+      ...sx,
     }}
-    disabled={status === 'submitting'}
+    disabled={status === "submitting"}
     {...props}
   >
-    {status === 'submitting' ? 'Submitting…' : labels[status]}
+    {status === "submitting" ? "Submitting…" : labels[status]}
   </Button>
-)
+);
 
-export default Submit
+export default Submit;
diff --git a/components/tilt.js b/components/tilt.js
index 30862a745..79581a1b4 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-import VanillaTilt from 'vanilla-tilt'
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null)
+  const root = useRef(null);
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      'max-glare': 0.25,
+      "max-glare": 0.25,
       gyroscope: false,
-      ...options
-    })
-  }, [options])
+      ...options,
+    });
+  }, [options]);
 
-  return React.cloneElement(children, { ref: root })
-}
+  return React.cloneElement(children, { ref: root });
+};
 
-export default Tilt
+export default Tilt;
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index 8fff25ad4..ab7f81bf9 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
-import Icon from '@hackclub/icons'
+  Link,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
+import Icon from "@hackclub/icons";
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg
+  bg,
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: 'white',
-          background: 'rgba(225,225,225,0.2)',
-          height: '100%',
-          cursor: `${href ? 'pointer' : 'default'}`,
-          display: 'flex',
-          flexDirection: 'column'
+          color: "white",
+          background: "rgba(225,225,225,0.2)",
+          height: "100%",
+          cursor: `${href ? "pointer" : "default"}`,
+          display: "flex",
+          flexDirection: "column",
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? 'a' : 'div'}
+        as={href ? "a" : "div"}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4]
+              fontSize: [2, 3, 4],
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: 'fit-content',
-              bg: bg || 'white',
+              width: "fit-content",
+              bg: bg || "white",
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: 'inline-block',
-              transform: ['scale(0.75)', 'none'],
-              transformOrigin: 'bottom left',
+              display: "inline-block",
+              transform: ["scale(0.75)", "none"],
+              transformOrigin: "bottom left",
               boxShadow:
-                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
             }}
           >
-            <Icon glyph={icon} size={48} color={color || 'white'} />
+            <Icon glyph={icon} size={48} color={color || "white"} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5]
+            fontSize: [3, 4, 5],
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3]
+            fontSize: [2, 3],
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  )
+  );
 }
 
-export default BreakdownBox
+export default BreakdownBox;
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index ba70ef043..5ed8a45fe 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link
-} from 'theme-ui'
-import { Fade, Slide } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
+  Link,
+} from "theme-ui";
+import { Fade, Slide } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
+          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
-                fontStyle: 'italic'
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
+                fontStyle: "italic",
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0
+                mt: 0,
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: '#338eda',
-                background: 'white',
+                color: "#338eda",
+                background: "white",
                 px: 3,
                 py: 2,
-                borderRadius: '10px',
-                width: 'fit-content'
+                borderRadius: "10px",
+                width: "fit-content",
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  )
+  );
 }
 
-export default Breakdown
+export default Breakdown;
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 6e44dca49..395d19a6e 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from 'theme-ui'
-import Footer from '../footer'
+import { Box, Heading, Text, Link } from "theme-ui";
+import Footer from "../footer";
 
 const Description = () => (
-  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{' '}
+      explore. In the past few years, we've{" "}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{' '}
+      ,{" "}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{' '}
+      , and{" "}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-)
+);
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  )
-}
+  );
+};
 
-export default WinterFooter
+export default WinterFooter;
diff --git a/components/winter/form.js b/components/winter/form.js
index 09d411f5d..1fe20e187 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import theme from '@hackclub/theme'
-import Icon from '../icon'
-import { keyframes } from '@emotion/react'
-import debounce from 'lodash/debounce'
+import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import theme from "@hackclub/theme";
+import Icon from "../icon";
+import { keyframes } from "@emotion/react";
+import debounce from "lodash/debounce";
 
 const hideAnimation = keyframes({
-  from: { display: 'flex' },
-  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
-})
+  from: { display: "flex" },
+  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
+});
 
 const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
+      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false
+  loading = false,
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: 'relative' }}>
+      <Box sx={{ position: "relative" }}>
         {loading && (
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: '1px solid white',
-              borderRightStyle: 'none',
+              border: "1px solid white",
+              borderRightStyle: "none",
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: '50%'
+              borderRadius: "50%",
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: 'light'
+            bg: "light",
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  )
+  );
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false);
 
-  const [eventName, setEventName] = useState('')
-  const [userEmail, setUserEmail] = useState('')
+  const [eventName, setEventName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
 
-  const handleSubmit = async e => {
-    e.preventDefault()
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-    await fetch('/api/hcb/demo', {
-      method: 'POST',
+    await fetch("/api/hcb/demo", {
+      method: "POST",
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: 'hardware grant'
-      })
-    })
+        eventCategory: "hardware grant",
+      }),
+    });
 
-    setSubmitted(true)
+    setSubmitted(true);
 
     // clear form
-    setEventName('')
-    setUserEmail('')
-  }
+    setEventName("");
+    setUserEmail("");
+  };
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={e => setEventName(e.target.value)}
+          onChange={(e) => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={e => setUserEmail(e.target.value)}
+          onChange={(e) => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx('green', 'blue'),
+            backgroundImage: theme.util.gx("green", "blue"),
             mt: [2, 3],
-            py: 2
+            py: 2,
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: 'default',
-            color: 'white',
-            bg: 'green',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'start',
+            borderRadius: "default",
+            color: "white",
+            bg: "green",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "start",
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: 'forwards'
+            animationFillMode: "forwards",
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  )
+  );
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 09d17e439..043b09dd3 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar
-} from 'theme-ui'
-import Icon from '../icon'
-import Tilt from '../tilt'
-import { Zoom } from 'react-reveal'
+  Avatar,
+} from "theme-ui";
+import Icon from "../icon";
+import Tilt from "../tilt";
+import { Zoom } from "react-reveal";
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
           gap: 3,
-          h: 'fit-content'
+          h: "fit-content",
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: ['100%']
+              display: "flex",
+              flexDirection: "column",
+              height: ["100%"],
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: 'muted' }}>
+              <Text sx={{ color: "muted" }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 4,
-                display: 'flex',
-                flexDirection: 'column',
-                height: 'fit-content'
+                display: "flex",
+                flexDirection: "column",
+                height: "fit-content",
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 4,
                 py: 3,
-                mb: 3
+                mb: 3,
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ['300px', '500px', '100%', '230px'],
-                  backgroundSize: '100%',
-                  backgroundRepeat: 'no-repeat',
-                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-                  display: ['block', 'block', 'none', 'block']
+                  height: ["300px", "500px", "100%", "230px"],
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+                  display: ["block", "block", "none", "block"],
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ['300px', '500px', '100%', '230px'],
-              backgroundSize: '100%',
-              backgroundRepeat: 'no-repeat',
-              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
-              display: ['none', 'none', 'block', 'none']
+              height: ["300px", "500px", "100%", "230px"],
+              backgroundSize: "100%",
+              backgroundRepeat: "no-repeat",
+              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
+              display: ["none", "none", "block", "none"],
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  )
+  );
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        alignItems: 'center',
-        my: 2
+        flexDirection: "row",
+        alignItems: "flex-start",
+        alignItems: "center",
+        my: 2,
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || 'text'}
+        color={iconColor || "text"}
         sx={{
-          flexShrink: '0'
+          flexShrink: "0",
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  )
+  );
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: 'white', ml: 2 }}
+        sx={{ backgroundColor: "white", ml: 2 }}
       />
     </Box>
-  )
+  );
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 95a9c1d15..2415f220a 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import { Fade } from 'react-reveal'
-import Rsvp from './rsvp'
-import { keyframes } from '@emotion/react'
+import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
+import Snowfall from "react-snowfall";
+import { Fade } from "react-reveal";
+import Rsvp from "./rsvp";
+import { keyframes } from "@emotion/react";
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  '50%': { opacity: 1 },
-  to: { opacity: 0 }
-})
+  "50%": { opacity: 1 },
+  to: { opacity: 0 },
+});
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: 'green',
-        color: 'white',
-        borderRadius: 'circle',
-        display: 'inline-block',
+        bg: "green",
+        color: "white",
+        borderRadius: "circle",
+        display: "inline-block",
         lineHeight: 0,
-        width: '.4em',
-        height: '.4em',
-        marginRight: '.4em',
-        marginBottom: '.12em',
+        width: ".4em",
+        height: ".4em",
+        marginRight: ".4em",
+        marginBottom: ".12em",
         animationName: `${flashing}`,
-        animationDuration: '3s',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite'
+        animationDuration: "3s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
       }}
     />
-  )
+  );
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           background:
-            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
-          backgroundPosition: 'bottom center',
-          backgroundSize: ['200%', '150%', '100%'],
-          backgroundRepeat: 'no-repeat',
-          height: '85vh',
-          minHeight: [null, '750px'],
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 2
+            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
+          backgroundPosition: "bottom center",
+          backgroundSize: ["200%", "150%", "100%"],
+          backgroundRepeat: "no-repeat",
+          height: "85vh",
+          minHeight: [null, "750px"],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          zIndex: 2,
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: 'blur(1.5px)',
-              maxWidth: 'container'
+              backdropFilter: "blur(1.5px)",
+              maxWidth: "container",
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: 'sunken'
+                  color: "sunken",
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: 'white',
-                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
+                  color: "white",
+                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: 'white',
-                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
+                color: "white",
+                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
                 pt: 2,
-                maxWidth: '50ch',
-                margin: 'auto',
-                my: 3
+                maxWidth: "50ch",
+                margin: "auto",
+                my: 3,
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{' '}
+              together in the{" "}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: 'blue',
-                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
+                  color: "blue",
+                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                mt: 2
+                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                mt: 2,
               }}
             >
-              {' '}
+              {" "}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index ae113f6c3..5b6203501 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import NextImage from 'next/image'
-import Marquee from 'react-marquee-slider'
-import Photo1 from '../../public/winter/1.jpeg'
-import Photo2 from '../../public/winter/2.png'
-import Photo3 from '../../public/winter/3.jpeg'
-import Photo4 from '../../public/winter/4.jpeg'
-import Photo5 from '../../public/winter/5.jpeg'
-import Photo6 from '../../public/winter/6.jpeg'
-import Photo7 from '../../public/winter/7.jpeg'
-import Photo8 from '../../public/winter/8.jpeg'
-import Photo9 from '../../public/winter/9.jpeg'
-import Photo10 from '../../public/winter/10.jpeg'
-import Photo12 from '../../public/winter/12.jpeg'
-import Photo13 from '../../public/winter/13.jpeg'
-import Photo14 from '../../public/winter/14.jpeg'
-import Photo15 from '../../public/winter/15.jpeg'
-import Photo16 from '../../public/winter/16.jpeg'
-import Photo17 from '../../public/winter/17.jpeg'
-import Photo18 from '../../public/winter/18.jpeg'
-import Photo19 from '../../public/winter/19.jpeg'
-import Photo20 from '../../public/winter/20.jpeg'
-import Photo21 from '../../public/winter/21.jpeg'
-import Photo22 from '../../public/winter/22.jpeg'
-import Photo23 from '../../public/winter/23.jpeg'
-import Photo24 from '../../public/winter/24.jpeg'
-import Photo25 from '../../public/winter/25.jpeg'
-import Photo26 from '../../public/winter/26.jpeg'
-import Photo27 from '../../public/winter/27.jpeg'
-import Photo28 from '../../public/winter/28.jpeg'
-import Photo29 from '../../public/winter/29.jpeg'
-import Photo30 from '../../public/winter/30.jpeg'
-import Photo31 from '../../public/winter/31.png'
+  Image,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import NextImage from "next/image";
+import Marquee from "react-marquee-slider";
+import Photo1 from "../../public/winter/1.jpeg";
+import Photo2 from "../../public/winter/2.png";
+import Photo3 from "../../public/winter/3.jpeg";
+import Photo4 from "../../public/winter/4.jpeg";
+import Photo5 from "../../public/winter/5.jpeg";
+import Photo6 from "../../public/winter/6.jpeg";
+import Photo7 from "../../public/winter/7.jpeg";
+import Photo8 from "../../public/winter/8.jpeg";
+import Photo9 from "../../public/winter/9.jpeg";
+import Photo10 from "../../public/winter/10.jpeg";
+import Photo12 from "../../public/winter/12.jpeg";
+import Photo13 from "../../public/winter/13.jpeg";
+import Photo14 from "../../public/winter/14.jpeg";
+import Photo15 from "../../public/winter/15.jpeg";
+import Photo16 from "../../public/winter/16.jpeg";
+import Photo17 from "../../public/winter/17.jpeg";
+import Photo18 from "../../public/winter/18.jpeg";
+import Photo19 from "../../public/winter/19.jpeg";
+import Photo20 from "../../public/winter/20.jpeg";
+import Photo21 from "../../public/winter/21.jpeg";
+import Photo22 from "../../public/winter/22.jpeg";
+import Photo23 from "../../public/winter/23.jpeg";
+import Photo24 from "../../public/winter/24.jpeg";
+import Photo25 from "../../public/winter/25.jpeg";
+import Photo26 from "../../public/winter/26.jpeg";
+import Photo27 from "../../public/winter/27.jpeg";
+import Photo28 from "../../public/winter/28.jpeg";
+import Photo29 from "../../public/winter/29.jpeg";
+import Photo30 from "../../public/winter/30.jpeg";
+import Photo31 from "../../public/winter/31.png";
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
+      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
     >
       <Flex
         as="a"
         href={
-          username !== 'cjmika110'
+          username !== "cjmika110"
             ? `https://scrapbook.hackclub.com/${username}`
-            : 'https://scrapbook.hackclub.com'
+            : "https://scrapbook.hackclub.com"
         }
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          alignItems: 'center',
-          mb: 2
+          color: "inherit",
+          textDecoration: "none",
+          alignItems: "center",
+          mb: 2,
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: 'left',
+          textAlign: "left",
           mb: 2,
           a: {
-            color: 'primary',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
+            color: "primary",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
           },
-          '> div': { width: 18, height: 18 }
+          "> div": { width: 18, height: 18 },
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          height: '200px',
-          overflow: 'hidden',
+          position: "relative",
+          width: "100%",
+          height: "200px",
+          overflow: "hidden",
           backgroundImage: `url('${image}')`,
-          backgroundSize: '100%',
-          backgroundPosition: 'bottom center',
-          backgroundRepeat: 'no-repeat'
+          backgroundSize: "100%",
+          backgroundPosition: "bottom center",
+          backgroundRepeat: "no-repeat",
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  )
-}
+  );
+};
 
 export default function Projects() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   let list = [
-    'drawing robot',
-    'drone',
-    'CNC machine',
-    'pixel art display',
-    'camera',
-    '3D printer'
-  ]
+    "drawing robot",
+    "drone",
+    "CNC machine",
+    "pixel art display",
+    "camera",
+    "3D printer",
+  ];
 
   if (count === list.length - 1) {
-    setCount(0)
+    setCount(0);
   }
 
-  let project_idea = list[count]
+  let project_idea = list[count];
 
   return (
     <Box>
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: ['auto', '800px', '800px']
+            position: "relative",
+            color: "white!important",
+            height: ["auto", "800px", "800px"],
           }}
-          pt={[5, 5, '50px']}
+          pt={[5, 5, "50px"]}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: '0px 0px 21px #E1F1FF',
-                  color: 'white',
+                  textShadow: "0px 0px 21px #E1F1FF",
+                  color: "white",
                   fontSize: [4, 5, 6],
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 1
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: '#406BAB',
+                    backgroundColor: "#406BAB",
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: 'relative',
-                    width: 'fit-content',
-                    height: 'min-content',
-                    cursor: 'pointer',
-                    userSelect: 'none'
+                    position: "relative",
+                    width: "fit-content",
+                    height: "min-content",
+                    cursor: "pointer",
+                    userSelect: "none",
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
+                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: 'absolute',
+                      position: "absolute",
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, '-40px', '-40px'],
-                      transform: 'rotate(-12deg)'
+                      right: [0, "-40px", "-40px"],
+                      transform: "rotate(-12deg)",
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-                  mt: 2
+                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+                  mt: 2,
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: ['none', 'block', 'block']
+            width: "100%",
+            display: ["none", "block", "block"],
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  )
+  );
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 000ff15e8..5d5a9edfa 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import { Slide, Zoom } from 'react-reveal'
-import BreakdownBox from './breakdown-box'
-import Signup from './form'
+import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import { Slide, Zoom } from "react-reveal";
+import BreakdownBox from "./breakdown-box";
+import Signup from "./form";
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: '0px 0px 21px #E1F1FF',
-              color: 'white',
+              textShadow: "0px 0px 21px #E1F1FF",
+              color: "white",
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{' '}
+            friends.{" "}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: 'flex',
-                flexDirection: 'column'
+                display: "flex",
+                flexDirection: "column",
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: 'bold',
-                  color: 'blue',
-                  textShadow: '0px 0px 21px #ffffff'
+                  fontWeight: "bold",
+                  color: "blue",
+                  textShadow: "0px 0px 21px #ffffff",
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: '100',
-            textAlign: 'center',
-            backgroundImage: theme.util.gx('green', 'blue')
+            zIndex: "100",
+            textAlign: "center",
+            backgroundImage: theme.util.gx("green", "blue"),
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  )
+  );
 }
 
-export default Recap
+export default Recap;
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index 3b02839e2..ed158d2fb 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox
-} from 'theme-ui'
-import { Zoom } from 'react-reveal'
+  Checkbox,
+} from "theme-ui";
+import { Zoom } from "react-reveal";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "10px",
+      height: "10px",
+      animation: "spin 2s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    await fetch('/api/winter-rsvp', {
-      method: 'POST',
+    await fetch("/api/winter-rsvp", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked
-      })
-    })
+        Age: e.target.age.checked,
+      }),
+    });
 
-    formRef.current.reset()
-    setSubmitting(false)
+    formRef.current.reset();
+    setSubmitting(false);
 
-    setSubmitted(true)
-  }
+    setSubmitted(true);
+  };
 
   return (
     <Card
       sx={{
-        maxWidth: 'narrowPlus',
-        mx: 'auto',
+        maxWidth: "narrowPlus",
+        mx: "auto",
         mt: [3, 4],
-        background: 'rgb(255,255,255, 0.45)',
-        backdropFilter: 'blur(8px)'
+        background: "rgb(255,255,255, 0.45)",
+        backdropFilter: "blur(8px)",
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
+      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: 'left',
-          alignItems: 'end',
-          input: { bg: 'sunken' }
+          textAlign: "left",
+          alignItems: "end",
+          input: { bg: "sunken" },
         }}
       >
-        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
+        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: "column" }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              'RSVP'
+              "RSVP"
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  )
-}
+  );
+};
 
-export default Rsvp
+export default Rsvp;
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index 30fa27bc1..cfa86fc6d 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
-import { Slide } from 'react-reveal'
-import Icon from '../icon'
+import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
+import { Slide } from "react-reveal";
+import Icon from "../icon";
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: 'row',
-        alignItems: 'center',
-        '&:before': {
+        flexDirection: "row",
+        alignItems: "center",
+        "&:before": {
           content: '""',
-          background: 'snow',
-          height: ['420px', '320px', '320px'],
-          width: '4px',
+          background: "snow",
+          height: ["420px", "320px", "320px"],
+          width: "4px",
           marginLeft: 36,
-          position: 'absolute',
-          zIndex: 0
+          position: "absolute",
+          zIndex: 0,
         },
-        '&:first-of-type:before': {
-          top: [0, null, 'auto'],
+        "&:first-of-type:before": {
+          top: [0, null, "auto"],
           width: [0, null, 0],
-          left: [0, null, 0]
+          left: [0, null, 0],
         },
-        '&:last-of-type:before': {
-          bottom: [0, null, 'auto'],
+        "&:last-of-type:before": {
+          bottom: [0, null, "auto"],
           left: [0, null, 0],
-          width: [0, null, 0]
-        }
+          width: [0, null, 0],
+        },
       }}
     >
       {children}
     </Flex>
-  )
+  );
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: 'red',
+        background: "red",
 
-        color: 'white',
+        color: "white",
         backgroundImage:
-          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
-        borderRadius: '100%',
-        display: 'inline-block',
+          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
+        borderRadius: "100%",
+        display: "inline-block",
         lineHeight: 0,
-        position: 'relative',
-        zIndex: 999
+        position: "relative",
+        zIndex: 999,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            display: "flex",
+            justifyContent: "left",
+            flexDirection: "column",
+            textAlign: "left",
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: 'smoke',
-              color: 'darker',
-              fontWeight: 'normal',
-              textTransform: 'uppercase',
-              width: 'fit-content',
+              bg: "smoke",
+              color: "darker",
+              fontWeight: "normal",
+              textTransform: "uppercase",
+              width: "fit-content",
               fontSize: 18,
-              px: 3
+              px: 3,
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: 'white',
+              color: "white",
               fontSize: [2, 3],
-              maxWidth: [300, null, 550]
+              maxWidth: [300, null, 550],
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  )
+  );
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
+    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{' '}
+            RSVPs are closed. Have a question? Here are the{" "}
             <Link
               target="_blank"
-              sx={{ color: 'inherit' }}
+              sx={{ color: "inherit" }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  )
+  );
 }
diff --git a/lib/dates.js b/lib/dates.js
index 7a0d3a075..8f6a02da3 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,108 +1,109 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString()
+  current = new Date().toISOString(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const future = new Date(previous) - new Date(current)
-  const past = new Date(current) - new Date(previous)
-  const elapsed = [future, past].sort()[1]
+  const future = new Date(previous) - new Date(current);
+  const past = new Date(current) - new Date(previous);
+  const elapsed = [future, past].sort()[1];
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hours` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} months` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} months` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
diff --git a/lib/fetcher.js b/lib/fetcher.js
index b3ccdcb4b..ee0f4363c 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return await res.json()
+  const res = await fetch(...args);
+  return await res.json();
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 7ef7027ec..05c4784a0 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem('mapkit-token'))
+  const token = JSON.parse(localStorage.getItem("mapkit-token"));
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken
+    if (Date.now() < token.refreshBefore) return token.accessToken;
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
+      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
 
     // Get a MapKit server token
-    const res = await fetch('https://maps-api.apple.com/v1/token', {
-      headers: { Authorization: `Bearer ${master}` }
-    })
-    const resJson = await res.json()
+    const res = await fetch("https://maps-api.apple.com/v1/token", {
+      headers: { Authorization: `Bearer ${master}` },
+    });
+    const resJson = await res.json();
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
 
     // Save the token to localStorage
-    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
+    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
 
-    return resJson.accessToken
+    return resJson.accessToken;
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return search(query)
+      console.warn("MapKit token expired, refreshing");
+      return search(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return
+  if (!query || !query.trim()) return;
 
-  const token = await getOrRefreshToken()
+  const token = await getOrRefreshToken();
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` }
-  })
-  const resJson = await res.json()
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const resJson = await res.json();
 
   if (resJson.error) {
-    if (resJson.error.message === 'Not Authorized') {
+    if (resJson.error.message === "Not Authorized") {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem('mapkit-token')
+      localStorage.removeItem("mapkit-token");
 
       // Try again
-      console.warn('MapKit token expired, refreshing')
-      return geocode(query)
+      console.warn("MapKit token expired, refreshing");
+      return geocode(query);
     } else {
-      throw new Error(resJson.error.message)
+      throw new Error(resJson.error.message);
     }
   }
 
-  return resJson
+  return resJson;
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 85262fe10..0af5d70cf 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,189 +1,190 @@
-export const dt = d => new Date(d).toLocaleDateString()
+export const dt = (d) => new Date(d).toLocaleDateString();
 
-const year = new Date().getFullYear()
-export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
+const year = new Date().getFullYear();
+export const tinyDt = (d) =>
+  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city
-  const secondHalf = countryCode === 'US' ? stateCode : country
+  const firstHalf = city;
+  const secondHalf = countryCode === "US" ? stateCode : country;
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
+  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== 'US' && final.length > 16) {
-    return country
+  if (countryCode !== "US" && final.length > 16) {
+    return country;
   } else {
-    return final
+    return final;
   }
-}
+};
 
-const humanizedMonth = date =>
-  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
+const humanizedMonth = (date) =>
+  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
 
 export const humanizedDateRange = (start, end) => {
-  let result = ''
+  let result = "";
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10))
-  const endDate = new Date(end.substr(0, 10))
+  const startDate = new Date(start.substr(0, 10));
+  const endDate = new Date(end.substr(0, 10));
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
     } else {
       result = `${humanizedMonth(
-        startDate
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
+        startDate,
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate
+      startDate,
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate
-    )} ${endDate.getUTCDate()}`
+      endDate,
+    )} ${endDate.getUTCDate()}`;
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`
+    result += `, ${startDate.getUTCFullYear()}`;
   }
-  return result
-}
+  return result;
+};
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date()
+  current = new Date(),
 ) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 24
-  const msPerWeek = msPerDay * 7
-  const msPerMonth = msPerDay * 30 * 2
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerWeek = msPerDay * 7;
+  const msPerMonth = msPerDay * 30 * 2;
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(current) - new Date(previous)
+  const elapsed = new Date(current) - new Date(previous);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek)
-    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
+    const now = Math.round(elapsed / msPerWeek);
+    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth)
-    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
+    const now = Math.round(elapsed / msPerMonth);
+    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
   }
 
   if (absoluteDuration) {
-    return humanizedTime
+    return humanizedTime;
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
   }
-}
+};
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000
-  const msPerHour = msPerMinute * 60
-  const msPerDay = msPerHour * 64 // getting close to a day
-  const msPerYear = msPerDay * 365
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 64; // getting close to a day
+  const msPerYear = msPerDay * 365;
 
-  const elapsed = new Date(time) - new Date(current)
+  const elapsed = new Date(time) - new Date(current);
 
-  let humanizedTime
+  let humanizedTime;
   if (elapsed < msPerMinute) {
-    humanizedTime = '< 1m'
+    humanizedTime = "< 1m";
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute)
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
+    const now = Math.round(elapsed / msPerMinute);
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour)
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`
+    const now = Math.round(elapsed / msPerHour);
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay)
-    humanizedTime = longForm ? `${now} days` : `${now}d`
+    const now = Math.round(elapsed / msPerDay);
+    humanizedTime = longForm ? `${now} days` : `${now}d`;
   } else {
-    const now = Math.round(elapsed / msPerYear)
-    humanizedTime = longForm ? `${now} years` : `${now}y`
+    const now = Math.round(elapsed / msPerYear);
+    humanizedTime = longForm ? `${now} years` : `${now}y`;
   }
 
-  return humanizedTime
-}
+  return humanizedTime;
+};
 
 function formatChunk(type, date) {
   const days = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday'
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const months = [
-    'January',
-    'Febuary',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ]
+    "January",
+    "Febuary",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
   switch (type) {
-    case 'dddd':
-      return days[date.getDay()]
-    case 'ddd':
-      return formatChunk('dddd', date).slice(0, 3)
-    case 'dd':
-      return ('00' + formatChunk('d', date)).slice(-2)
-    case 'd':
-      return date.getDate()
-    case 'mmmm':
-      return months[date.getMonth()]
-    case 'mmm':
-      return formatChunk('mmmm', date).slice(0, 3)
-    case 'mm':
-      return ('00' + formatChunk('m', date)).slice(-2)
-    case 'm':
-      return (date.getMonth() + 1).toString()
-    case 'yyyy':
-      return date.getFullYear().toString()
-    case 'yy':
-      return formatChunk('yyyy', date).slice(-2)
+    case "dddd":
+      return days[date.getDay()];
+    case "ddd":
+      return formatChunk("dddd", date).slice(0, 3);
+    case "dd":
+      return ("00" + formatChunk("d", date)).slice(-2);
+    case "d":
+      return date.getDate();
+    case "mmmm":
+      return months[date.getMonth()];
+    case "mmm":
+      return formatChunk("mmmm", date).slice(0, 3);
+    case "mm":
+      return ("00" + formatChunk("m", date)).slice(-2);
+    case "m":
+      return (date.getMonth() + 1).toString();
+    case "yyyy":
+      return date.getFullYear().toString();
+    case "yy":
+      return formatChunk("yyyy", date).slice(-2);
     default:
-      return null
+      return null;
   }
 }
-export const formatDate = (format, date, divider = ' ') => {
+export const formatDate = (format, date, divider = " ") => {
   return format
     .split(divider)
-    .map(chunk => formatChunk(chunk, new Date(date)))
-    .join(divider)
-}
+    .map((chunk) => formatChunk(chunk, new Date(date)))
+    .join(divider);
+};
 
-export const normalizeGitHubCommitUrl = url => {
+export const normalizeGitHubCommitUrl = (url) => {
   return url
-    .replace('api.', '')
-    .replace('/repos', '')
-    .replace('commits', 'commit')
-}
+    .replace("api.", "")
+    .replace("/repos", "")
+    .replace("commits", "commit");
+};
diff --git a/lib/members.js b/lib/members.js
index ad6420d5e..b5b4abc3a 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253
-export const formatted = count.toLocaleString('en-US')
-export const thousands = Math.round(count / 1000)
+export const count = 27253;
+export const formatted = count.toLocaleString("en-US");
+export const thousands = Math.round(count / 1000);
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 76fdef72c..8bec8ec55 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`
+   </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api'
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const rewrites = [
-    '/hcb',
-    '/team',
-    '/map',
-    '/vip-newsletters',
-    '/conduct',
-    '/sponsorship',
-    '/banner'
-  ]
-  rewrites.map(path => pages.push(path))
+    "/hcb",
+    "/team",
+    "/map",
+    "/vip-newsletters",
+    "/conduct",
+    "/sponsorship",
+    "/banner",
+  ];
+  rewrites.map((path) => pages.push(path));
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join('\n')}
- </urlset>`
+ ${pages.sort().map(addPage).join("\n")}
+ </urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/lib/theme.js b/lib/theme.js
index 392f4dad6..e59f8a577 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from '@hackclub/theme'
-import { merge } from 'lodash'
+import base from "@hackclub/theme";
+import { merge } from "lodash";
 
-const theme = base
+const theme = base;
 
-theme.useColorSchemeMediaQuery = false
+theme.useColorSchemeMediaQuery = false;
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: 'uppercase'
-})
+  textTransform: "uppercase",
+});
 
-theme.layout.copy.maxWidth = [null, null, 'copyPlus']
+theme.layout.copy.maxWidth = [null, null, "copyPlus"];
 
-theme.text.title.fontSize = [5, 6]
+theme.text.title.fontSize = [5, 6];
 
-export default theme
+export default theme;
diff --git a/lib/use-form.js b/lib/use-form.js
index 0840c1528..8e6445cc7 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const useForm = (
-  submitURL = '/',
+  submitURL = "/",
   callback,
-  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
+  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
 ) => {
-  const [status, setStatus] = useState('default')
-  const [data, setData] = useState({ ...options.initData })
-  const [touched, setTouched] = useState({})
+  const [status, setStatus] = useState("default");
+  const [data, setData] = useState({ ...options.initData });
+  const [touched, setTouched] = useState({});
 
   const onFieldChange = (e, name, type) => {
-    e.persist()
-    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
-    setData(data => ({ ...options.initData, ...data, [name]: value }))
-  }
+    e.persist();
+    const value = e.target[type === "checkbox" ? "checked" : "value"];
+    setData((data) => ({ ...options.initData, ...data, [name]: value }));
+  };
 
   useEffect(() => {
-    setTouched(Object.keys(data))
-  }, [data])
+    setTouched(Object.keys(data));
+  }, [data]);
 
-  const useField = (name, type = 'text', ...props) => {
-    const checkbox = type === 'checkbox'
-    const empty = checkbox ? false : ''
-    const onChange = e => onFieldChange(e, name, type)
-    const value = data[name] || options.initData[name]
+  const useField = (name, type = "text", ...props) => {
+    const checkbox = type === "checkbox";
+    const empty = checkbox ? false : "";
+    const onChange = (e) => onFieldChange(e, name, type);
+    const value = data[name] || options.initData[name];
     return {
       name,
-      type: name === 'email' ? 'email' : type,
-      [checkbox ? 'checked' : 'value']: value || empty,
+      type: name === "email" ? "email" : type,
+      [checkbox ? "checked" : "value"]: value || empty,
       onChange,
-      ...props
-    }
-  }
+      ...props,
+    };
+  };
 
-  const { method = 'POST' } = options
-  const action = submitURL
+  const { method = "POST" } = options;
+  const action = submitURL;
 
-  const onSubmit = e => {
-    e.preventDefault()
-    setStatus('submitting')
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setStatus("submitting");
     fetch(action, {
       method,
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
-      .then(async r => {
-        const response = await r.json()
+      .then(async (r) => {
+        const response = await r.json();
         if (r.ok) {
-          setStatus('success')
-          if (callback) callback(r)
-          setTimeout(() => setStatus('default'), 3500)
+          setStatus("success");
+          if (callback) callback(r);
+          setTimeout(() => setStatus("default"), 3500);
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit)
+            setTimeout(() => setData({}), options.clearOnSubmit);
         } else {
-          setStatus('error')
-          console.error(response)
+          setStatus("error");
+          console.error(response);
         }
       })
-      .catch(e => {
-        console.error(e)
-        setStatus('error')
-      })
-  }
+      .catch((e) => {
+        console.error(e);
+        setStatus("error");
+      });
+  };
 
-  const formProps = { onSubmit }
+  const formProps = { onSubmit };
 
-  return { status, data, touched, useField, formProps }
-}
+  return { status, data, touched, useField, formProps };
+};
 
-export default useForm
+export default useForm;
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 45abad1d7..0670d7c49 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from 'react'
+import React from "react";
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false)
+  const [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
-    setHasMounted(true)
-  }, [])
-  return hasMounted
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
 }
 
-export default useHasMounted
+export default useHasMounted;
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 2fb158815..80eb69020 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
+};
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersMotion;
 }
 
-export default usePrefersMotion
+export default usePrefersMotion;
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 1e763e50a..48956c519 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from 'react'
+import React from "react";
 
-const QUERY = '(prefers-reduced-motion: no-preference)'
-const isRenderingOnServer = typeof window === 'undefined'
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
-}
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState)
+    React.useState(getInitialState);
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY)
-    const listener = event => {
-      setPrefersReducedMotion(!event.matches)
-    }
-    mediaQueryList.addListener(listener)
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addListener(listener);
     return () => {
-      mediaQueryList.removeListener(listener)
-    }
-  }, [])
-  return prefersReducedMotion
+      mediaQueryList.removeListener(listener);
+    };
+  }, []);
+  return prefersReducedMotion;
 }
 
-export default usePrefersReducedMotion
+export default usePrefersReducedMotion;
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 8da57106f..4c5135467 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,33 +1,34 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from 'react'
+import React from "react";
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null)
-  const savedCallback = React.useRef(callback)
+  const timeoutId = React.useRef(null);
+  const savedCallback = React.useRef(callback);
   React.useEffect(() => {
-    savedCallback.current = callback
-  })
+    savedCallback.current = callback;
+  });
   React.useEffect(() => {
-    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
+    let isEnabled =
+      typeof minDelay === "number" && typeof maxDelay === "number";
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay)
+        const nextTickAt = random(minDelay, maxDelay);
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current()
-          handleTick()
-        }, nextTickAt)
-      }
-      handleTick()
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+      handleTick();
     }
-    return () => window.clearTimeout(timeoutId.current)
-  }, [minDelay, maxDelay])
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current)
-  }, [])
-  return cancel
-}
+    window.clearTimeout(timeoutId.current);
+  }, []);
+  return cancel;
+};
 
-export default useRandomInterval
+export default useRandomInterval;
diff --git a/middleware.js b/middleware.js
index 094651bfd..b065dc282 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from 'next/server'
-import country from 'country-list-js'
-const partners = ['gb_help_desk']
+import { NextResponse } from "next/server";
+import country from "country-list-js";
+const partners = ["gb_help_desk"];
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/slack')) {
-    let continent = country.findByIso2(request.geo.country || 'AU').continent
-    if (continent === 'Oceania') {
-      continent = 'Australia'
+  if (request.nextUrl.pathname.startsWith("/slack")) {
+    let continent = country.findByIso2(request.geo.country || "AU").continent;
+    if (continent === "Oceania") {
+      continent = "Australia";
     }
-    const response = NextResponse.next()
-    response.cookies.set('continent', continent || '')
-    return response
+    const response = NextResponse.next();
+    response.cookies.set("continent", continent || "");
+    return response;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index f8c8ef1ef..5fa0239d6 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true
+    ignoreDuringBuilds: true,
   },
   trailingSlash: true,
-  pageExtensions: ['js', 'jsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "mdx"],
   images: {
     domains: [
-      'hackclub.com',
-      'dl.airtable.com',
-      'emoji.slack-edge.com',
-      'cdn.glitch.com',
-      'scrapbook.hackclub.com',
-      'assets.hackclub.com',
-      'v5.airtableusercontent.com',
-      ''
+      "hackclub.com",
+      "dl.airtable.com",
+      "emoji.slack-edge.com",
+      "cdn.glitch.com",
+      "scrapbook.hackclub.com",
+      "assets.hackclub.com",
+      "v5.airtableusercontent.com",
+      "",
     ],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cloud-*-hack-club-bot.vercel.app'
-      }
-    ]
+        protocol: "https",
+        hostname: "cloud-*-hack-club-bot.vercel.app",
+      },
+    ],
   },
   webpack: (config, { isServer }) => {
-    return config
+    return config;
   },
   async redirects() {
     return [
       {
-        source: '/bank/:path*',
-        destination: '/hcb/:path*',
-        permanent: true
+        source: "/bank/:path*",
+        destination: "/hcb/:path*",
+        permanent: true,
       },
-      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
+      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
       {
-        source: '/sprig/',
-        destination: 'https://sprig.hackclub.com',
-        permanent: true
+        source: "/sprig/",
+        destination: "https://sprig.hackclub.com",
+        permanent: true,
       },
-      { source: '/start/', destination: '/', permanent: false },
-      { source: '/repl/', destination: '/', permanent: true },
-      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
+      { source: "/start/", destination: "/", permanent: false },
+      { source: "/repl/", destination: "/", permanent: true },
+      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
       {
-        source: '/cloud9_setup/',
-        destination: '/deprecated/cloud9/',
-        permanent: true
+        source: "/cloud9_setup/",
+        destination: "/deprecated/cloud9/",
+        permanent: true,
       },
       {
-        source: '/redeem_tech_domain/',
-        destination: '/deprecated/tech_domains/',
-        permanent: true
+        source: "/redeem_tech_domain/",
+        destination: "/deprecated/tech_domains/",
+        permanent: true,
       },
       {
-        source: '/challenge/',
-        destination: '/deprecated/challenge/',
-        permanent: true
+        source: "/challenge/",
+        destination: "/deprecated/challenge/",
+        permanent: true,
       },
-      { source: '/slack_invite/', destination: '/slack/', permanent: true },
+      { source: "/slack_invite/", destination: "/slack/", permanent: true },
       {
-        source: '/jobs/bank-tech-lead/',
-        destination: '/jobs/lead-hacker/',
-        permanent: true
+        source: "/jobs/bank-tech-lead/",
+        destination: "/jobs/lead-hacker/",
+        permanent: true,
       },
       {
-        source: '/first/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/first/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/frc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/frc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/ftc/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/ftc/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/bank/fll/',
-        destination: '/bank/first/',
-        permanent: false
+        source: "/bank/fll/",
+        destination: "/bank/first/",
+        permanent: false,
       },
       {
-        source: '/wom/',
-        destination: '/winter/',
-        permanent: false
+        source: "/wom/",
+        destination: "/winter/",
+        permanent: false,
       },
-      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
-      { source: '/community/', destination: '/slack/', permanent: true },
-      { source: '/hack_camp/', destination: '/camp/', permanent: true },
-      { source: '/branding/', destination: '/brand/', permanent: true },
-      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
-      { source: '/sal', destination: '/amas/sal/', permanent: false },
-      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
+      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
+      { source: "/community/", destination: "/slack/", permanent: true },
+      { source: "/hack_camp/", destination: "/camp/", permanent: true },
+      { source: "/branding/", destination: "/brand/", permanent: true },
+      { source: "/ama/", destination: "/amas/", permanent: false },
+      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
+      { source: "/sal", destination: "/amas/sal/", permanent: false },
+      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
       {
-        source: '/open-source/',
-        destination: '/opensource/',
-        permanent: false
+        source: "/open-source/",
+        destination: "/opensource/",
+        permanent: false,
       },
-      { source: '/coc/', destination: '/conduct/', permanent: true },
+      { source: "/coc/", destination: "/conduct/", permanent: true },
       {
-        source: '/code_of_conduct/',
-        destination: '/conduct/',
-        permanent: true
+        source: "/code_of_conduct/",
+        destination: "/conduct/",
+        permanent: true,
       },
       {
-        source: '/finder/',
-        destination: 'https://finder.hackclub.com',
-        permanent: true
+        source: "/finder/",
+        destination: "https://finder.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/camp/',
-        destination: 'https://camp.hackclub.com',
-        permanent: true
+        source: "/camp/",
+        destination: "https://camp.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/apply/',
-        destination: 'https://apply.hackclub.com',
-        permanent: true
+        source: "/apply/",
+        destination: "https://apply.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/icons/',
-        destination: 'https://icons.hackclub.com',
-        permanent: true
+        source: "/icons/",
+        destination: "https://icons.hackclub.com",
+        permanent: true,
       },
       {
-        source: '/updates/',
+        source: "/updates/",
         destination:
-          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
-        permanent: false
+          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
+        permanent: false,
       },
       {
-        source: '/admin/',
+        source: "/admin/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
+        permanent: false,
       },
       {
-        source: '/checkup/',
+        source: "/checkup/",
         destination:
-          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
-        permanent: false
+          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
+        permanent: false,
       },
       {
-        source: '/workshops/',
-        destination: 'https://workshops.hackclub.com/',
-        permanent: false
+        source: "/workshops/",
+        destination: "https://workshops.hackclub.com/",
+        permanent: false,
       },
       {
-        source: '/workshops/([a-z_]+)/',
-        destination: 'https://workshops.hackclub.com/$1/',
-        permanent: true
+        source: "/workshops/([a-z_]+)/",
+        destination: "https://workshops.hackclub.com/$1/",
+        permanent: true,
       },
       {
-        source: '/jobs/creative-director/',
-        destination: '/jobs/brand-director/',
-        permanent: false
+        source: "/jobs/creative-director/",
+        destination: "/jobs/brand-director/",
+        permanent: false,
       },
       {
-        source: '/jobs/bank-ops-assistant/',
-        destination: '/jobs/bank-ops-associate/',
-        permanent: false
+        source: "/jobs/bank-ops-assistant/",
+        destination: "/jobs/bank-ops-associate/",
+        permanent: false,
       },
       {
-        source: '/jobs/vp-DonorEngagement/',
-        destination: '/jobs/vp-donor-engagement/',
-        permanent: false
+        source: "/jobs/vp-DonorEngagement/",
+        destination: "/jobs/vp-donor-engagement/",
+        permanent: false,
       },
       {
-        source: '/daysofservice/',
-        destination: 'https://daysofservice.hackclub.com',
-        permanent: true
-      }
-    ]
+        source: "/daysofservice/",
+        destination: "https://daysofservice.hackclub.com",
+        permanent: true,
+      },
+    ];
   },
   async rewrites() {
     return [
       {
-        source: '/v3/_next/:path*',
-        destination: '/_next/:path*'
+        source: "/v3/_next/:path*",
+        destination: "/_next/:path*",
       },
       {
-        source: '/workshops/_next/:path*',
-        destination: 'https://workshops.hackclub.com/_next/:path*'
+        source: "/workshops/_next/:path*",
+        destination: "https://workshops.hackclub.com/_next/:path*",
       },
       {
-        source: '/summer/_next/:path*',
-        destination: 'https://summer.hackclub.com/_next/:path*'
+        source: "/summer/_next/:path*",
+        destination: "https://summer.hackclub.com/_next/:path*",
       },
       {
-        source: '/sponsorship/',
-        destination: '/content/sponsorship/'
+        source: "/sponsorship/",
+        destination: "/content/sponsorship/",
       },
       {
-        source: '/covid19/',
-        destination: '/content/covid19/'
+        source: "/covid19/",
+        destination: "/content/covid19/",
       },
       {
-        source: '/it-admins/',
-        destination: '/content/it-admins/'
+        source: "/it-admins/",
+        destination: "/content/it-admins/",
       },
       {
-        source: '/sunsetting-som/',
-        destination: '/content/sunsetting-som/'
+        source: "/sunsetting-som/",
+        destination: "/content/sunsetting-som/",
       },
       {
-        source: '/banner/',
-        destination: 'https://workshops.hackclub.com/banner/'
+        source: "/banner/",
+        destination: "https://workshops.hackclub.com/banner/",
       },
       {
-        source: '/conduct/',
-        destination: 'https://workshops.hackclub.com/conduct/'
+        source: "/conduct/",
+        destination: "https://workshops.hackclub.com/conduct/",
       },
       {
-        source: '/workshop-bounty/',
-        destination: 'https://workshops.hackclub.com/workshop-bounty/'
+        source: "/workshop-bounty/",
+        destination: "https://workshops.hackclub.com/workshop-bounty/",
       },
       {
-        source: '/vip-newsletters/',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/'
+        source: "/vip-newsletters/",
+        destination: "https://workshops.hackclub.com/vip-newsletters/",
       },
       {
-        source: '/vip-newsletters/(.*)',
-        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
+        source: "/vip-newsletters/(.*)",
+        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
       },
       {
-        source: '/newsletter/',
-        destination: 'https://workshops.hackclub.com/newsletter/'
+        source: "/newsletter/",
+        destination: "https://workshops.hackclub.com/newsletter/",
       },
       {
-        source: '/newsletter/(.*)',
-        destination: 'https://workshops.hackclub.com/newsletter/$1'
+        source: "/newsletter/(.*)",
+        destination: "https://workshops.hackclub.com/newsletter/$1",
       },
       {
-        source: '/transparency/may-2020/',
-        destination: '/content/transparency/may-2020/'
+        source: "/transparency/may-2020/",
+        destination: "/content/transparency/may-2020/",
       },
       {
-        source: '/map/',
-        destination: 'https://map.hackclub.dev/'
+        source: "/map/",
+        destination: "https://map.hackclub.dev/",
       },
       {
-        source: '/map/(.*)',
-        destination: 'https://map.hackclub.dev/$1'
+        source: "/map/(.*)",
+        destination: "https://map.hackclub.dev/$1",
       },
       {
-        source: '/how-to-organize-a-hackathon',
-        destination: 'https://expandables.hackclub.dev/organizing.html'
+        source: "/how-to-organize-a-hackathon",
+        destination: "https://expandables.hackclub.dev/organizing.html",
       },
       {
-        source: '/how-to-organize-a-hackathon/style.css',
-        destination: 'https://expandables.hackclub.dev/style.css'
-      }
-    ]
+        source: "/how-to-organize-a-hackathon/style.css",
+        destination: "https://expandables.hackclub.dev/style.css",
+      },
+    ];
   },
   async headers() {
     return [
       {
-        source: '/banners/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/banners/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/fonts/(.*)',
-        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
+        source: "/fonts/(.*)",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
       },
       {
-        source: '/api/(.+)',
+        source: "/api/(.+)",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET, POST, OPTIONS'
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
           },
-          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
-        ]
-      }
-    ]
-  }
-}
+          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
+        ],
+      },
+    ];
+  },
+};
 
-import million from 'million/compiler'
-import withMDX from '@next/mdx'
-import withTM from 'next-transpile-modules'
+import million from "million/compiler";
+import withMDX from "@next/mdx";
+import withTM from "next-transpile-modules";
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
-const withAnimeJS = withTM(['animejs'])
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
+const withAnimeJS = withTM(["animejs"]);
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true
-})
+  auto: true,
+});
diff --git a/pages/404.js b/pages/404.js
index 76bb77707..3c5beb44d 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import { keyframes } from '@emotion/react'
-import { Heading, Container, Button, Text, Image } from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import theme from '../lib/theme'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+import { Heading, Container, Button, Text, Image } from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import theme from "../lib/theme";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`
+`;
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`
+`;
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: '${props => props.children}';
+    content: "${(props) => props.children}";
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`
+`;
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`
+`;
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
+        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: 'block' }}
+        sx={{ display: "block" }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/pages/_app.js b/pages/_app.js
index 366fa6b54..df22f2f22 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 
-import Analytics from '../components/analytics.js'
+import Analytics from "../components/analytics.js";
 
-import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
-import theme from '../lib/theme'
-import { ThemeProvider } from 'theme-ui'
-import { Provider as BalancerProvider } from 'react-wrap-balancer'
+import Meta from "@hackclub/meta";
+import "@hackclub/theme/fonts/reg-bold.css";
+import theme from "../lib/theme";
+import { ThemeProvider } from "theme-ui";
+import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
index 0004750b1..8f3797ea3 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  '@context': 'http://schema.org',
-  '@type': 'Organization',
-  name: 'Hack Club',
-  url: 'https://hackclub.com/',
-  logo: 'https://hackclub.com/social.png',
+  "@context": "http://schema.org",
+  "@type": "Organization",
+  name: "Hack Club",
+  url: "https://hackclub.com/",
+  logo: "https://hackclub.com/social.png",
   sameAs: [
-    'https://twitter.com/hackclub',
-    'https://github.com/hackclub',
-    'https://www.instagram.com/starthackclub',
-    'https://www.facebook.com/Hack-Club-741805665870458',
-    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
+    "https://twitter.com/hackclub",
+    "https://github.com/hackclub",
+    "https://www.instagram.com/starthackclub",
+    "https://www.facebook.com/Hack-Club-741805665870458",
+    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
   ],
   contactPoint: [
     {
-      '@type': 'ContactPoint',
-      email: 'team@hackclub.com',
-      contactType: 'customer support',
-      url: 'https://hackclub.com/'
-    }
-  ]
-}
+      "@type": "ContactPoint",
+      email: "team@hackclub.com",
+      contactType: "customer support",
+      url: "https://hackclub.com/",
+    },
+  ],
+};
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index bfc103d35..5ff0170f9 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Geohot() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#00FF15', '#00FF15'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#00FF15", "#00FF15"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#00FF15', '#00FF15'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#00FF15", "#00FF15"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#0f0f0f',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#0f0f0f",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-11-11T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-11-11T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#00FF15', '#00FF15'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#00FF15", "#00FF15"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#00FF15 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#00FF15 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#00FF15', '#00FF15'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#00FF15", "#00FF15"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: '#00FF15',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#00FF15",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: '#f9fafc',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#f9fafc",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw'],
-            zIndex: '-30'
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
+            zIndex: "-30",
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: 'absolute',
-            bottom: '5vw',
-            left: ['10vw', '20vw'],
-            zIndex: '-2000'
+            position: "absolute",
+            bottom: "5vw",
+            left: ["10vw", "20vw"],
+            zIndex: "-2000",
           }}
         />
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index b670700f9..2c60c939a 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import BGImg from '../../components/background-image'
-import NextLink from 'next/link'
-import Image from 'next/image'
-import Nav from '../../components/nav'
-import SlideDown from '../../components/slide-down'
-import Footer from '../../components/footer'
-import { dt } from '../../lib/dates'
-import Sal from '../../public/ama/sal.png'
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import BGImg from "../../components/background-image";
+import NextLink from "next/link";
+import Image from "next/image";
+import Nav from "../../components/nav";
+import SlideDown from "../../components/slide-down";
+import Footer from "../../components/footer";
+import { dt } from "../../lib/dates";
+import Sal from "../../public/ama/sal.png";
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
+        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{' '}
+          are streamed live publicly on{" "}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
+      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,15 +92,17 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: 'wrap',
-              placeContent: 'center'
+              flexWrap: "wrap",
+              placeContent: "center",
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return new Date(y.start).getTime() - new Date(x.start).getTime()
+                return (
+                  new Date(y.start).getTime() - new Date(x.start).getTime()
+                );
               })
-              .map(event => (
+              .map((event) => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -110,8 +112,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: 'circle'
-                    }
+                      borderRadius: "circle",
+                    },
                   }}
                   key={event.id}
                 >
@@ -122,7 +124,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace('AMA with ', '')}
+                    {event.title.replace("AMA with ", "")}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -137,12 +139,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
+        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
+    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -150,22 +152,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: 'left' }}
+        sx={{ pt: 4, textAlign: "left" }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime()
+            return new Date(y.start).getTime() - new Date(x.start).getTime();
           })
-          .map(event => (
+          .map((event) => (
             <Card
-              as={event.youtube ? 'a' : 'section'}
+              as={event.youtube ? "a" : "section"}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
+                display: "flex",
+                alignItems: "center",
                 p: [0, 0],
-                img: { borderRadius: 'extra' }
+                img: { borderRadius: "extra" },
               }}
               key={event.id}
             >
@@ -177,7 +179,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace('AMA with ', '')}
+                  {event.title.replace("AMA with ", "")}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -194,22 +196,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = async () => {
-  const { filter } = require('lodash')
-  let upcoming = []
-  let past = []
-  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
-  const today = d(new Date())
-  await fetch('https://events.hackclub.com/api/amas')
-    .then(r => r.json())
-    .then(events => {
-      upcoming = filter(events, e => d(e.start) >= today)
-      past = filter(events, e => d(e.start) < today)
+  const { filter } = require("lodash");
+  let upcoming = [];
+  let past = [];
+  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
+  const today = d(new Date());
+  await fetch("https://events.hackclub.com/api/amas")
+    .then((r) => r.json())
+    .then((events) => {
+      upcoming = filter(events, (e) => d(e.start) >= today);
+      past = filter(events, (e) => d(e.start) < today);
     })
-    .catch(e => console.error(e, 'Failed to fetch AMAs'))
-  return { props: { upcoming, past }, revalidate: 10 }
-}
+    .catch((e) => console.error(e, "Failed to fetch AMAs"));
+  return { props: { upcoming, past }, revalidate: 10 };
+};
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index 699a31c38..b5171469b 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import { thousands } from "../../lib/members";
 
 export default function Sal() {
-  let minutes = 1
-  let milliseconds = minutes * 60000
+  let minutes = 1;
+  let milliseconds = minutes * 60000;
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     setTimeout(function () {
-      window.location.reload()
-    }, milliseconds)
+      window.location.reload();
+    }, milliseconds);
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#ffffff', '#ffffff'),
-          position: 'relative',
-          width: '100%',
-          height: ['125%', '125%', '150%'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#ffffff", "#ffffff"),
+          position: "relative",
+          width: "100%",
+          height: ["125%", "125%", "150%"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#14BF96', '#14BF96'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#14BF96", "#14BF96"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
+          minHeight: "100vh",
+          width: "100vw",
           backgroundImage:
-            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: ['flex-start', 'flex-start', 'center']
+            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "center"],
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
+              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
             }
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid #14BF96',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid #14BF96",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-10-28T23:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-10-28T23:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#14BF96', '#14BF96'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#14BF96", "#14BF96"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#FFFFFF 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#FFFFFF 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#ffffff', '#ffffff'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#ffffff", "#ffffff"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: '#14BF96',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#14BF96",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: '#ffffff',
-              width: ['70vw', '60vw', '60vw'],
-              py: ['20px', '100px', '120px'],
-              zIndex: '2',
-              fontSize: ['12px', 1, 2],
-              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
-                fontSize: '15px'
-              }
+              color: "#ffffff",
+              width: ["70vw", "60vw", "60vw"],
+              py: ["20px", "100px", "120px"],
+              zIndex: "2",
+              fontSize: ["12px", 1, 2],
+              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
+                fontSize: "15px",
+              },
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{' '}
+              <strong>Teenager? New here? Welcome!</strong>{" "}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{' '}
+              </Link>{" "}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            width: ['100vw', '80vw', '70vw', '60vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            width: ["100vw", "80vw", "70vw", "60vw"],
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: 'absolute', bottom: 0 }}
+                sx={{ position: "absolute", bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index a69dc03b3..22f639f2a 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import React, { useEffect, useState } from 'react'
-import tt from 'tinytime'
-import Particle from '../../components/particles'
-import { thousands } from '../../lib/members'
+import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import React, { useEffect, useState } from "react";
+import tt from "tinytime";
+import Particle from "../../components/particles";
+import { thousands } from "../../lib/members";
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
 
-    let timeLeft = {}
+    let timeLeft = {};
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60)
-      }
+        sec: Math.floor((difference / 1000) % 60),
+      };
     }
 
-    return timeLeft
-  }
+    return timeLeft;
+  };
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft())
-    }, 1000)
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
 
-    return () => clearTimeout(timer)
-  })
+    return () => clearTimeout(timer);
+  });
 
-  const timer = []
+  const timer = [];
 
-  Object.keys(timeLeft).forEach(e => {
+  Object.keys(timeLeft).forEach((e) => {
     if (!timeLeft[e]) {
-      if (e === 'days') {
-        return
-      } else if (e === 'hours') {
-        if (!timeLeft['days']) {
-          return
+      if (e === "days") {
+        return;
+      } else if (e === "hours") {
+        if (!timeLeft["days"]) {
+          return;
         }
-      } else if (e === 'min') {
-        if (!timeLeft['days'] && !timeLeft['hours']) {
-          return
+      } else if (e === "min") {
+        if (!timeLeft["days"] && !timeLeft["hours"]) {
+          return;
         }
       } else {
-        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
-          return
+        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
+          return;
         }
       }
     }
 
-    var name = ''
+    var name = "";
 
-    if (e === 'days') {
+    if (e === "days") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'day'
+        name = "day";
       } else {
-        name = 'days'
+        name = "days";
       }
-    } else if (e === 'hours') {
+    } else if (e === "hours") {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = 'hour'
+        name = "hour";
       } else {
-        name = 'hours'
+        name = "hours";
       }
-    } else if (e === 'min') {
-      name = 'min'
+    } else if (e === "min") {
+      name = "min";
     } else {
-      name = 'sec'
+      name = "sec";
     }
 
     timer.push(
       <Box
-        sx={theme => ({
-          color: 'primary',
-          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-          position: 'relative',
-          width: ['16vw', '15vw', '15vw'],
-          height: ['15vh', '20vh', '35vh'],
-          borderRadius: '5px',
-          border: ['none', '1.5px solid'],
-          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+        sx={(theme) => ({
+          color: "primary",
+          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+          position: "relative",
+          width: ["16vw", "15vw", "15vw"],
+          height: ["15vh", "20vh", "35vh"],
+          borderRadius: "5px",
+          border: ["none", "1.5px solid"],
+          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
           fontSize: [4, 5, 7],
-          fontWeight: 'bold',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          textAlign: 'center'
+          fontWeight: "bold",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          textAlign: "center",
         })}
       >
         <Box>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9')
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
             })}
           >
-            {timeLeft[e]}{' '}
+            {timeLeft[e]}{" "}
           </Text>
           <Text
-            sx={theme => ({
-              color: 'primary',
-              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-              position: 'relative',
+            sx={(theme) => ({
+              color: "primary",
+              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              position: "relative",
               fontSize: [1, 3, 4],
-              fontWeight: 'bold',
-              display: 'block',
-              pb: '15px'
+              fontWeight: "bold",
+              display: "block",
+              pb: "15px",
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>
-    )
-  })
+      </Box>,
+    );
+  });
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: '100vh',
-          width: '100vw',
-          bg: '#222222',
-          position: 'relative',
-          zIndex: '0',
-          overflow: 'hidden'
+          minHeight: "100vh",
+          width: "100vw",
+          bg: "#222222",
+          position: "relative",
+          zIndex: "0",
+          overflow: "hidden",
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: 'absolute',
-              top: '0',
-              left: ['10vw', '5vw']
+              position: "absolute",
+              top: "0",
+              left: ["10vw", "5vw"],
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
+          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                 mt: [3, 4],
-                px: '10px',
-                py: '5px',
-                borderRadius: '5px',
-                border: '1px solid',
+                px: "10px",
+                py: "5px",
+                borderRadius: "5px",
+                border: "1px solid",
                 fontSize: [1, 2],
-                display: 'block',
-                fontWeight: 'bold'
+                display: "block",
+                fontWeight: "bold",
               })}
             >
-              {tt('{MM} {Do} {h}:{mm} {a}').render(
-                new Date(`2022-02-04T01:00:00.000Z`)
+              {tt("{MM} {Do} {h}:{mm} {a}").render(
+                new Date(`2022-02-04T01:00:00.000Z`),
               )}
             </Text>
             <Text
-              sx={theme => ({
-                color: 'primary',
-                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
-                display: 'block'
+              sx={(theme) => ({
+                color: "primary",
+                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                display: "block",
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
-            height: '80%',
-            width: '90%',
-            bg: 'transparent',
-            position: 'relative',
-            left: '5%',
-            top: '10%'
+            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
+            height: "80%",
+            width: "90%",
+            bg: "transparent",
+            position: "relative",
+            left: "5%",
+            top: "10%",
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ['none', 'block'], pb: '50px' }}
+            sx={{ display: ["none", "block"], pb: "50px" }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
+            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr',
-                '1fr 1fr 1fr 1fr 1fr'
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr",
+                "1fr 1fr 1fr 1fr 1fr",
               ]}
               sx={{
-                width: ['100%', '100%']
+                width: ["100%", "100%"],
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ['none', '#CDAEFB 1.6px solid'],
-                my: ['30px', 0],
-                px: ['0px', '40px', '40px'],
-                py: ['0px', '40px', '40px'],
-                width: ['100%', '70%'],
-                borderRadius: '10px'
+                border: ["none", "#CDAEFB 1.6px solid"],
+                my: ["30px", 0],
+                px: ["0px", "40px", "40px"],
+                py: ["0px", "40px", "40px"],
+                width: ["100%", "70%"],
+                borderRadius: "10px",
               }}
             >
               <Text
-                sx={theme => ({
-                  color: 'primary',
-                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                sx={(theme) => ({
+                  color: "primary",
+                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
                   fontSize: [3, 4, 5],
-                  fontWeight: 'bold'
+                  fontWeight: "bold",
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: '#CDAEFB',
-                    margin: ['10px', '15px'],
-                    marginLeft: '0',
-                    color: '#222222',
-                    display: 'inline-block'
+                    background: "#CDAEFB",
+                    margin: ["10px", "15px"],
+                    marginLeft: "0",
+                    color: "#222222",
+                    display: "inline-block",
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['25vw', '50vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['12px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["25vw", "50vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["12px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: '#82A9F9',
-                width: ['80vw', '50vw'],
-                pt: ['10px', '50px'],
-                zIndex: '2',
-                fontSize: ['15px', 1, 2],
-                '@media screen and (min-width: 768px) and (max-width: 1200px)':
+                color: "#82A9F9",
+                width: ["80vw", "50vw"],
+                pt: ["10px", "50px"],
+                zIndex: "2",
+                fontSize: ["15px", 1, 2],
+                "@media screen and (min-width: 768px) and (max-width: 1200px)":
                   {
-                    fontSize: '15px'
-                  }
+                    fontSize: "15px",
+                  },
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{' '}
+                <strong>Teenager? New here? Welcome!</strong>{" "}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{' '}
+                </Link>{" "}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
-            bottom: '0',
-            right: '0',
-            marginRight: ['-100px', '-50px', '-50px'],
-            width: ['100vw', '70vw', '40vw']
+            position: "absolute",
+            bottom: "0",
+            right: "0",
+            marginRight: ["-100px", "-50px", "-50px"],
+            width: ["100vw", "70vw", "40vw"],
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ['block', 'none'] }}
+                sx={{ display: ["block", "none"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ['none', 'block'] }}
+                sx={{ display: ["none", "block"] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  )
+  );
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2fc68a235..2ab771ee7 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
   )
-    .then(r => r.json())
-    .catch(err => res.status(400).send(err))
+    .then((r) => r.json())
+    .catch((err) => res.status(400).send(err));
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
-  res.redirect(file)
+    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
+  res.redirect(file);
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index c04e7758a..980e66895 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
-      }
-    }
-  )
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
+      },
+    },
+  );
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text())
-    return res.status(503).end()
+    console.warn(await channelDataReq.text());
+    return res.status(503).end();
   }
 
-  const channelData = await channelDataReq.json()
+  const channelData = await channelDataReq.json();
   if (!channelData.ok) {
-    console.warn(channelData)
-    return res.status(400).end()
+    console.warn(channelData);
+    return res.status(400).end();
   }
 
-  res.status(200).send({ name: channelData.channel.name })
+  res.status(200).send({ name: channelData.channel.name });
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index f5da5c351..d9c767b45 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from '@octokit/graphql'
-import { createAppAuth } from '@octokit/auth-app'
+import { graphql } from "@octokit/graphql";
+import { createAppAuth } from "@octokit/auth-app";
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID
-})
+  installationId: process.env.GITHUB_INSTALLATION_ID,
+});
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: 'hackclub',
+      login: "hackclub",
       request: {
-        hook: auth.hook
-      }
-    }
-  )
-  res.status(200).json(organization)
+        hook: auth.hook,
+      },
+    },
+  );
+  res.status(200).json(organization);
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 9c15fbb06..2d4e0f4d9 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from 'axios'
+import axios from "axios";
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber
+        req.query.teamNumber,
       )}`,
       {
         headers: {
-          'X-TBA-Auth-Key': process.env.TBA_API_KEY
-        }
-      }
-    )
+          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
+        },
+      },
+    );
 
-    res.json(data)
+    res.json(data);
   } catch (e) {
-    res.status(404).json({ ok: false })
+    res.status(404).json({ ok: false });
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 76f68f641..7c8c9ac5c 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
-  ).then(res => res.json())
+    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
+  ).then((res) => res.json());
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4)
+    .slice(-4);
 
-  return games
+  return games;
 }
 
 export default async function Games(req, res) {
-  const games = await getGames()
-  res.json(games)
+  const games = await getGames();
+  res.json(games);
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 978b713b6..3d04de8df 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+import { normalizeGitHubCommitUrl } from "../../lib/helpers";
 
-const isRelevantEventType = type =>
-  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
+const isRelevantEventType = (type) =>
+  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
-      return payload.commits?.[0]?.message || 'No commit message'
-    case 'PullRequestEvent':
-      return payload.pull_request.title
-    case 'WatchEvent':
-      return `starred ${repo.name}`
+    case "PushEvent":
+      return payload.commits?.[0]?.message || "No commit message";
+    case "PullRequestEvent":
+      return payload.pull_request.title;
+    case "WatchEvent":
+      return `starred ${repo.name}`;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case 'PushEvent':
+    case "PushEvent":
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : 'https://github.com/hackclub'
-    case 'PullRequestEvent':
-      return payload.pull_request.html_url
-    case 'WatchEvent':
-      return `https://github.com/${repo.name}`
+        : "https://github.com/hackclub";
+    case "PullRequestEvent":
+      return payload.pull_request.html_url;
+    case "WatchEvent":
+      return `https://github.com/${repo.name}`;
     default:
-      return `https://github.com/hackclub`
+      return `https://github.com/hackclub`;
   }
-}
+};
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    'https://api.github.com/orgs/hackclub/events'
-  ).then(r => r.json())
+    "https://api.github.com/orgs/hackclub/events",
+  ).then((r) => r.json());
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at
-    }))
+      time: created_at,
+    }));
 
-  return gitHubData
+  return gitHubData;
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res)
-  res.json(git)
+  const git = await fetchGitHub(req, res);
+  res.json(git);
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index a19a27fcd..150a79c56 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName
+        name: data.eventName,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
+          "First Name": data.firstName,
+          "Last Name": data.lastName,
+          "Email Address": data.userEmail,
+          "Phone Number": data.userPhone,
+          "Date of Birth": data.userBirthday,
+          "Event Name": data.eventName,
+          "Event Website": data.eventWebsite,
+          "Tell us about your event": data.eventDescription,
+          "Mailing Address": data.userAddress,
+          "Address Line 1": data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          'Zip Code': data.addressZip,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
+          "Zip Code": data.addressZip,
+          "Address Country": data.addressCountry,
+          "Address Country Code": data.addressCountryCode,
+          "Event Location": data.eventLocation,
+          "Event Country Code": data.eventCountryCode,
+          "Have you used HCB for any previous events?":
+            data.returningUser === "true"
+              ? "Yes, I have used HCB before"
+              : "No, first time!",
+          "How did you hear about HCB?": data.referredBy,
           Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+          "Contact Option": data.contactOption,
+          "Slack Username": data.slackUsername,
+          Accommodations: data.accommodations,
+        });
+        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
       })
-      .catch(error => {
-        console.error(error)
+      .catch((error) => {
+        console.error(error);
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
+          Location: `/hcb/apply?step=3&airtable-error=${error}`,
+        });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index f7b806bdd..aa0cf1b3a 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const applicationsTable = new AirtablePlus({
-  baseID: 'apppALh5FEOKkhjLR',
+  baseID: "apppALh5FEOKkhjLR",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'Events'
-})
+  tableName: "Events",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const data = JSON.parse(req.body);
 
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory
+        category: data.eventCategory,
       }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
-      }
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
+      },
     })
-      .then(r => r.json())
-      .then(async r => {
+      .then((r) => r.json())
+      .then(async (r) => {
         await applicationsTable.create({
-          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: 'Demo Account',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
-        })
+          "Email Address": data.userEmail,
+          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: "Demo Account",
+          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
+        });
         res
           .status(200)
-          .json({ message: 'Success! Check your email for next steps.' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
+          .json({ message: "Success! Check your email for next steps." });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 827f42cbc..32e778e83 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'appaqcJtn33vb59Au',
-  tableName: 'Join Requests'
-})
+  baseID: "appaqcJtn33vb59Au",
+  tableName: "Join Requests",
+});
 
-async function postData(url = '', data = {}, headers = {}) {
+async function postData(url = "", data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: 'POST',
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
+    method: "POST",
+    mode: "cors",
+    cache: "no-cache",
+    credentials: "same-origin",
     headers: {
-      'Content-Type': 'application/json',
-      ...headers
+      "Content-Type": "application/json",
+      ...headers,
     },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    body: JSON.stringify(data)
-  })
-  return response.text()
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response.text();
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case 'OPTIONS':
-      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
-    case 'GET':
+    case "OPTIONS":
+      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
+    case "GET":
       return res
         .status(405)
-        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
-    case 'PUT':
+        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
+    case "PUT":
       return res.status(405).json({
-        error: '*PUT that request away!* (Method not allowed, use POST)'
-      })
-    case 'POST':
-      break
+        error: "*PUT that request away!* (Method not allowed, use POST)",
+      });
+    case "POST":
+      break;
     default:
-      return res.status(405).json({ error: 'Method not allowed, use POST' })
+      return res.status(405).json({ error: "Method not allowed, use POST" });
   }
 
-  const data = req.body || {}
-  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
-  const waitlist = !open
-  const isAdult = data.educationLevel === 'tertiary'
+  const data = req.body || {};
+  const open = process.env.NEXT_PUBLIC_OPEN === "true";
+  const waitlist = !open;
+  const isAdult = data.educationLevel === "tertiary";
 
-  const secrets = (process.env.NAUGHTY || '').split(',')
+  const secrets = (process.env.NAUGHTY || "").split(",");
 
-  if (secrets.includes(req.headers['x-forwarded-for'])) {
+  if (secrets.includes(req.headers["x-forwarded-for"])) {
     return res.json({
-      status: 'success',
-      message: 'You’ve been invited to Slack!'
-    })
+      status: "success",
+      message: "You’ve been invited to Slack!",
+    });
   }
 
   const airtablePromise = joinTable.create({
-    'Full Name': data.name,
-    'Email Address': data.email,
+    "Full Name": data.name,
+    "Email Address": data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : '',
-    Event: data.event ? data.event : '',
-    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-  })
+    Club: data.club ? data.club : "",
+    Event: data.event ? data.event : "",
+    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+  });
 
   if (waitlist) {
     return res.json({
-      status: 'success',
-      message: 'Your request will be reviewed soon.'
-    })
+      status: "success",
+      message: "Your request will be reviewed soon.",
+    });
   }
 
   const slackPromise = postData(
-    'https://toriel.hackclub.com/slack-invite',
+    "https://toriel.hackclub.com/slack-invite",
     {
       email: data.email,
-      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
+      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers['user-agent']
+      userAgent: req.headers["user-agent"],
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
-  )
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
+  );
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
     )
-    .catch(error => {
-      res.status(500).json({ error })
-    })
+    .catch((error) => {
+      res.status(500).json({ error });
+    });
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index be1303c7f..0d722cc7b 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
-    const resp = await fetch('https://postal.hackclub.com/subscribe', {
-      method: 'POST',
+    const resp = await fetch("https://postal.hackclub.com/subscribe", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
+        "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: 'true'
-      }).toString()
-    }).then(r => r.text())
-    res.json(resp)
+        boolean: "true",
+      }).toString(),
+    }).then((r) => r.text());
+    res.json(resp);
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 34088a5f5..5cfba2713 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: 'No Slack API token found!' }
+    return { error: "No Slack API token found!" };
 
-  const formData = new FormData()
+  const formData = new FormData();
 
-  formData.append('token', process.env.SLACK_API_TOKEN)
-  formData.append('date_range', '30d')
+  formData.append("token", process.env.SLACK_API_TOKEN);
+  formData.append("date_range", "30d");
 
   let slackData = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        'content-type': 'multipart/form-data; boundary=orpheus',
-        cookie: process.env.SLACK_API_COOKIE
-      }
-    }
-  ).then(r => r.json())
+        "content-type": "multipart/form-data; boundary=orpheus",
+        cookie: process.env.SLACK_API_COOKIE,
+      },
+    },
+  ).then((r) => r.json());
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
-    return {}
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
+    return {};
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack())
+  res.status(200).json(await Slack());
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index 87da975b2..ec804ec3a 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
-  ).then(r => r.json())
+    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
+  ).then((r) => r.json());
 
   function check(val) {
-    return val === 'Pending' || val === 'Approved'
+    return val === "Pending" || val === "Approved";
   }
 
   const consoleCount = data
-    ? data.filter(console => check(console.fields.Status)).length
-    : 100 // arbitrary fallback number
+    ? data.filter((console) => check(console.fields.Status)).length
+    : 100; // arbitrary fallback number
 
-  return consoleCount
+  return consoleCount;
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles()
-  res.json(consoleCount)
+  const consoleCount = await getConsoles();
+  res.json(consoleCount);
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index af37486c7..5392940e9 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from '@octokit/graphql'
+import { graphql } from "@octokit/graphql";
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
-    )
+      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
+    );
     return {
-      sprig: '?',
-      sinerider: '?',
-      sprigHardware: '?',
-      hackclub: '?',
-      hackathons: '?'
-    }
+      sprig: "?",
+      sinerider: "?",
+      sprigHardware: "?",
+      hackclub: "?",
+      hackathons: "?",
+    };
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`
-      }
-    }
-  )
-  return organization
+        authorization: `token ${process.env.GITHUB_TOKEN}`,
+      },
+    },
+  );
+  return organization;
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars())
+  res.status(200).json(await fetchStars());
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index 4d933a02c..ac78f46a4 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'People'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "People",
+});
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: 'apptEEFG5HTfGQE7h',
-  tableName: 'Addresses'
-})
+  baseID: "apptEEFG5HTfGQE7h",
+  tableName: "Addresses",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
+  if (req.method === "POST") {
+    const data = req.body;
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`
+        filterByFormula: `{Email} = '${data.email}'`,
       })
-    )[0]
+    )[0];
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        'Full Name': data.name,
-        Email: data.email
-      })
+        "Full Name": data.name,
+        Email: data.email,
+      });
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
       })
-    )[0]
+    )[0];
 
     if (!address) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
     if (
       !(
-        address.fields['Street (First Line)'].toLowerCase() ===
+        address.fields["Street (First Line)"].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        'Street (First Line)': data.addressFirst,
-        'Street (Second Line)': data.addressSecond,
+        "Street (First Line)": data.addressFirst,
+        "Street (Second Line)": data.addressSecond,
         City: data.city,
-        'State/Province': data.state,
-        'Postal Code': data.zipCode,
+        "State/Province": data.state,
+        "Postal Code": data.zipCode,
         Country: data.country,
-        Person: [personRecord.id]
-      })
+        Person: [personRecord.id],
+      });
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK
+    const url = process.env.MAIL_MISSION_WEBHOOK;
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: 'recNDwjb7Zr04Szix',
+      scenarioRecordID: "recNDwjb7Zr04Szix",
       receiverAddressRecordID: address.id,
-      missionNotes: 'Requested via hackclub.com'
-    })
+      missionNotes: "Requested via hackclub.com",
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(r => {
-        res.json({ status: 'success' })
-      })
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'error', error })
+      .then((r) => {
+        res.json({ status: "success" });
       })
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "error", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index 6d5cd429a..f2d644840 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from 'form-data'
+import FormData from "form-data";
 
 export default async function stuff(req, res) {
-  const formData = new FormData()
+  const formData = new FormData();
 
   formData.append(
-    'token',
-    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
-  )
-  formData.append('date_range', '30d')
+    "token",
+    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
+  );
+  formData.append("date_range", "30d");
 
   const data = await fetch(
-    'https://hackclub.slack.com/api/team.stats.timeSeries',
+    "https://hackclub.slack.com/api/team.stats.timeSeries",
     {
-      method: 'POST',
+      method: "POST",
       body: formData,
       headers: {
         Cookie:
-          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
-      }
-    }
-  ).then(r => r.json())
+          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
+      },
+    },
+  ).then((r) => r.json());
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index e8a9a1a2e..bf694405d 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from 'airtable-plus'
+import AirtablePlus from "airtable-plus";
 
 const airtable = new AirtablePlus({
-  baseID: 'app1o9tRo6XulLnsr',
+  baseID: "app1o9tRo6XulLnsr",
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: 'rsvp'
-})
+  tableName: "rsvp",
+});
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
-    })
-    const url = process.env.WOM_SLACK_WEBHOOK_URL
+      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+    });
+    const url = process.env.WOM_SLACK_WEBHOOK_URL;
     const body = JSON.stringify({
-      rsvp
-    })
+      rsvp,
+    });
     fetch(url, {
       body,
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
-      }
+        "Content-Type": "application/json",
+      },
     })
-      .then(res => res.status(200).json({ success: true }))
-      .catch(error => {
-        console.error(error)
-        res.json({ status: 'Something went wrong', error })
-      })
+      .then((res) => res.status(200).json({ success: true }))
+      .catch((error) => {
+        console.error(error);
+        res.json({ status: "Something went wrong", error });
+      });
   } else {
-    res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    res.status(405).json({ status: "error", error: "Must send POST request" });
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 2774043cb..1f8c864d7 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text
-} from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { startCase } from 'lodash'
+  Text,
+} from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { startCase } from "lodash";
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: '100%', height: 96, mb: 1 }}
+      sx={{ width: "100%", height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace('Flag Orpheus', 'Orpheus Flag –')
-        .replace('Bw', ' (B/W)')
-        .replace('Hcb', 'HCB')}
+        .replace("Flag Orpheus", "Orpheus Flag –")
+        .replace("Bw", " (B/W)")
+        .replace("Hcb", "HCB")}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: 'center',
+        alignItems: "center",
         a: {
-          bg: 'elevated',
-          color: 'cyan',
-          boxShadow: 'none',
+          bg: "elevated",
+          color: "cyan",
+          boxShadow: "none",
           py: 1,
-          ':hover,:focus': { bg: 'cyan', color: 'white' }
-        }
+          ":hover,:focus": { bg: "cyan", color: "white" },
+        },
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-)
+);
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-)
+);
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center'
+      color: "white",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-)
+);
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone',
-          'flag-orpheus-top-bw',
-          'flag-orpheus-left-bw',
-          'flag-standalone-bw',
-          'icon-rounded',
-          'icon-square',
-          'icon-progress-rounded',
-          'icon-progress-square'
-        ].map(key => (
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone",
+          "flag-orpheus-top-bw",
+          "flag-orpheus-left-bw",
+          "flag-standalone-bw",
+          "icon-rounded",
+          "icon-square",
+          "icon-progress-rounded",
+          "icon-progress-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: 'block',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          'td:first-of-type': { pr: 3 },
+          display: "block",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+          "td:first-of-type": { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: 'initial' }
+          pre: { whiteSpace: "initial" },
         }}
       >
-        <Box as="thead" sx={{ display: 'none' }}>
+        <Box as="thead" sx={{ display: "none" }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          'red',
-          'orange',
-          'yellow',
-          'green',
-          'cyan',
-          'blue',
-          'purple',
-          'muted'
-        ].map(key => (
+          "red",
+          "orange",
+          "yellow",
+          "green",
+          "cyan",
+          "blue",
+          "purple",
+          "muted",
+        ].map((key) => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{' '}
+        We have a custom iconset, published as{" "}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
         {[
-          'clubs',
-          'bank-circle',
-          'event-code',
-          'home',
-          'transactions',
-          'bolt',
-          'photo',
-          'emoji'
-        ].map(k => (
+          "clubs",
+          "bank-circle",
+          "event-code",
+          "home",
+          "transactions",
+          "bolt",
+          "photo",
+          "emoji",
+        ].map((k) => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export const getStaticProps = () => {
-  const fs = require('fs')
+  const fs = require("fs");
   const css = fs.readFileSync(
-    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
-    'utf8'
-  )
-  return { props: { css } }
-}
+    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
+    "utf8",
+  );
+  return { props: { css } };
+};
diff --git a/pages/clubs.js b/pages/clubs.js
index 70e3d1551..5be7488ac 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import Icon from '../components/icon'
-import BGImg from '../components/background-image'
-import ForceTheme from '../components/force-theme'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Photo from '../components/photo'
-import Footer from '../components/footer'
-import FooterImgFile from '../public/home/footer.png'
-import AssembleImgFile from '../public/home/assemble.jpg'
-import Slack from '../components/slack'
-import Announcement from '../components/announcement'
-import Stage from '../components/stage'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Head from "next/head";
+import NextLink from "next/link";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import Icon from "../components/icon";
+import BGImg from "../components/background-image";
+import ForceTheme from "../components/force-theme";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Photo from "../components/photo";
+import Footer from "../components/footer";
+import FooterImgFile from "../public/home/footer.png";
+import AssembleImgFile from "../public/home/assemble.jpg";
+import Slack from "../components/slack";
+import Announcement from "../components/announcement";
+import Stage from "../components/stage";
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`
-Highlight = Highlight.withComponent('mark')
+`;
+Highlight = Highlight.withComponent("mark");
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: 'grid',
+      display: "grid",
       gridGap: [0, 4],
-      gridTemplateColumns: [null, 'auto 1fr'],
-      alignItems: 'start',
-      justifyContent: 'start',
-      bg: 'rgba(224, 230, 237, 0.25)',
+      gridTemplateColumns: [null, "auto 1fr"],
+      alignItems: "start",
+      justifyContent: "start",
+      bg: "rgba(224, 230, 237, 0.25)",
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: 'extra',
-      span: { transform: 'none', width: 'min-intrinsic' },
-      svg: { color: 'white' },
-      ...sx
+      borderRadius: "extra",
+      span: { transform: "none", width: "min-intrinsic" },
+      svg: { color: "white" },
+      ...sx,
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: 'fit-content',
+          width: "fit-content",
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
+          display: "inline-block",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
           boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-)
+);
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'dark',
+        bg: "dark",
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: 'center',
-        position: 'relative',
-        overflow: 'hidden'
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: 'white',
-            textShadow: 'text',
-            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
-            maxWidth: [null, 'copyUltra'],
+            color: "white",
+            textShadow: "text",
+            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
+            maxWidth: [null, "copyUltra"],
             my: [3, 4],
-            mx: 'auto',
-            zIndex: 1
+            mx: "auto",
+            zIndex: 1,
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: 'block',
-              pb: 3
+              display: "block",
+              pb: 3,
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{' '}
+          Make it a{" "}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: 'white',
-            textShadow: 'text',
+            color: "white",
+            textShadow: "text",
             maxWidth: 620,
             mt: 0,
-            mx: 'auto',
-            mb: [3, 4]
+            mx: "auto",
+            mb: [3, 4],
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: t => t.util.gx('green', 'blue'),
+              backgroundImage: (t) => t.util.gx("green", "blue"),
               ml: [0, 3],
-              mt: [3, 0]
+              mt: [3, 0],
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: ['center', 'center', 'flex-end'],
+          display: "flex",
+          justifyContent: ["center", "center", "flex-end"],
           marginRight: 2,
-          mt: [2, 2, 1]
+          mt: [2, 2, 1],
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: '1',
-            bg: '#000',
-            color: 'white',
+            zIndex: "1",
+            bg: "#000",
+            color: "white",
             opacity: 0.5,
-            textDecoration: 'none',
-            fontWeight: 'normal',
-            ':hover': { opacity: 1 },
-            transition: '0.3s ease'
+            textDecoration: "none",
+            fontWeight: "normal",
+            ":hover": { opacity: 1 },
+            transition: "0.3s ease",
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{' '}
+          Clubs discovering the{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               mx: [-2, 0],
-              whiteSpace: 'nowrap',
-              color: '#5d114c',
-              bg: 'rgb(255, 212, 64)'
+              whiteSpace: "nowrap",
+              color: "#5d114c",
+              bg: "rgb(255, 212, 64)",
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: 'inline-block',
+                display: "inline-block",
                 fontSize: 2,
-                lineHeight: '30px',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                border: '3px solid currentColor'
+                lineHeight: "30px",
+                textAlign: "center",
+                fontWeight: "bold",
+                border: "3px solid currentColor",
               },
               p: { my: 0 },
-              strong: { display: 'block' }
+              strong: { display: "block" },
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{' '}
+              bank accounts, being creative and{" "}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, '1fr 2fr']}
+          columns={[null, "1fr 2fr"]}
           mt={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+          sx={{ maxWidth: "copyUltra", mx: "auto" }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
           >
-            Hack Clubs attend and run{' '}
+            Hack Clubs attend and run{" "}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{' '}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
-            &{' '}
+            </NextLink>{" "}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
+            &{" "}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{' '}
+            , run summer programs like{" "}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{' '}
+            , and compete in events like the{" "}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: 'dark',
-        color: 'white',
-        'h2,p': { textShadow: 'text' },
-        textAlign: [null, 'center'],
-        position: 'relative',
-        overflow: 'hidden'
+        bg: "dark",
+        color: "white",
+        "h2,p": { textShadow: "text" },
+        textAlign: [null, "center"],
+        position: "relative",
+        overflow: "hidden",
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{' '}
+          environment,{" "}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
       <Container
         sx={{
-          maxWidth: [null, 'copyUltra'],
-          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
+          maxWidth: [null, "copyUltra"],
+          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{' '}
+            Get your club{" "}
             <Text
               as="span"
               sx={{
-                borderRadius: 'default',
+                borderRadius: "default",
                 px: 2,
                 mx: [-2, 0],
-                bg: 'rgb(91, 255, 205)',
-                color: '#095365',
-                display: 'inline-block',
-                whiteSpace: ['wrap', 'nowrap']
+                bg: "rgb(91, 255, 205)",
+                color: "#095365",
+                display: "inline-block",
+                whiteSpace: ["wrap", "nowrap"],
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: 'end', span: { color: 'white' } }}
+          sx={{ alignItems: "end", span: { color: "white" } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{' '}
+                We build tools, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{' '}
+                Come prepared to every meeting with over 100{" "}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{' '}
+                Use our 501(c)(3) status and a restricted fund with{" "}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{' '}
+                From <Link href="/night">Hack Night</Link> to{" "}
                 <Link href="/amas">AMAs</Link>
-                {' to '}
+                {" to "}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{' '}
+                We're always building new tools for leaders, such as{" "}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: 'grid',
+            display: "grid",
             gridGap: [0, 4],
-            gridTemplateColumns: [null, 'auto 1fr'],
-            alignItems: 'start',
-            justifyContent: 'start',
-            bg: 'rgba(255,88,88,0.125)',
+            gridTemplateColumns: [null, "auto 1fr"],
+            alignItems: "start",
+            justifyContent: "start",
+            bg: "rgba(255,88,88,0.125)",
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: 'extra',
-            span: { transform: 'none', width: 'min-intrinsic' },
-            svg: { color: 'white' }
+            borderRadius: "extra",
+            span: { transform: "none", width: "min-intrinsic" },
+            svg: { color: "white" },
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ['left', 'center'] }}>
+      <Container sx={{ textAlign: ["left", "center"] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{' '}
+          Apply today to{" "}
           <Text
             as="span"
             sx={{
-              borderRadius: 'default',
+              borderRadius: "default",
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ['wrap', 'nowrap'],
-              color: 'white',
-              bg: '#6f31b7'
+              whiteSpace: ["wrap", "nowrap"],
+              color: "white",
+              bg: "#6f31b7",
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: 'left',
-            '> a, > div': {
-              borderRadius: 'extra',
-              boxShadow: 'elevated',
+            textAlign: "left",
+            "> a, > div": {
+              borderRadius: "extra",
+              boxShadow: "elevated",
               px: [3, null, 4],
-              py: [4, null, 5]
+              py: [4, null, 5],
             },
             span: {
               boxShadow:
-                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
             },
-            svg: { fill: 'currentColor' }
+            svg: { fill: "currentColor" },
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(51, 142, 218)' }
+                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(51, 142, 218)" },
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
-              color: 'white',
-              svg: { color: 'rgb(236, 55, 80)' }
+                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
+              color: "white",
+              svg: { color: "rgb(236, 55, 80)" },
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
-              color: 'white',
-              svg: { color: '#fb558e' }
+              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              color: "white",
+              svg: { color: "#fb558e" },
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: 'dark',
-        position: 'relative',
-        overflow: 'hidden',
-        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
-        'h2,span,p,a': { color: 'white !important' },
-        '> div img': { objectPosition: ['left', 'center'] },
+        backgroundColor: "dark",
+        position: "relative",
+        overflow: "hidden",
+        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
+        "h2,span,p,a": { color: "white !important" },
+        "> div img": { objectPosition: ["left", "center"] },
         svg: {
-          fill: 'white',
-          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
-        }
+          fill: "white",
+          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
+        },
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index e1aae2d1c..3c8252f91 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../components/letterhead'
+import Letterhead from "../../components/letterhead";
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index ae426b47f..2e4b08c37 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 0a7d191b4..8272daf9f 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from '../../components/letterhead'
-import Announcement from '../../components/announcement'
+import Letterhead from "../../components/letterhead";
+import Announcement from "../../components/announcement";
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: 'container',
-    mx: '0',
-    mt: '0',
-    background: '#f9fafc !important',
-    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
+    maxWidth: "container",
+    mx: "0",
+    mt: "0",
+    background: "#f9fafc !important",
+    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index cd0b91ab4..948e04e81 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from '../../components/letterhead'
-import Link from 'next/link'
-import { memo, useState, useEffect } from 'react'
-import StaticMention from '../../components/mention'
+import Letterhead from "../../components/letterhead";
+import Link from "next/link";
+import { memo, useState, useEffect } from "react";
+import StaticMention from "../../components/mention";
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index 963b70fc1..c149a1d59 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from '../../../components/letterhead'
+import Letterhead from "../../../components/letterhead";
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 27b5c28b3..0edc81501 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from 'theme-ui'
-import theme from '@hackclub/theme'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
+import { Box, Button, Container, Heading, Text } from "theme-ui";
+import theme from "@hackclub/theme";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name
+        name,
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'muted',
+        bg: "dark",
+        color: "muted",
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,43 +42,45 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default DeprecatedPage
+export default DeprecatedPage;
 
 const pages = {
   cloud9: {
-    name: 'Cloud9',
-    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
-    link: 'https://repl.it/?ref=hackclub',
-    icon: 'terminal'
+    name: "Cloud9",
+    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
+    link: "https://repl.it/?ref=hackclub",
+    icon: "terminal",
   },
   challenge: {
-    name: 'Challenge',
-    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
-    link: 'https://scrapbook.hackclub.com/',
-    icon: 'sticker'
+    name: "Challenge",
+    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
+    link: "https://scrapbook.hackclub.com/",
+    icon: "sticker",
   },
   tech_domains: {
-    name: '.TECH domains',
-    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
-    link: 'https://hack.af/pack',
-    icon: 'web'
+    name: ".TECH domains",
+    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
+    link: "https://hack.af/pack",
+    icon: "web",
   },
   pack: {
-    name: 'the Hack Pack',
-    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
-    link: 'https://education.github.com/pack',
-    icon: 'github'
-  }
-}
+    name: "the Hack Pack",
+    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
+    link: "https://education.github.com/pack",
+    icon: "github",
+  },
+};
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
-  return { paths, fallback: false }
-}
+  const paths = Object.keys(pages).map((key) => ({
+    params: { deprecated: key },
+  }));
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated]
-  return { props: { page } }
-}
+  const page = pages[params.deprecated];
+  return { props: { page } };
+};
diff --git a/pages/donate.js b/pages/donate.js
index 94efa14c4..d7871cc76 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../components/force-theme'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import SprigForm from '../components/donate/sprigForm'
-import SprigMeta from '../components/donate/sprigMeta'
-import Sponsors from '../components/donate/sponsors'
-import donors from '../components/donate/donors.json'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../public/donate/sf.jpg'
-import HackerGames from '../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../public/donate/0color_pop.jpg'
-import ElonAMA from '../public/donate/elon.jpg'
-import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../public/donate/flagship.png'
-import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../public/home/golden-train.png'
+  Avatar,
+} from "theme-ui";
+import Photo from "../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../components/force-theme";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import SprigForm from "../components/donate/sprigForm";
+import SprigMeta from "../components/donate/sprigMeta";
+import Sponsors from "../components/donate/sponsors";
+import donors from "../components/donate/donors.json";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../public/donate/sf.jpg";
+import HackerGames from "../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../public/donate/0color_pop.jpg";
+import ElonAMA from "../public/donate/elon.jpg";
+import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../public/donate/flagship.png";
+import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../public/home/golden-train.png";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: '“';
+    content: "“";
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
+    color: "white",
+  },
+};
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`
+`;
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+`;
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '200px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "200px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             zIndex: 0,
-            width: '100%',
-            display: 'block'
+            width: "100%",
+            display: "block",
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala
+              Kerala,
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun
+              ZephyrFun,
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               fontSize: 4,
-              textTransform: 'uppercase',
+              textTransform: "uppercase",
               fontWeight: [400, 800],
-              mb: [0, 0]
+              mb: [0, 0],
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: 'center',
-              textTransform: 'uppercase',
+              textAlign: "center",
+              textTransform: "uppercase",
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0]
+              my: [2, 0],
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-around'
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-around",
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: 'center',
-                color: 'blue',
-                textTransform: 'uppercase',
+                textAlign: "center",
+                color: "blue",
+                textTransform: "uppercase",
                 mt: [2, 0],
-                fontWeight: 800
+                fontWeight: 800,
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+            <Text sx={{ textAlign: "center", fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, '2fr 3fr']}
+          columns={[null, "2fr 3fr"]}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: '100%',
-              borderRadius: '1em',
-              height: '100%',
-              objectFit: 'cover'
+              width: "100%",
+              borderRadius: "1em",
+              height: "100%",
+              objectFit: "cover",
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: '100%' }}
+            sx={{ height: "100%" }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: 'white',
-            bg: 'primary',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: ['wrap', 'nowrap'],
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            padding: 4
+            color: "white",
+            bg: "primary",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: ["wrap", "nowrap"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 4,
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
+          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
+        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
+          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: '27px' }}>
-            Please get in touch at{' '}
-            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: "27px" }}>
+            Please get in touch at{" "}
+            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{' '}
+            </A>{" "}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
+            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: '48px', width: '48px' }}
+              sx={{ height: "48px", width: "48px" }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{' '}
+        </SecondQuote>{" "}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/elon.js b/pages/elon.js
index 9f5de8c9f..692df7d52 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from 'theme-ui'
+import { Box, Container, Heading, Text } from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/elon.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/elon.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{' '}
+          Hack Club “makes me feel <span>much more optimistic</span>{" "}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default ElonPage
+export default ElonPage;
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index a2b7f4ffe..f44c53145 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import MSparkles from '../../components/sparkles/money'
-import NextLink from 'next/link'
-import { Link, Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import Form from '../../components/hackathons/grant/form'
-import Apply from '../../components/hackathons/grant/apply'
+import { Box, Container, Flex, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import MSparkles from "../../components/sparkles/money";
+import NextLink from "next/link";
+import { Link, Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import Form from "../../components/hackathons/grant/form";
+import Apply from "../../components/hackathons/grant/apply";
 
-import Zoom from 'react-reveal/Zoom'
+import Zoom from "react-reveal/Zoom";
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: 'elevated',
+          backgroundColor: "elevated",
           backgroundImage: `url('${background}')`,
-          backgroundSize: '40px 40px',
-          backgroundRepeat: 'repeat',
-          backgroundPosition: '10% 10%',
-          color: 'snow',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          height: '100%'
+          backgroundSize: "40px 40px",
+          backgroundRepeat: "repeat",
+          backgroundPosition: "10% 10%",
+          color: "snow",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          height: "100%",
         }}
       >
-        <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ alignItems: "center" }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  )
-}
+  );
+};
 
 const HackathonGrant = () => {
-  let open = true // applications are open
-  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
+  let open = true; // applications are open
+  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(56rem + 32px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              maxWidth: "calc(56rem + 32px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: 'contain',
-                      backgroundPosition: 'center center',
-                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: "contain",
+                      backgroundPosition: "center center",
+                      backgroundRepeat: "no-repeat",
                       mr: 3,
-                      borderRadius: 8
+                      borderRadius: 8,
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
             >
-              Hack Club is providing $500 grants (and waiving{' '}
+              Hack Club is providing $500 grants (and waiving{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
-              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
-              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
+              </Link>{" "}
+              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
+              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? 'Apply Now' : 'Coming Soon'}
+              {open ? "Apply Now" : "Coming Soon"}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>
-                Find hackathons{' '}
-                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
+                Find hackathons{" "}
+                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
+            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               my: 3,
-              color: 'white',
-              fontSize: [1, 2, 2]
+              color: "white",
+              fontSize: [1, 2, 2],
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
-                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
+                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{' '}
+              You will need to provide a scan of an email, contract, or an{" "}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{' '}
+              </Link>{" "}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: 'muted',
-                  fontSize: ['14px', 1, 1]
+                  color: "muted",
+                  fontSize: ["14px", 1, 1],
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{' '}
+                domain? HCB provides a free domain. Check out this{" "}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{' '}
-                or ask in{' '}
+                </Link>{" "}
+                or ask in{" "}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: 'muted'
+                    color: "muted",
                   }}
                 >
                   Slack
-                </Link>{' '}
+                </Link>{" "}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{' '}
+              hackathons, and spend it in the open with{" "}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{' '}
+              . Sign up for{" "}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{' '}
+              </Link>{" "}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ['14px', 1, 1],
-                  color: 'muted'
+                  fontSize: ["14px", 1, 1],
+                  color: "muted",
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: 'center',
+              textAlign: "center",
               mt: 3,
-              color: 'muted'
+              color: "muted",
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{' '}
+            logos found on the respective brand guides for{" "}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{' '}
-            and{' '}
+            </Link>{" "}
+            and{" "}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
+                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: 'auto',
-            maxWidth: '52rem',
-            width: '90%',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
+            mx: "auto",
+            maxWidth: "52rem",
+            width: "90%",
+            textAlign: "left",
+            textDecoration: "none",
+            lineHeight: "caption",
+            display: "flex",
+            alignItems: "center",
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: '16px !important',
-            svg: { flexShrink: 'none' }
+            p: "16px !important",
+            svg: { flexShrink: "none" },
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ['none', 'block'],
+              display: ["none", "block"],
               width: 56,
-              height: 'auto'
+              height: "auto",
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: '1 1 auto',
-              strong: { display: ['inline', 'block'], pl: 3 }
+              flex: "1 1 auto",
+              strong: { display: ["inline", "block"], pl: 3 },
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  )
-}
+  );
+};
 
-export default HackathonGrant
+export default HackathonGrant;
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index b4e90cc7a..48e63c3e0 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Recap from '../../components/hackathons/recap'
-import Slack from '../../components/hackathons/features/slack'
-import Money from '../../components/hackathons/features/money'
-import Landing from '../../components/hackathons/landing'
-import Marketing from '../../components/hackathons/features/marketing'
-import Overview from '../../components/hackathons/overview'
-import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
-import KeepExploring from '../../components/hackathons/keep-exploring'
+import { Box, Container } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Recap from "../../components/hackathons/recap";
+import Slack from "../../components/hackathons/features/slack";
+import Money from "../../components/hackathons/features/money";
+import Landing from "../../components/hackathons/landing";
+import Marketing from "../../components/hackathons/features/marketing";
+import Overview from "../../components/hackathons/overview";
+import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
+import KeepExploring from "../../components/hackathons/keep-exploring";
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-          
+
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-          
+
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,25 +43,27 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  )
+  );
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
+    const res = await fetch(
+      "https://hackathons.hackclub.com/api/events/upcoming",
+    );
     if (res.ok) {
       data = await res.json();
     } else {
-      data = []; 
+      data = [];
     }
   } catch (error) {
-    data = []; 
+    data = [];
   }
 
   return {
     props: {
-      data, 
+      data,
     },
-    revalidate: 10
+    revalidate: 10,
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9efb..18c65178e 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { Box, Flex, Text } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import FlexCol from '../../../components/flex-col'
-import Progress from '../../../components/hcb/apply/progress'
-import NavButton from '../../../components/hcb/apply/nav-button'
-import Watermark from '../../../components/hcb/apply/watermark'
-import FormContainer from '../../../components/hcb/apply/form-container'
-import HCBInfo from '../../../components/hcb/apply/hcb-info'
-import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
-import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
-import AlertModal from '../../../components/hcb/apply/alert-modal'
-import { geocode } from '../../../lib/hcb/apply/address-validation'
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { Box, Flex, Text } from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import FlexCol from "../../../components/flex-col";
+import Progress from "../../../components/hcb/apply/progress";
+import NavButton from "../../../components/hcb/apply/nav-button";
+import Watermark from "../../../components/hcb/apply/watermark";
+import FormContainer from "../../../components/hcb/apply/form-container";
+import HCBInfo from "../../../components/hcb/apply/hcb-info";
+import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
+import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
+import AlertModal from "../../../components/hcb/apply/alert-modal";
+import { geocode } from "../../../lib/hcb/apply/address-validation";
 
-const valiadateAddress = async step => {
+const valiadateAddress = async (step) => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
+    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
 
-    if (!userAddress) return
+    if (!userAddress) return;
 
-    const result = await geocode(userAddress)
+    const result = await geocode(userAddress);
 
-    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
+    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
 
     sessionStorage.setItem(
-      'bank-signup-addressLine1',
-      addrComp('fullThoroughfare')
-    )
-    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
+      "bank-signup-addressLine1",
+      addrComp("fullThoroughfare"),
+    );
+    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
     sessionStorage.setItem(
-      'bank-signup-addressState',
-      addrComp('administrativeArea')
-    )
-    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
+      "bank-signup-addressState",
+      addrComp("administrativeArea"),
+    );
+    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
     sessionStorage.setItem(
-      'bank-signup-addressCountry',
-      result.results[0]?.country ?? ''
-    )
+      "bank-signup-addressCountry",
+      result.results[0]?.country ?? "",
+    );
     sessionStorage.setItem(
-      'bank-signup-addressCountryCode',
-      result.results[0]?.countryCode ?? ''
-    )
+      "bank-signup-addressCountryCode",
+      result.results[0]?.countryCode ?? "",
+    );
   }
-}
+};
 
 export default function Apply() {
-  const router = useRouter()
-  const [step, setStep] = useState(1)
-  const formContainer = useRef()
-  const [formError, setFormError] = useState(null)
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const formContainer = useRef();
+  const [formError, setFormError] = useState(null);
 
   const requiredFields = [
     [],
-    ['eventName', 'eventLocation'],
-    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
-  ]
+    ["eventName", "eventLocation"],
+    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
+  ];
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`)
-    if (!router.isReady) return
-    setStep(parseInt(router.query.step))
+    console.error(`Form error: ${formError}`);
+    if (!router.isReady) return;
+    setStep(parseInt(router.query.step));
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 }
+          query: { ...router.query, step: 1 },
         },
         undefined,
-        {}
-      )
+        {},
+      );
     }
-  }, [formError, router, step])
+  }, [formError, router, step]);
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: 'grid',
+          display: "grid",
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"'
+            '"title form" "title form" "nav form"',
           ],
-          height: ['auto', null, null, '100vh'],
-          p: [4, 5]
+          height: ["auto", null, null, "100vh"],
+          p: [4, 5],
         }}
       >
-        <Box sx={{ gridArea: 'title' }}>
-          <FlexCol gap={[4, null, null, '20vh']}>
+        <Box sx={{ gridArea: "title" }}>
+          <FlexCol gap={[4, null, null, "20vh"]}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
+        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: 'nav',
-            alignSelf: 'end',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between'
+            gridArea: "nav",
+            alignSelf: "end",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  )
+  );
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index fe2a24274..42f349873 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image
-} from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
-import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
-import FlexCol from '../../../components/flex-col'
+  Image,
+} from "theme-ui";
+import ForceTheme from "../../../components/force-theme";
+import JSConfetti from "js-confetti";
+import Icon from "../../../components/icon";
+import FlexCol from "../../../components/flex-col";
 
 function Option({ icon, label, link }) {
   const color =
-    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
+    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 'fit-content',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "fit-content",
         color,
-        borderColor: color
+        borderColor: color,
       }}
     >
-      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  )
+  );
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti()
+    const jsConfetti = new JSConfetti();
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        '#ec3750',
-        '#ff8c37',
-        '#f1c40f',
-        '#33d6a6',
-        '#5bc0de',
-        '#338eda',
-        '#a633d6'
-      ]
-    })
-  }, [router])
+        "#ec3750",
+        "#ff8c37",
+        "#f1c40f",
+        "#33d6a6",
+        "#5bc0de",
+        "#338eda",
+        "#a633d6",
+      ],
+    });
+  }, [router]);
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: '40%' }}
+            sx={{ width: "40%" }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'space-evenly',
-              alignItems: 'center',
-              gap: [3, null, 0]
+              flexDirection: ["column", null, "row"],
+              justifyContent: "space-evenly",
+              alignItems: "center",
+              gap: [3, null, 0],
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  )
+  );
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index e21b80120..bfd56897a 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations
-} from './index'
-import { map, find, kebabCase, startCase } from 'lodash'
+  fetchRawClimateOrganizations,
+} from "./index";
+import { map, find, kebabCase, startCase } from "lodash";
 
-const regionsWithIds = map(regions, region => ({
+const regionsWithIds = map(regions, (region) => ({
   id: kebabCase(region.label),
-  ...region
-}))
+  ...region,
+}));
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,30 +15,33 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  )
+  );
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, 'id'), id => ({
-    params: { region: `organizations-in-${id}` }
-  }))
+  const paths = map(map(regionsWithIds, "id"), (id) => ({
+    params: { region: `organizations-in-${id}` },
+  }));
 
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params
-  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+  let { region } = params;
+  region = find(regionsWithIds, [
+    "id",
+    region.replace("organizations-in-", ""),
+  ]);
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    org => org.location.continent === region.label
-  )
+    (org) => org.location.continent === region.label,
+  );
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region
+      pageRegion: region,
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index c7385f28a..fe8acff42 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,41 +6,43 @@ import {
   Grid,
   Heading,
   Input,
-  Select
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../../components/force-theme'
-import Nav from '../../../components/nav'
-import Footer from '../../../components/footer'
-import MSparkles from '../../../components/sparkles/money'
-import { Text, Button, Card } from 'theme-ui'
-import Icon from '@hackclub/icons'
-import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
-import Zoom from 'react-reveal/Zoom'
-import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
-import { useEffect, useState } from 'react'
+  Select,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../../components/force-theme";
+import Nav from "../../../components/nav";
+import Footer from "../../../components/footer";
+import MSparkles from "../../../components/sparkles/money";
+import { Text, Button, Card } from "theme-ui";
+import Icon from "@hackclub/icons";
+import OrganizationCard, {
+  Badge,
+} from "../../../components/hcb/directory/card";
+import Zoom from "react-reveal/Zoom";
+import fuzzysort from "fuzzysort";
+import ScrollHint from "../../../components/scroll-hint";
+import { useEffect, useState } from "react";
 /** @jsxImportSource theme-ui */
-import NextLink from 'next/link'
-import { kebabCase, intersection } from 'lodash'
-import theme from '@hackclub/theme'
-import Tooltip from '../../../components/hcb/tooltip'
+import NextLink from "next/link";
+import { kebabCase, intersection } from "lodash";
+import theme from "@hackclub/theme";
+import Tooltip from "../../../components/hcb/tooltip";
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`
+`;
 
 export const badges = [
   {
-    label: 'Transparent',
-    id: 'Transparent',
-    tooltip: 'Transparent',
-    color: 'purple',
-    icon: 'explore',
-    match: org => org.isTransparent
+    label: "Transparent",
+    id: "Transparent",
+    tooltip: "Transparent",
+    color: "purple",
+    icon: "explore",
+    match: (org) => org.isTransparent,
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -53,160 +55,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: 'Recommended',
-    id: '128CollectiveRecommended',
-    tooltip: '128 Collective Recommended',
-    match: org => org.is128Recommended,
+    label: "Recommended",
+    id: "128CollectiveRecommended",
+    tooltip: "128 Collective Recommended",
+    match: (org) => org.is128Recommended,
     image:
-      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
-  }
-]
+      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
+  },
+];
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter(badge => badge.match?.(org))
-}
+  return this.filter((badge) => badge.match?.(org));
+};
 
 export const tags = [
   {
-    label: 'Climate',
-    id: 'Climate',
-    color: '#1eb36d',
-    match: org => true
+    label: "Climate",
+    id: "Climate",
+    color: "#1eb36d",
+    match: (org) => true,
   },
   {
-    label: 'Nonprofit',
-    id: 'Nonprofit',
-    color: 'blue',
-    match: org => true
-  }
-]
+    label: "Nonprofit",
+    id: "Nonprofit",
+    color: "blue",
+    match: (org) => true,
+  },
+];
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter(tag => tag.match?.(org))
-}
+  return this.filter((tag) => tag.match?.(org));
+};
 
 export const regions = [
   {
-    label: 'North America',
-    color: 'secondary',
-    iconColor: 'red',
-    icon: 'photo',
+    label: "North America",
+    color: "secondary",
+    iconColor: "red",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
   },
   {
-    label: 'South America',
-    color: 'secondary',
-    iconColor: 'orange',
-    icon: 'photo',
+    label: "South America",
+    color: "secondary",
+    iconColor: "orange",
+    icon: "photo",
     image:
-      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
+      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
   },
   {
-    label: 'Africa',
-    color: 'secondary',
-    iconColor: 'purple',
-    icon: 'explore',
-    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
+    label: "Africa",
+    color: "secondary",
+    iconColor: "purple",
+    icon: "explore",
+    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
   },
   {
-    label: 'Europe',
-    color: 'secondary',
-    iconColor: 'blue',
-    icon: 'explore',
-    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
-    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
+    label: "Europe",
+    color: "secondary",
+    iconColor: "blue",
+    icon: "explore",
+    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
+    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
   },
   {
-    label: 'Asia & Oceania',
-    color: 'secondary',
-    iconColor: 'green',
-    icon: 'explore',
+    label: "Asia & Oceania",
+    color: "secondary",
+    iconColor: "green",
+    icon: "explore",
     image:
-      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
+      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
     ogImage:
-      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
-  }
-]
+      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
+  },
+];
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
-  const setStateVariable = filter[0]
-  const currentSelections = filter[1]
-  const title = filter[2]
-  const baseData = filter[3]
-  if (!baseData?.length) return <></>
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const setStateVariable = filter[0];
+  const currentSelections = filter[1];
+  const title = filter[2];
+  const baseData = filter[3];
+  if (!baseData?.length) return <></>;
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} {title}{' '}
+        {mobile && "FILTER BY "} {title}{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
         <Flex
           sx={{
-            alignItems: 'center',
-            cursor: 'pointer',
+            alignItems: "center",
+            cursor: "pointer",
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? '1px solid' : 'none',
-            borderColor: 'sunken',
-            borderRadius: '4px',
-            background: mobile ? 'snow' : 'none',
-            textDecoration: 'none',
-            color: 'secondary',
-            textDecoration: 'none',
-            transition: 'color 0.2s',
-            ':hover': {
-              color: 'blue'
+            border: mobile ? "1px solid" : "none",
+            borderColor: "sunken",
+            borderRadius: "4px",
+            background: mobile ? "snow" : "none",
+            textDecoration: "none",
+            color: "secondary",
+            textDecoration: "none",
+            transition: "color 0.2s",
+            ":hover": {
+              color: "blue",
             },
-            width: 'fit-content'
+            width: "fit-content",
           }}
-          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
+          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
         >
           <Flex
             sx={{
-              bg: 'smoke',
-              color: 'secondary',
+              bg: "smoke",
+              color: "secondary",
               p: 1,
-              borderRadius: 6
+              borderRadius: 6,
             }}
           >
             <Icon glyph="list" size={24} />
@@ -214,15 +216,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: 'inherit',
+              color: "inherit",
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? 'black'
-                  : 'primary',
-              ':hover': {
-                color: 'blue'
-              }
+                  ? "black"
+                  : "primary",
+              ":hover": {
+                color: "blue",
+              },
             }}
           >
             All
@@ -232,41 +234,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? 'black'
-                  : 'primary',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: 'blue'
+                  ? "black"
+                  : "primary",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "blue",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id])
+                setStateVariable([item.id]);
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections
-                temp = temp.filter(selection => selection !== item.id)
+                let temp = currentSelections;
+                temp = temp.filter((selection) => selection !== item.id);
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map(x => x.id)])
+                  setStateVariable([...baseData.map((x) => x.id)]);
                 } else {
-                  setStateVariable(temp)
+                  setStateVariable(temp);
                 }
               } else {
-                setStateVariable([...currentSelections, item.id])
+                setStateVariable([...currentSelections, item.id]);
               }
             }}
           >
@@ -274,18 +276,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                  color: 'white',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24
+                    height: 24,
                   }}
                 />
               </Flex>
@@ -293,93 +295,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: 'white',
+                  color: "white",
                   p: 1,
-                  borderRadius: 6
+                  borderRadius: 6,
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: 'uppercase',
-          color: 'muted',
+          textTransform: "uppercase",
+          color: "muted",
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? 'pointer' : 'default',
-          ':hover': mobile
+          cursor: mobile ? "pointer" : "default",
+          ":hover": mobile
             ? {
-                color: 'blue'
+                color: "blue",
               }
-            : {}
+            : {},
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && 'FILTER BY '} REGION{' '}
+        {mobile && "FILTER BY "} REGION{" "}
         <small
           style={{
-            transform: 'translateY(-1px)',
-            display: 'inline-block'
+            transform: "translateY(-1px)",
+            display: "inline-block",
           }}
         >
-          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
+          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? 'row' : 'column',
-          gap: '12px',
-          flexWrap: 'wrap',
+          flexDirection: mobile ? "row" : "column",
+          gap: "12px",
+          flexWrap: "wrap",
           mb: 3,
-          display: hiddenOnMobile ? 'none' : 'flex'
+          display: hiddenOnMobile ? "none" : "flex",
         }}
       >
-        <NextLink scroll={false} href={'/hcb/climate'}>
+        <NextLink scroll={false} href={"/hcb/climate"}>
           <Flex
             sx={{
-              alignItems: 'center',
-              cursor: 'pointer',
+              alignItems: "center",
+              cursor: "pointer",
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? '1px solid' : 'none',
-              borderColor: 'sunken',
-              borderRadius: '4px',
-              background: mobile ? 'snow' : 'none',
-              textDecoration: 'none',
-              color: 'secondary',
-              textDecoration: 'none',
-              transition: 'color 0.2s',
-              ':hover': {
-                color: '#B72A3D'
+              border: mobile ? "1px solid" : "none",
+              borderColor: "sunken",
+              borderRadius: "4px",
+              background: mobile ? "snow" : "none",
+              textDecoration: "none",
+              color: "secondary",
+              textDecoration: "none",
+              transition: "color 0.2s",
+              ":hover": {
+                color: "#B72A3D",
               },
-              width: 'fit-content'
+              width: "fit-content",
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: 'smoke',
-                color: 'secondary',
+                bg: "smoke",
+                color: "secondary",
                 p: 1,
-                borderRadius: 6
+                borderRadius: 6,
               }}
             >
               <Icon glyph="list" size={24} />
@@ -387,12 +389,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: 'inherit',
+                color: "inherit",
                 fontSize: 3,
-                color: !currentRegion ? 'red' : 'black',
-                ':hover': {
-                  color: 'blue'
-                }
+                color: !currentRegion ? "red" : "black",
+                ":hover": {
+                  color: "blue",
+                },
               }}
             >
               All
@@ -407,41 +409,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: 'center',
-                cursor: 'pointer',
+                alignItems: "center",
+                cursor: "pointer",
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? '1px solid' : 'none',
-                borderColor: 'sunken',
-                borderRadius: '4px',
-                background: mobile ? 'snow' : 'none',
-                textDecoration: 'none',
-                color: currentRegion?.label === item.label ? 'red' : 'black',
-                transition: 'color 0.2s',
-                ':hover': {
-                  color: 'blue'
+                border: mobile ? "1px solid" : "none",
+                borderColor: "sunken",
+                borderRadius: "4px",
+                background: mobile ? "snow" : "none",
+                textDecoration: "none",
+                color: currentRegion?.label === item.label ? "red" : "black",
+                transition: "color 0.2s",
+                ":hover": {
+                  color: "blue",
                 },
-                width: 'fit-content'
+                width: "fit-content",
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: 'contain',
-                    backgroundPosition: 'center',
-                    backgroundRepeat: 'no-repeat',
-                    color: 'white',
+                    backgroundSize: "contain",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24
+                      height: 24,
                     }}
                   />
                 </Flex>
@@ -449,15 +451,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: 'white',
+                    color: "white",
                     p: 1,
-                    borderRadius: 6
+                    borderRadius: 6,
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -465,8 +467,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  )
-}
+  );
+};
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -476,162 +478,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  )
-}
+  );
+};
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState("");
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion
+  const region = pageRegion;
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null)
+  const [modalOrganization, setModalOrganization] = useState(null);
 
   useEffect(() => {
-    const handle = e => {
-      if (e.key === 'Escape') {
-        closeModal()
+    const handle = (e) => {
+      if (e.key === "Escape") {
+        closeModal();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handle)
-    return () => window.removeEventListener('keydown', handle)
-  })
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  });
 
-  let organizations = rawOrganizations
+  let organizations = rawOrganizations;
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ['name', 'description'],
-      threshold: -1000
-    })
+      keys: ["name", "description"],
+      threshold: -1000,
+    });
 
-    organizations = search.map(({ obj }) => obj)
+    organizations = search.map(({ obj }) => obj);
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
+  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
 
-  const openModal = organization => {
-    setModalOrganization(organization)
-  }
+  const openModal = (organization) => {
+    setModalOrganization(organization);
+  };
 
   const closeModal = () => {
-    setModalOrganization(null)
-  }
+    setModalOrganization(null);
+  };
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          'Climate-focused nonprofits' +
-          (region ? ` in ${region.label}` : ' on HCB')
+          "Climate-focused nonprofits" +
+          (region ? ` in ${region.label}` : " on HCB")
         }
         description={
-          'Nonprofits are making real environmental impact' +
-          (region ? ` in ${region.label}` : '') +
+          "Nonprofits are making real environmental impact" +
+          (region ? ` in ${region.label}` : "") +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
+          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            right: '0px',
-            bottom: '0px',
+            position: "fixed",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
             zIndex: 1000,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bg: '#00000044'
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            bg: "#00000044",
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: 'min(800px, 80%)',
-              bg: 'elevated',
-              borderRadius: '10px',
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column'
+              width: "min(800px, 80%)",
+              bg: "elevated",
+              borderRadius: "10px",
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
             }}
-            onClick={e => {
-              e.stopPropagation()
+            onClick={(e) => {
+              e.stopPropagation();
             }}
           >
             <Flex
               sx={{
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                width: '40px',
-                height: '40px',
-                bg: 'smoke',
-                borderRadius: '50%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                cursor: 'pointer'
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                width: "40px",
+                height: "40px",
+                bg: "smoke",
+                borderRadius: "50%",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
+            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: 'column',
-                  justifyContent: 'end',
-                  width: '100%',
-                  minHeight: '200px',
+                  flexDirection: "column",
+                  justifyContent: "end",
+                  width: "100%",
+                  minHeight: "200px",
                   m: -4,
                   p: 4,
-                  pb: '48px',
-                  boxSizing: 'content-box',
-                  backgroundPosition: 'center center',
-                  color: 'white',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
+                  pb: "48px",
+                  boxSizing: "content-box",
+                  backgroundPosition: "center center",
+                  color: "white",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "cover",
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ['column', 'row', 'row'],
-                    alignItems: ['center', 'end', 'end'],
-                    justifyContent: 'start'
+                    flexDirection: ["column", "row", "row"],
+                    alignItems: ["center", "end", "end"],
+                    justifyContent: "start",
                   }}
                 >
-                  {modalOrganization.branding.logo &&
+                  {modalOrganization.branding.logo && (
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '8px',
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "8px",
                         marginRight: [0, 4, 4],
-                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
+                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
                       }}
                     />
-                  }
+                  )}
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: 'break-word',
-                      marginBottom: '16px',
-                      textAlign: ['center', 'left', 'left'],
-                      fontSize: ['48px', '48px', '64px'],
-                      color: 'white',
-                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
+                      wordBreak: "break-word",
+                      marginBottom: "16px",
+                      textAlign: ["center", "left", "left"],
+                      fontSize: ["48px", "48px", "64px"],
+                      color: "white",
+                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
                     }}
                   >
                     {modalOrganization.name}
@@ -642,14 +644,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  justifyContent: ['center', 'start', 'start'],
-                  alignItems: 'center',
+                  flexDirection: "row",
+                  justifyContent: ["center", "start", "start"],
+                  alignItems: "center",
                   gap: 2,
-                  width: '100%',
+                  width: "100%",
                   mt: -1,
                   mb: -2,
-                  flexWrap: 'wrap'
+                  flexWrap: "wrap",
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -659,12 +661,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: 'snow',
-                      fontSize: '20px',
-                      textShadow: 'none',
-                      borderRadius: '15px',
+                      color: "snow",
+                      fontSize: "20px",
+                      textShadow: "none",
+                      borderRadius: "15px",
                       px: 2,
-                      display: 'block'
+                      display: "block",
                     }}
                   >
                     {tag.label}
@@ -678,27 +680,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  )
+                  );
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  alignItems: 'start',
+                  flexDirection: "row",
+                  alignItems: "start",
                   gap: 4,
-                  width: '100%'
+                  width: "100%",
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    flex: '1'
+                    flexDirection: "column",
+                    alignItems: "start",
+                    flex: "1",
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: '22px' }}>
+                  <Text variant="lead" style={{ fontSize: "22px" }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -706,21 +708,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ['flex', 'flex', 'none'],
-                      width: '100%',
+                      display: ["flex", "flex", "none"],
+                      width: "100%",
                       gap: 2,
-                      flexWrap: 'wrap',
-                      flexDirection: 'row',
-                      alignItems: 'start',
-                      alignSelf: 'start'
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      alignItems: "start",
+                      alignSelf: "start",
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858',
-                        marginRight: 2
+                        color: "#3b4858",
+                        marginRight: 2,
                       }}
                     >
                       {modalOrganization.location.country}
@@ -729,7 +731,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -738,11 +740,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: 'column',
-                      alignItems: 'start',
+                      flexDirection: "column",
+                      alignItems: "start",
                       my: 2,
                       ml: -1,
-                      gap: 1
+                      gap: 1,
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -751,21 +753,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -775,21 +777,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: 'row',
-                          justifyContent: 'start',
-                          alignItems: 'center',
-                          color: 'slate',
-                          textDecoration: 'none'
+                          flexDirection: "row",
+                          justifyContent: "start",
+                          alignItems: "center",
+                          color: "slate",
+                          textDecoration: "none",
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
+                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: '2px', marginBottom: '6px' }}
+                          style={{ marginLeft: "2px", marginBottom: "6px" }}
                         />
                       </Flex>
                     )}
@@ -798,46 +800,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ['none', 'none', 'flex'],
-                    maxWidth: '30%',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    alignSelf: 'start'
+                    display: ["none", "none", "flex"],
+                    maxWidth: "30%",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    alignSelf: "start",
                   }}
                 >
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
+                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: '#3b4858'
+                        color: "#3b4858",
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: '#5b616a',
-                        fontSize: '20px'
+                        color: "#5b616a",
+                        fontSize: "20px",
                       }}
                     >
                       Continent
@@ -848,10 +850,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
+                  flexDirection: "row",
+                  width: "100%",
+                  justifyContent: "space-between",
+                  alignItems: "center",
                 }}
               >
                 <Button
@@ -860,26 +862,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: t => t.util.gx('green', 'blue'),
-                    width: ['100%', 'auto', 'auto']
+                    backgroundImage: (t) => t.util.gx("green", "blue"),
+                    width: ["100%", "auto", "auto"],
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      width: '24px',
-                      height: '24px',
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "24px",
+                      height: "24px",
                       marginLeft: -1,
-                      marginRight: 2
+                      marginRight: 2,
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
+                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ['none', 'none', 'block'] }}>
+                <Text sx={{ display: ["none", "none", "block"] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -894,42 +896,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 512px)',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)',
-              color: 'white'
+              width: "100%",
+              maxWidth: "calc(48rem + 512px)",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
+              color: "white",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 7]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 7],
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
+                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
               >
                 <MSparkles
-                  colors={['green', 'teal', 'blue']}
+                  colors={["green", "teal", "blue"]}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -968,23 +970,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{' '}
-              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
+              Climate-focused nonprofits on{" "}
+              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
               {region ? (
                 <>
-                  {' '}
+                  {" "}
                   in
                   <span
                     sx={{
-                      display: ['none', 'inline'],
-                      whiteSpace: 'nowrap',
+                      display: ["none", "inline"],
+                      whiteSpace: "nowrap",
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: 'none',
-                      ml: 2
+                      textShadow: "none",
+                      ml: 2,
                     }}
                   >
                     <img
@@ -995,22 +997,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
+                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
                   >
-                    {' ' + region.label}
+                    {" " + region.label}
                   </span>
                 </>
               ) : (
-                ''
+                ""
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
+                textAlign: "center",
                 my: 4,
-                maxWidth: '956px',
-                mx: 'auto'
+                maxWidth: "956px",
+                mx: "auto",
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1023,23 +1025,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: t => t.util.gx('green', 'blue'),
-                height: '56px'
+                backgroundImage: (t) => t.util.gx("green", "blue"),
+                height: "56px",
               }}
             >
               EXPLORE IMPACT
             </Button>
-
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            '@media screen and (max-width: 991.98px)': {
-              display: 'block'
+            "@media screen and (max-width: 991.98px)": {
+              display: "block",
             },
-            position: 'relative'
+            position: "relative",
           }}
           id="listings"
         >
@@ -1048,19 +1049,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: 'max(calc(50vw - 900px), 0px)',
-                '@media screen and (max-width: 991.98px)': {
-                  display: 'none'
+                marginLeft: "max(calc(50vw - 900px), 0px)",
+                "@media screen and (max-width: 991.98px)": {
+                  display: "none",
                 },
-                '@media screen and (min-width: 992px)': {
-                  position: 'sticky',
+                "@media screen and (min-width: 992px)": {
+                  position: "sticky",
                   top: 80,
-                  alignSelf: 'start'
-                }
+                  alignSelf: "start",
+                },
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges, false]}
+                badges={[setBadges, currentBadges, "Badges", badges, false]}
                 region={region}
               />
             </Box>
@@ -1070,33 +1071,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={e => setSearchValue(e.target.value)}
+                  onChange={(e) => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: '2px solid ' + theme.colors.muted,
-                    textAlign: ['left', 'left', 'left'],
-                    width: '100%',
-                    height: '100%',
-                    bg: 'sheet',
-                    fontSize: '18px',
-                    padding: '12px'
+                    border: "2px solid " + theme.colors.muted,
+                    textAlign: ["left", "left", "left"],
+                    width: "100%",
+                    height: "100%",
+                    bg: "sheet",
+                    fontSize: "18px",
+                    padding: "12px",
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                '@media screen and (max-width: 991.99px)': {
-                  display: 'block'
+                "@media screen and (max-width: 991.99px)": {
+                  display: "block",
                 },
-                '@media screen and (min-width: 992px)': {
-                  display: 'none'
+                "@media screen and (min-width: 992px)": {
+                  display: "none",
                 },
-                my: 2
+                my: 2,
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, 'Badges', badges]}
+                badges={[setBadges, currentBadges, "Badges", badges]}
                 region={region}
                 mobile
               />
@@ -1104,17 +1105,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: 'center',
-                  p: 5
+                  textAlign: "center",
+                  p: 5,
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: 'unset',
-                      display: 'block',
-                      mb: 0
+                      textTransform: "unset",
+                      display: "block",
+                      mb: 0,
                     }}
                   >
                     No results
@@ -1124,19 +1125,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map(org => new Organization(org))
-                .filter(organization => {
+                .map((org) => new Organization(org))
+                .filter((organization) => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map(badge => badge.id)
+                    .map((badge) => badge.id);
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  )
+                  );
                 })
-                .map(organization => (
+                .map((organization) => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1153,32 +1154,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: 'white'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              maxWidth: 'calc(48rem + 312px)',
-              mx: 'auto',
-              px: '16px'
+              width: "100%",
+              maxWidth: "calc(48rem + 312px)",
+              mx: "auto",
+              px: "16px",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [2, 4],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
-                fontSize: [5, null, 6, 6]
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                fontSize: [5, null, 6, 6],
               }}
               as="h3"
               variant="subheadline"
@@ -1188,8 +1189,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 3
+                textAlign: "center",
+                my: 3,
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1204,7 +1205,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: t => t.util.gx('green', 'blue')
+                backgroundImage: (t) => t.util.gx("green", "blue"),
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1214,7 +1215,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  )
+  );
 }
 
 /**
@@ -1230,7 +1231,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization
+    this.raw = rawOrganization;
   }
 
   /**
@@ -1238,7 +1239,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id
+    return this.raw.id;
   }
 
   /**
@@ -1246,7 +1247,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name
+    return this.raw.name;
   }
 
   /**
@@ -1254,7 +1255,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug
+    return this.raw.slug;
   }
 
   /**
@@ -1262,7 +1263,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent
+    return this.raw.transparent;
   }
 
   /**
@@ -1270,7 +1271,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode
+    return this.raw.demo_mode;
   }
 
   /**
@@ -1278,7 +1279,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length
+    return this.raw.users.length;
   }
 
   /**
@@ -1286,7 +1287,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null
+    return this.raw.donation_link !== null;
   }
 
   /**
@@ -1302,8 +1303,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description
-    }
+      description: this.raw.description,
+    };
   }
 
   /**
@@ -1316,9 +1317,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: 'Coding',
-      badges: ['128_collective_funded']
-    }
+      category: "Coding",
+      badges: ["128_collective_funded"],
+    };
   }
 
   /**
@@ -1326,7 +1327,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at)
+    return new Date(this.raw.created_at);
   }
 
   /**
@@ -1338,14 +1339,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website
-    }
+      website: this.raw.website,
+    };
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link
+    if (this.acceptsDonations) links.donations = this.raw.donation_link;
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`
+      links.financials = `https://hcb.hackclub.com/${this.slug}`;
 
-    return links
+    return links;
   }
 
   /**
@@ -1359,8 +1360,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code
-    }
+      countryCode: this.raw.location.country_code,
+    };
   }
 
   /**
@@ -1368,7 +1369,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.['128_collective']?.recommended
+    return this.raw.partners?.["128_collective"]?.recommended;
   }
 
   /**
@@ -1376,7 +1377,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.['128_collective']?.funded
+    return this.raw.partners?.["128_collective"]?.funded;
   }
 
   /**
@@ -1384,35 +1385,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href)
-    const json = await response.json()
-    this.raw = json
+    const response = await fetch(this.raw.href);
+    const json = await response.json();
+    this.raw = json;
 
-    return this
+    return this;
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100
-  let total = []
-  let page = 1
+  let lastLength = 100;
+  let total = [];
+  let page = 1;
   while (lastLength >= 100) {
     const json = await fetch(
-      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
-        page
-    ).then(res => res.json())
-    lastLength = json.length
-    page++
-    total = [...total, ...json]
+      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
+        page,
+    ).then((res) => res.json());
+    lastLength = json.length;
+    page++;
+    total = [...total, ...json];
   }
-  return total.filter(org => org.climate)
+  return total.filter((org) => org.climate);
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations()
+      rawOrganizations: await fetchRawClimateOrganizations(),
     },
-    revalidate: 60 // seconds
-  }
-}
+    revalidate: 60, // seconds
+  };
+};
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index ffbc111be..7374a96db 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge
-} from 'theme-ui'
+  Badge,
+} from "theme-ui";
 
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Features from '../../components/hcb/first/features'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Features from "../../components/hcb/first/features";
 
-import Form from '../../components/hcb/first/form'
-import Testimonials from '../../components/hcb/first/testimonials'
-import Steps from '../../components/hcb/first/steps'
-import Start from '../../components/hcb/start'
-import theme from '@hackclub/theme'
+import Form from "../../components/hcb/first/form";
+import Testimonials from "../../components/hcb/first/testimonials";
+import Steps from "../../components/hcb/first/steps";
+import Start from "../../components/hcb/start";
+import theme from "@hackclub/theme";
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ['70vh', 'none'],
-            textAlign: 'center',
+            minHeight: ["70vh", "none"],
+            textAlign: "center",
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: 'cover',
-            backgroundPosition: 'center center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
+            backgroundSize: "cover",
+            backgroundPosition: "center center",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Box
             sx={{
-              width: '100%',
-              mx: 'auto',
-              px: '16px',
-              backdropFilter: 'blur(1.5px)'
+              width: "100%",
+              mx: "auto",
+              px: "16px",
+              backdropFilter: "blur(1.5px)",
             }}
           >
             <Heading
               sx={{
-                textAlign: 'center',
+                textAlign: "center",
                 mt: [5, null, 6],
-                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
+                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{' '}
+              The ultimate financial tool for{" "}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: theme => theme.colors.blue,
-                  WebkitTextStrokeWidth: '1px',
-                  WebkitTextFillColor: theme => theme.colors.white,
-                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
+                  WebkitTextStroke: (theme) => theme.colors.blue,
+                  WebkitTextStrokeWidth: "1px",
+                  WebkitTextFillColor: (theme) => theme.colors.white,
+                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: 'rgba(132,146,166, 0.5)',
-                color: 'white',
-                fontWeight: 'normal',
+                bg: "rgba(132,146,166, 0.5)",
+                color: "white",
+                fontWeight: "normal",
                 fontSize: 2,
                 mt: 3,
-                mx: 'auto',
-                borderRadius: ['default', null, 'extra']
+                mx: "auto",
+                borderRadius: ["default", null, "extra"],
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ['grid', 'grid', 'flex'],
-                  flexDirection: [null, 'row', 'row'],
-                  gridTemplateColumns: ['1fr', '1fr 1fr']
+                  display: ["grid", "grid", "flex"],
+                  flexDirection: [null, "row", "row"],
+                  gridTemplateColumns: ["1fr", "1fr 1fr"],
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
+                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
+                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: 'center',
-                my: 4
+                textAlign: "center",
+                my: 4,
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: ['column', null, 'row'],
-                justifyContent: 'center',
-                alignItems: 'center'
+                display: "flex",
+                flexDirection: ["column", null, "row"],
+                justifyContent: "center",
+                alignItems: "center",
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx('cyan', 'blue'),
+                  backgroundImage: theme.util.gx("cyan", "blue"),
                   ml: 2,
-                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index 0f304a3a2..fa3da75f3 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
-import { keyframes } from '@emotion/react'
-import FlexCol from '../../components/flex-col'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Icon from '../../components/icon'
-import Tilt from '../../components/tilt'
+import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
+import { useEffect, useRef, useState } from "react";
+import { keyframes } from "@emotion/react";
+import FlexCol from "../../components/flex-col";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Icon from "../../components/icon";
+import Tilt from "../../components/tilt";
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    '#ec3750',
-    '#ff8c37',
-    '#f1c40f',
-    '#33d6a6',
-    '#5bc0de',
-    '#338eda',
-    '#a633d6'
-  ]
+    "#ec3750",
+    "#ff8c37",
+    "#f1c40f",
+    "#33d6a6",
+    "#5bc0de",
+    "#338eda",
+    "#a633d6",
+  ];
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, '0')
+      .padStart(2, "0");
 
-    let final = {}
+    let final = {};
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50)
+      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50);
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000
-      baseX = Math.round(baseX * roundFactor) / roundFactor
-      baseY = Math.round(baseY * roundFactor) / roundFactor
+      const roundFactor = 1_000_000;
+      baseX = Math.round(baseX * roundFactor) / roundFactor;
+      baseY = Math.round(baseY * roundFactor) / roundFactor;
 
-      let boxShadow = ''
+      let boxShadow = "";
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length)
+          baseY * Math.sin((2 * Math.PI * c) / colours.length);
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length)
+          baseY * Math.cos((2 * Math.PI * c) / colours.length);
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`
+        }${hexOpacity},`;
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1)
+      boxShadow = boxShadow.slice(0, -1);
 
-      final[i + '%'] = { boxShadow }
+      final[i + "%"] = { boxShadow };
     }
 
-    return final
+    return final;
   }
 
-  const shadowSpread = glow ? 5 : 0
-  const shadowBlur = glow ? 10 : 0
+  const shadowSpread = glow ? 5 : 0;
+  const shadowBlur = glow ? 10 : 0;
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
-  )
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
+  );
 
-  const borderWidth = '2px'
+  const borderWidth = "2px";
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 2,
 
-          width: '20rem',
+          width: "20rem",
 
           borderWidth,
-          borderRadius: '8px !important',
-          p: '8px !important',
+          borderRadius: "8px !important",
+          p: "8px !important",
 
-          textDecoration: 'none',
-          color: 'inherit',
+          textDecoration: "none",
+          color: "inherit",
 
-          backgroundColor: 'var(--theme-ui-colors-darkless)',
+          backgroundColor: "var(--theme-ui-colors-darkless)",
 
-          '&:hover::after': {
+          "&:hover::after": {
             content: '""',
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: 'inherit',
+            borderRadius: "inherit",
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`
-          }
+            animation: `${animatedBoxShadow} 5s ease infinite`,
+          },
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
-        <Box sx={{ textAlign: 'left' }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
+        <Box sx={{ textAlign: "left" }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               right: 0,
-              translate: '50% -50%',
-              color: 'muted'
+              translate: "50% -50%",
+              color: "muted",
             }}
           />
         )}
       </Flex>
     </Tilt>
-  )
+  );
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding = "2rem", children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gridGap: '2rem',
-        padding
+        width: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gridGap: "2rem",
+        padding,
       }}
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
       {children}
     </Flex>
-  )
+  );
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef()
-  const glowRef = useRef()
+  const gridRef = useRef();
+  const glowRef = useRef();
 
-  const scrollPos = useRef(0)
-  const mousePos = useRef([0, 0])
+  const scrollPos = useRef(0);
+  const mousePos = useRef([0, 0]);
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current
-    ]
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
-  }
+      -mousePos.current[1] + scrollPos.current,
+    ];
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
+  };
 
   useEffect(() => {
-    const handleScroll = e => {
-      scrollPos.current = -window.scrollY / 10
+    const handleScroll = (e) => {
+      scrollPos.current = -window.scrollY / 10;
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
 
-      setGlowMaskPosition()
-    }
+      setGlowMaskPosition();
+    };
 
-    const handleMouseMove = e => {
-      const x = e.clientX
-      const y = e.clientY
-      glowRef.current.style.left = x + 'px'
-      glowRef.current.style.top = y + 'px'
+    const handleMouseMove = (e) => {
+      const x = e.clientX;
+      const y = e.clientY;
+      glowRef.current.style.left = x + "px";
+      glowRef.current.style.top = y + "px";
 
-      mousePos.current = [x, y]
-      setGlowMaskPosition()
-    }
+      mousePos.current = [x, y];
+      setGlowMaskPosition();
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("mousemove", handleMouseMove);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
 
   return (
-    <Box as="main" key="main" sx={{ position: 'relative' }}>
+    <Box as="main" key="main" sx={{ position: "relative" }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: 'fixed',
+          position: "fixed",
           inset: 0,
-          height: '1000%',
+          height: "1000%",
           zIndex: -2,
-          backgroundSize: '20px 20px',
+          backgroundSize: "20px 20px",
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: 'top left',
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
+          backgroundPosition: "top left",
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           zIndex: -2,
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '20rem',
-          height: '20rem',
-          background: 'red',
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "20rem",
+          height: "20rem",
+          background: "red",
           opacity: 0.2,
-          borderRadius: '50%',
-          filter: 'blur(2rem)',
-          translate: '-50% -50%',
+          borderRadius: "50%",
+          filter: "blur(2rem)",
+          translate: "-50% -50%",
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: '20px 20px, 20px 20px, cover',
-          maskPosition: '0px 0px'
+          maskSize: "20px 20px, 20px 20px, cover",
+          maskPosition: "0px 0px",
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: 'center', mt: 6 }}>
+      <Container sx={{ textAlign: "center", mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: 'red',
-                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
+                  color: "red",
+                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{' '}
+                501(c)(3)&nbsp;nonprofit{" "}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {' '}
-                  forms{' '}
+                  {" "}
+                  forms{" "}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: '100px',
-          position: 'relative',
-          width: '100%',
-          overflow: 'hidden',
+          height: "100px",
+          position: "relative",
+          width: "100%",
+          overflow: "hidden",
 
-          '&::after': {
+          "&::after": {
             content: '""',
-            width: '500%',
-            height: '100%',
+            width: "500%",
+            height: "100%",
 
-            position: 'absolute',
-            translate: '-50% 100%',
-            boxShadow: '0 -64px 64px #17171d'
-          }
+            position: "absolute",
+            translate: "-50% 100%",
+            boxShadow: "0 -64px 64px #17171d",
+          },
         }}
       />
       <Footer dark />
     </Box>
-  )
+  );
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 7cc34281a..215bf49c7 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Landing from '../../components/hcb/landing'
-import Features from '../../components/hcb/features'
-import Testimonials from '../../components/hcb/testimonials'
-import Everything from '../../components/hcb/everything'
-import Start from '../../components/hcb/start'
-import Nonprofits from '../../components/hcb/nonprofits'
+import { Box } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Landing from "../../components/hcb/landing";
+import Features from "../../components/hcb/features";
+import Testimonials from "../../components/hcb/testimonials";
+import Everything from "../../components/hcb/everything";
+import Start from "../../components/hcb/start";
+import Nonprofits from "../../components/hcb/nonprofits";
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`
+`;
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`)
-  const stats = await res.json()
+  const res = await fetch(`https://hcb.hackclub.com/stats`);
+  const stats = await res.json();
 
   return {
     props: {
-      stats
+      stats,
     },
-    revalidate: 10
-  }
+    revalidate: 10,
+  };
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index 3e73ceed3..ec7b03953 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/brand-director/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/brand-director/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 604529b56..9a9ed7baf 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'purple')
+        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index cdd39da87..f98dc9691 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index 3732fd873..ca5651437 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'orange')
+        backgroundImage: (theme) => theme.util.gx("red", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 03bbb0f6b..985445df4 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('#516395', '#614385')
+        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -39,10 +48,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
-      <Text sx={{ fontStyle: 'italic' }}>
+      <Text sx={{ fontStyle: "italic" }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -61,41 +70,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          '> div': {
+          "> div": {
             p: 3,
-            fontSize: 2
-          }
+            fontSize: 2,
+          },
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{' '}
+          42 Hack Clubbers{" "}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{' '}
+          </Link>{" "}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{' '}
+          We hosted{" "}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{' '}
-          with people like{' '}
+          </Link>{" "}
+          with people like{" "}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{' '}
-          and{' '}
+          </Link>{" "}
+          and{" "}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -106,7 +115,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{' '}
+          We gave 300 teenagers $50,000 for{" "}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -119,7 +128,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
+        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
         to excite and grow the community.
       </Text>
 
@@ -129,21 +138,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card
               sx={{
                 background:
-                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
-                color: 'white'
+                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
+                color: "white",
               }}
             >
               You're passionate about building technical projects and find
@@ -152,8 +161,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-                color: 'white'
+                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+                color: "white",
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -162,8 +171,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-                color: 'white'
+                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+                color: "white",
               }}
             >
               You have event planning or media production experience and want to
@@ -190,14 +199,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: 'column',
+              flexDirection: "column",
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              '> div': {
+              "> div": {
                 p: 3,
-                fontSize: 2
-              }
+                fontSize: 2,
+              },
             }}
           >
             <Card variant="sunken">
@@ -205,7 +214,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{' '}
+              Support Hack Clubbers in creating and executing{" "}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -215,7 +224,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{' '}
+              Revive{" "}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -249,7 +258,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{' '}
+              Hack Clubbers at{" "}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -267,20 +276,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{' '}
+              The{" "}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{' '}
+              </Link>{" "}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'none', 'block'] }}
+          sx={{ display: ["none", "none", "block"] }}
           showAlt
         />
         <Photo
@@ -288,28 +297,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ['none', 'block', 'block'] }}
+          sx={{ display: ["none", "block", "block"] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{' '}
+          This is not a normal job. For the last 18 months, a{" "}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{' '}
+          </Link>{" "}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{' '}
+          In the{" "}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -319,7 +328,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{' '}
+          you need to have a background in programming, but{" "}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -339,10 +348,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -365,7 +374,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -376,19 +385,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{' '}
+        <strong>How to apply:</strong> Email{" "}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{' '}
+        </Link>{" "}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 4336a9193..97bc4f167 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index 010b66de2..b834ed129 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index b13c5147d..00e50311f 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 421ed3bee..12262272e 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('red', 'purple')
+        backgroundImage: (theme) => theme.util.gx("red", "purple"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index c6a547e9b..1ed1a9630 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '/components/force-theme'
-import Nav from '../../components/nav'
-import Footer from '../../components/footer'
-import Link from 'next/link'
-import Icon from '../../components/icon'
-import Image from 'next/image'
-import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
-import { compact } from 'lodash'
+import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "/components/force-theme";
+import Nav from "../../components/nav";
+import Footer from "../../components/footer";
+import Link from "next/link";
+import Icon from "../../components/icon";
+import Image from "next/image";
+import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
+import { compact } from "lodash";
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType
+  positionType,
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: '100%',
-        textDecoration: 'none',
-        'span > svg': {
-          opacity: '0',
-          transition: '0.3s ease-in-out'
+        width: "100%",
+        textDecoration: "none",
+        "span > svg": {
+          opacity: "0",
+          transition: "0.3s ease-in-out",
+        },
+        "&:hover span > svg": {
+          opacity: "1",
         },
-        '&:hover span > svg': {
-          opacity: '1'
-        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: 'black',
-            m: 0
+            color: "black",
+            m: 0,
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: 'block',
-          textAlign: 'left'
+          display: "block",
+          textAlign: "left",
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
+        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
       </Text>
     </Card>
   </Link>
-)
+);
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: 'black'
+        color: "black",
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          textAlign: 'center',
-          position: 'relative'
+            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          textAlign: "center",
+          position: "relative",
         }}
       >
         <Box
           sx={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1
+            zIndex: -1,
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ['48px', '48px', '72px'],
-              color: 'white'
+              fontSize: ["48px", "48px", "72px"],
+              color: "white",
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: 'smoke',
+              color: "smoke",
               mt: 3,
-              fontSize: ['18px', '24px'],
-              lineHeight: ['1.5', '1.125']
+              fontSize: ["18px", "24px"],
+              lineHeight: ["1.5", "1.125"],
             }}
           >
             <Text
               sx={{
-                bg: 'dark',
-                color: 'green',
-                width: 'fit-content',
+                bg: "dark",
+                color: "green",
+                width: "fit-content",
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1
+                mr: 1,
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{' '}
+            </Text>{" "}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: '64rem',
-            mx: 'auto'
+            maxWidth: "64rem",
+            mx: "auto",
           }}
           align="left"
-          columns={['1fr', '1fr 1fr']}
+          columns={["1fr", "1fr 1fr"]}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map(job => (
+            jobs.items.map((job) => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: 'muted',
-                textAlign: 'center',
-                mx: 'auto',
-                gridColumn: '1 / -1'
+                color: "muted",
+                textAlign: "center",
+                mx: "auto",
+                gridColumn: "1 / -1",
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const data = await fetch(
-    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
-  )
-  const jobs = await data.json()
+    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
+  );
+  const jobs = await data.json();
   return {
     props: {
-      jobs
+      jobs,
     },
-    revalidate: 60
-  }
+    revalidate: 60,
+  };
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index ada773bd2..587388acb 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,10 +1,19 @@
-import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Photo from '../../components/photo'
-import { formatted } from '../../lib/members'
+import {
+  Link,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Grid,
+  Flex,
+  Card,
+} from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Photo from "../../components/photo";
+import { formatted } from "../../lib/members";
 
 const Page = () => (
   <>
@@ -22,10 +31,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('purple', 'red')
+        backgroundImage: (theme) => theme.util.gx("purple", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -39,7 +48,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <Heading
@@ -50,16 +59,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{' '}
+        Starting a nonprofit is hard, so we built{" "}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{' '}
+        </Link>{" "}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{' '}
+        we're a{" "}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -71,12 +80,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{' '}
+        Now, HCB is expanding beyond just Hack Clubbers.{" "}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{' '}
-        from teenage-run hackathons to{' '}
+        </strong>{" "}
+        from teenage-run hackathons to{" "}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -92,9 +101,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{' '}
+        Right now, HCB is the{" "}
         <strong>
-          only part of Hack Club that isn't{' '}
+          only part of Hack Club that isn't{" "}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -103,10 +112,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{' '}
+        </strong>{" "}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{' '}
+        through our{" "}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -125,17 +134,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            '> div': {
+            "> div": {
               p: 3,
-              fontSize: 2
-            }
+              fontSize: 2,
+            },
           }}
         >
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
+              color: "white",
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -144,8 +153,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
-              color: 'white'
+              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
+              color: "white",
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -154,8 +163,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
-              color: 'white'
+              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
+              color: "white",
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -165,8 +174,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
-              color: 'white'
+                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
+              color: "white",
             }}
           >
             Has experience building resilient systems and implementing security
@@ -190,35 +199,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{' '}
+          HCB has been maintained by a{" "}
           <Link href="/team/" target="_blank">
-            {' '}
+            {" "}
             small team
-          </Link>{' '}
+          </Link>{" "}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{' '}
+          engineers and various contractors. The majority of{" "}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{' '}
+          </Link>{" "}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{' '}
+          HCB already powers{" "}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{' '}
-          as well as those of{' '}
+          </Link>{" "}
+          as well as those of{" "}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{' '}
+          </Link>{" "}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -284,7 +293,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -298,14 +307,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{' '}
+          <strong>How to apply:</strong> Email{" "}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{' '}
+          </Link>{" "}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -314,10 +323,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ['column', 'column', 'row'],
+          flexDirection: ["column", "column", "row"],
           gap: 4,
           fontSize: 2,
-          my: 5
+          my: 5,
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -340,7 +349,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{' '}
+            Already, Hack Club is the{" "}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -351,6 +360,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index a8168132f..8f681f582 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('green', 'blue')
+        backgroundImage: (theme) => theme.util.gx("green", "blue"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index a42c2c2c5..4779fbe9c 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import Meta from '@hackclub/meta'
-import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
-import ForceTheme from '../../components/force-theme'
+import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import Meta from "@hackclub/meta";
+import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
+import ForceTheme from "../../components/force-theme";
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: theme => theme.util.gx('pink', 'yellow')
+        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3]
+        fontSize: [2, 3],
       }}
     >
       <JobDescription />
     </Container>
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 2d72049e1..8a88133fe 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: 'dark',
-        color: 'white',
+        bg: "dark",
+        color: "white",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
-        backgroundPosition: 'top center',
-        backgroundSize: 'cover',
-        position: 'relative'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
+        backgroundPosition: "top center",
+        backgroundSize: "cover",
+        position: "relative",
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ['100%', 384, 512],
-            transition: 'transform .125s ease-in-out',
-            ':hover': { transform: 'scale(1.0625)' }
+            width: ["100%", 384, 512],
+            transition: "transform .125s ease-in-out",
+            ":hover": { transform: "scale(1.0625)" },
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: 'cards.translucentDark',
-              color: 'white',
-              p: [null, 3]
+              variant: "cards.translucentDark",
+              color: "white",
+              p: [null, 3],
             },
             h3: { mb: 2 },
-            p: { lineHeight: 'caption' }
+            p: { lineHeight: "caption" },
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3
+              gridColumnEnd: 3,
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{' '}
+              official server, mc.hackclub.com.{" "}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: 'none' }}>
+          <Card sx={{ display: "none" }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
+                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/night.js b/pages/night.js
index eac1473b8..2df1766a4 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import Nav from '../components/nav'
-import SlideDown from '../components/slide-down'
-import FadeIn from '../components/fade-in'
-import Icon from '../components/icon'
-import Footer from '../components/footer'
-import { keyframes } from '@emotion/react'
+  Text,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import Nav from "../components/nav";
+import SlideDown from "../components/slide-down";
+import FadeIn from "../components/fade-in";
+import Icon from "../components/icon";
+import Footer from "../components/footer";
+import { keyframes } from "@emotion/react";
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`
+`;
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`
+`;
 
-const color = '#50E3C2'
+const color = "#50E3C2";
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: 'dark',
-        color: 'muted',
-        textAlign: 'center',
+        bg: "dark",
+        color: "muted",
+        textAlign: "center",
         backgroundImage:
-          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
-        backgroundSize: '512px auto'
+          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
+        backgroundSize: "512px auto",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: '100%',
-          height: '100%',
-          display: 'block',
+          width: "100%",
+          height: "100%",
+          display: "block",
           background:
-            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
-          animation: `${twinkling} 200s linear infinite`
+            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
+          animation: `${twinkling} 200s linear infinite`,
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: 'relative' }}
+        sx={{ position: "relative" }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: 'uppercase',
-            WebkitTextStroke: 'white',
-            WebkitTextStrokeWidth: '2px',
-            WebkitTextFillColor: 'transparent',
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
+            textTransform: "uppercase",
+            WebkitTextStroke: "white",
+            WebkitTextStrokeWidth: "2px",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
           }}
         >
           Hack Night
@@ -99,7 +99,8 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
+          Hack nights are hosted regularly by Hack Clubbers. Come join or start
+          an impromptu Hack session on{" "}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -109,19 +110,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: 'relative',
-          width: '100%',
+          position: "relative",
+          width: "100%",
           maxWidth: 512,
           minHeight: 512,
-          mx: 'auto',
+          mx: "auto",
           mt: [4, 5],
           img: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: '100%'
-          }
+            maxWidth: "100%",
+          },
         }}
       >
         <Image
@@ -135,13 +136,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/opensource.js b/pages/opensource.js
index 348579974..a5fae8b27 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link
-} from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Icon from '@hackclub/icons'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import Footer from '../components/footer'
-import { Octokit } from '@octokit/rest'
-import ForceTheme from '../components/force-theme'
+  Link,
+} from "theme-ui";
+import Meta from "@hackclub/meta";
+import Icon from "@hackclub/icons";
+import Head from "next/head";
+import Nav from "../components/nav";
+import Footer from "../components/footer";
+import { Octokit } from "@octokit/rest";
+import ForceTheme from "../components/force-theme";
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: 'flex',
-      alignItems: 'center',
-      color: 'black',
-      textDecoration: 'none',
+      display: "flex",
+      alignItems: "center",
+      color: "black",
+      textDecoration: "none",
       pr: [3, 3],
-      '> svg': {
-        opacity: '0',
-        transition: '0.3s ease-in-out'
+      "> svg": {
+        opacity: "0",
+        transition: "0.3s ease-in-out",
+      },
+      "&:hover > svg": {
+        opacity: "1",
       },
-      '&:hover > svg': {
-        opacity: '1'
-      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={'external'} size={24} color="placeholder" />
+    <Icon glyph={"external"} size={24} color="placeholder" />
   </Card>
-)
+);
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: 'primary', mt: [2.5, 4] }}
+          sx={{ color: "primary", mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map(account => (
+        {transparentAccounts.map((account) => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
+      <Text sx={{ fontSize: 2, color: "placeholder" }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
+        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: 'block', mb: 3 }}
+        sx={{ fontSize: 2, display: "block", mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count
-          if (keyA < keyB) return 1
-          if (keyA > keyB) return -1
-          return 0
+            keyB = b.stargazers_count;
+          if (keyA < keyB) return 1;
+          if (keyA > keyB) return -1;
+          return 0;
         })
-        .map(repo => (
+        .map((repo) => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: 'center',
-              color: 'black',
-              textDecoration: 'none'
+              alignItems: "center",
+              color: "black",
+              textDecoration: "none",
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: 'nowrap',
-                minWidth: 'fit-content'
+                whiteSpace: "nowrap",
+                minWidth: "fit-content",
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: 'muted',
-                whiteSpace: ' nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                color: "muted",
+                whiteSpace: " nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                ''
+                "",
               )}
             </Text>
-            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
+            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,23 +234,25 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB
-  })
-  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'hackclub'
-  })
+    auth: process.env.GITHUB,
+  });
+  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
+    org: "hackclub",
+  });
 
   const transparentAccounts = (
-    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
-      res.json()
+    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
+      res.json(),
     )
-  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
+  ).filter(
+    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
+  );
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 }
+  return { props: { repos, transparentAccounts }, revalidate: 30 };
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 39f92e00f..3dc091a81 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../../components/nav'
-import ForceTheme from '../../components/force-theme'
-import Footer from '../../components/footer'
-import ReactBeforeSliderComponent from 'react-before-after-slider-component'
-import 'react-before-after-slider-component/dist/build.css'
-import Fade from 'react-reveal/Fade'
-import Slide from 'react-reveal/Slide'
-import Marquee from 'react-marquee-slider'
-import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
-import HackCamp from '../../public/donate/sf.jpg'
-import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
-import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
-import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
-import HackPenn from '../../public/donate/0color_pop.jpg'
-import ElonAMA from '../../public/donate/elon.jpg'
-import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
-import Flagship from '../../public/donate/flagship.png'
-import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
-import HackCamp2020 from '../../public/donate/0img_6447.jpg'
-import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
-import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
-import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
-import GoldenTrain from '../../public/home/golden-train.png'
+  Text,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../../components/nav";
+import ForceTheme from "../../components/force-theme";
+import Footer from "../../components/footer";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import "react-before-after-slider-component/dist/build.css";
+import Fade from "react-reveal/Fade";
+import Slide from "react-reveal/Slide";
+import Marquee from "react-marquee-slider";
+import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
+import HackCamp from "../../public/donate/sf.jpg";
+import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
+import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
+import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
+import HackPenn from "../../public/donate/0color_pop.jpg";
+import ElonAMA from "../../public/donate/elon.jpg";
+import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
+import Flagship from "../../public/donate/flagship.png";
+import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
+import HackCamp2020 from "../../public/donate/0img_6447.jpg";
+import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
+import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
+import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
+import GoldenTrain from "../../public/home/golden-train.png";
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: '160px', overflow: 'hidden' }}>
-    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
+  <Box sx={{ height: "160px", overflow: "hidden" }}>
+    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={'image-' + index}
+            key={"image-" + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
+    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={'image-' + index}
+            key={"image-" + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-)
+);
 
 const data = [
-  { name: '3452 Members', Teenagers: 3452, year: '2018' },
-  { name: '6932 Members', Teenagers: 6932, year: '2019' },
-  { name: '13530 Members', Teenagers: 13530, year: '2020' },
-  { name: '18347 Members', Teenagers: 18347, year: '2021' },
-  { name: '21790 Members', Teenagers: 21790, year: '2022' }
-]
+  { name: "3452 Members", Teenagers: 3452, year: "2018" },
+  { name: "6932 Members", Teenagers: 6932, year: "2019" },
+  { name: "13530 Members", Teenagers: 13530, year: "2020" },
+  { name: "18347 Members", Teenagers: 18347, year: "2021" },
+  { name: "21790 Members", Teenagers: 21790, year: "2022" },
+];
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`
+`;
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: '';
+    content: "";
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`
+`;
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: '20px !important',
+        padding: "20px !important",
         my: 2,
-        textAlign: 'center',
-        backgroundColor: 'elevated',
+        textAlign: "center",
+        backgroundColor: "elevated",
         backgroundImage: `url('${background}')`,
-        backgroundSize: '25px 25px',
-        backgroundRepeat: 'repeat',
-        backgroundPosition: '10% -20%',
-        display: 'flex',
+        backgroundSize: "25px 25px",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "10% -20%",
+        display: "flex",
         gap: 2,
-        textAlign: 'left',
-        fontSize: ['14px', '16px', '18px']
+        textAlign: "left",
+        fontSize: ["14px", "16px", "18px"],
       }}
     >
-      <Text as="h2" sx={{ color: '#ec3750' }}>
+      <Text as="h2" sx={{ color: "#ec3750" }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  )
-}
+  );
+};
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: 'auto' }}>
-        <Heading as="h2" sx={{ textAlign: 'center' }}>
+      <Box sx={{ my: "auto" }}>
+        <Heading as="h2" sx={{ textAlign: "center" }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
+          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: 'visible'
-              }
+                overflow: "visible",
+              },
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  )
-}
+  );
+};
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
-}
+  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
+};
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: '1px solid #e0e6ed',
-          width: '100%',
-          my: [4, 5]
+          borderBottom: "1px solid #e0e6ed",
+          width: "100%",
+          my: [4, 5],
         }}
       ></Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: '1.5em',
-        color: '#ec3750',
-        lineHeight: '1em'
+        fontSize: "1.5em",
+        color: "#ec3750",
+        lineHeight: "1em",
       }}
     >
       {children}
     </Text>
-  )
-}
+  );
+};
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: 'snow',
-          padding: '5px 10px',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center'
+          backgroundColor: "snow",
+          padding: "5px 10px",
+          borderRadius: "50px",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: '100%',
-              width: '20px',
-              height: '20px',
+              borderRadius: "100%",
+              width: "20px",
+              height: "20px",
               backgroundImage: `url(${logo})`,
-              backgroundSize: 'cover',
-              marginRight: 1
+              backgroundSize: "cover",
+              marginRight: 1,
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  )
-}
+  );
+};
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: '10px',
-        width: '100%',
-        height: '300px',
+        borderRadius: "10px",
+        width: "100%",
+        height: "300px",
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'top center',
-        position: 'relative'
+        backgroundSize: "cover",
+        backgroundPosition: "top center",
+        position: "relative",
       }}
     >
       <Box
         sx={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          width: 'calc(100% - 40px)',
-          color: 'white'
+          position: "absolute",
+          bottom: "20px",
+          left: "20px",
+          width: "calc(100% - 40px)",
+          color: "white",
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 const FIRST_IMAGE = {
-  imageUrl: '/philanthropy/after1.png'
-}
+  imageUrl: "/philanthropy/after1.png",
+};
 const SECOND_IMAGE = {
-  imageUrl: '/philanthropy/before.png'
-}
+  imageUrl: "/philanthropy/before.png",
+};
 
 const delimiterIconStyles = {
-  width: '50px',
-  height: '50px',
-  backgroundSize: '110%',
-  backgroundPosition: 'center',
-  borderRadius: 'none',
+  width: "50px",
+  height: "50px",
+  backgroundSize: "110%",
+  backgroundPosition: "center",
+  borderRadius: "none",
   backgroundImage:
-    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
-}
+    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
+};
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: 'relative',
-          width: '100%',
-          mx: 'auto',
-          height: 'auto'
+          position: "relative",
+          width: "100%",
+          mx: "auto",
+          height: "auto",
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  )
-}
+  );
+};
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: 'hidden' }}>
+      <Box sx={{ overflowX: "hidden" }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: 'relative' }}>
+        <Header sx={{ position: "relative" }}>
           <Box
             sx={{
-              background: 'rgba(0,0,0, 0.8)',
+              background: "rgba(0,0,0, 0.8)",
               zIndex: 1,
-              position: 'relative',
-              color: 'white!important',
-              height: '480px'
+              position: "relative",
+              color: "white!important",
+              height: "480px",
             }}
-            pt={[5, 5, '110px']}
+            pt={[5, 5, "110px"]}
           >
             <Box
               sx={{
-                maxWidth: '64rem',
-                mx: 'auto',
+                maxWidth: "64rem",
+                mx: "auto",
                 zIndex: 1,
-                position: 'relative'
+                position: "relative",
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: '48rem' }}>
+              <Container sx={{ maxWidth: "48rem" }}>
                 <Heading
                   sx={{
-                    fontSize: ['42px', '54px', '72px'],
+                    fontSize: ["42px", "54px", "72px"],
                     my: 2,
-                    color: 'white'
+                    color: "white",
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ['22px', '23px', '28px'],
-                    maxWidth: '40rem',
-                    color: 'white'
+                    fontSize: ["22px", "23px", "28px"],
+                    maxWidth: "40rem",
+                    color: "white",
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ['100%', 'auto'] }}
+                  sx={{ width: ["100%", "auto"] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: 'absolute',
+              position: "absolute",
               top: 0,
               zIndex: 0,
-              width: '100%',
-              display: 'block'
+              width: "100%",
+              display: "block",
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala
+                Kerala,
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun
+                ZephyrFun,
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
-            'p, li, a': {
-              fontSize: '1.3em'
-            }
+            width: "container",
+            margin: "auto",
+            "p, li, a": {
+              fontSize: "1.3em",
+            },
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: 'center'
+                textAlign: "center",
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{' '}
+              solvers.{" "}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: '#ec3750',
-                      textDecoration: 'none',
-                      fontWeight: '700',
-                      fontSize: '1.2em'
+                      color: "#ec3750",
+                      textDecoration: "none",
+                      fontWeight: "700",
+                      fontSize: "1.2em",
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: '1em !important',
-                  width: 'fit-content',
-                  float: 'right',
-                  mt: 2
+                  fontSize: "1em !important",
+                  width: "fit-content",
+                  float: "right",
+                  mt: 2,
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: '100vw',
-            backgroundColor: 'snow',
+            width: "100vw",
+            backgroundColor: "snow",
             py: 4,
             my: 5,
-            display: 'flex',
-            justifyContent: 'center'
+            display: "flex",
+            justifyContent: "center",
           }}
         >
-          <Container sx={{ textAlign: 'center' }}>
+          <Container sx={{ textAlign: "center" }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
+              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: '90%',
-                  margin: 'auto'
+                  width: "90%",
+                  margin: "auto",
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: '100%' }}
+                  sx={{ borderRadius: "100%" }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: 'container',
-            margin: 'auto',
+            width: "container",
+            margin: "auto",
             px: [2, 3, 4],
-            'p, li, a': {
-              fontSize: '1.3em'
+            "p, li, a": {
+              fontSize: "1.3em",
             },
             h1: {
-              fontSize: ['28px', '28px', '36px']
-            }
+              fontSize: ["28px", "28px", "36px"],
+            },
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
+            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: 'flex', alignItems: 'center' }}
+                sx={{ display: "flex", alignItems: "center" }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
+          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: '1em',
-                          fontSize: '1.1em !important',
-                          fontSize: '1.1em !important'
+                          lineHeight: "1em",
+                          fontSize: "1.1em !important",
+                          fontSize: "1.1em !important",
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
                     <Box
                       sx={{
-                        borderRadius: '100%',
-                        width: '40px',
-                        height: '40px',
+                        borderRadius: "100%",
+                        width: "40px",
+                        height: "40px",
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: 'cover',
-                        marginRight: 2
+                        backgroundSize: "cover",
+                        marginRight: 2,
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
+                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: 'muted', fontSize: '90%' }}>
+                <Text sx={{ color: "muted", fontSize: "90%" }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: 'muted' }}>
+              <Box sx={{ color: "muted" }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
+                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: 'slate',
-                  textDecoration: 'none',
-                  fontSize: '1em !important',
-                  backgroundColor: 'snow',
-                  padding: '5px 10px',
-                  borderRadius: '50px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  transition: '0.5s ease',
-                  ':hover': {
-                    backgroundColor: '#e0e6ed'
-                  }
+                  color: "slate",
+                  textDecoration: "none",
+                  fontSize: "1em !important",
+                  backgroundColor: "snow",
+                  padding: "5px 10px",
+                  borderRadius: "50px",
+                  display: "flex",
+                  alignItems: "center",
+                  transition: "0.5s ease",
+                  ":hover": {
+                    backgroundColor: "#e0e6ed",
+                  },
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
+                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
+                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: '48px', width: '48px' }}
+                    sx={{ height: "48px", width: "48px" }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
+          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, '2fr 1fr', '2fr 1fr']}
+              columns={[1, "2fr 1fr", "2fr 1fr"]}
               my={4}
-              sx={{ color: 'muted' }}
+              sx={{ color: "muted" }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: '70%' }}>
+                <Text as="p" sx={{ width: "70%" }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ':link': {
-                      color: 'inherit',
-                      textDecoration: 'none'
-                    }
+                    ":link": {
+                      color: "inherit",
+                      textDecoration: "none",
+                    },
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: '1em !important' }}
+              sx={{ fontSize: "1em !important" }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
+              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  )
-}
+  );
+};
 
-export default Philanthropy
+export default Philanthropy;
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 81ee238ca..12d2ec44d 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import styled from '@emotion/styled'
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar
-} from 'theme-ui'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import ForceTheme from '../../components/force-theme'
-import Nav from '../../components/nav'
-import Sponsors from '../../components/donate/sponsors'
-import donors from '../../components/donate/donors.json'
-import Footer from '../../components/footer'
+  Avatar,
+} from "theme-ui";
+import Photo from "../../components/photo";
+import Image from "next/image";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import ForceTheme from "../../components/force-theme";
+import Nav from "../../components/nav";
+import Sponsors from "../../components/donate/sponsors";
+import donors from "../../components/donate/donors.json";
+import Footer from "../../components/footer";
 
 const Header = styled(Box)`
-  background: url('/pattern.svg');
-`
+  background: url("/pattern.svg");
+`;
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`
+`;
 Sheet.defaultProps = {
   sx: {
-    bg: 'rgba(255, 255, 255, 0.875)',
+    bg: "rgba(255, 255, 255, 0.875)",
     p: [3, 4],
-    color: 'black',
+    color: "black",
     width: 1,
-    mb: 4
-  }
-}
+    mb: 4,
+  },
+};
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? '3fr 2fr' : '2fr 3fr'};
+      reverse ? "3fr 2fr" : "2fr 3fr"};
   }
-`
+`;
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: '52rem',
+    maxWidth: "52rem",
     fontSize: 3,
     p: [4, 5],
-    color: 'white'
-  }
-}
-const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
+    color: "white",
+  },
+};
+const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: 'black',
-  style: { position: 'relative' }
-}
-const content = { maxWidth: 48, mx: 0, color: 'black' }
+  color: "black",
+  style: { position: "relative" },
+};
+const content = { maxWidth: 48, mx: 0, color: "black" };
 
-const title = 'Donate'
+const title = "Donate";
 const desc =
-  'Contribute today to empower the next generation and help start a coding club at every high school.'
+  "Contribute today to empower the next generation and help start a coding club at every high school.";
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`
+`;
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`
+`;
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
+    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
       {name}
     </Text>
   </DonorCardBase>
-)
+);
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    )
+    );
   } else {
-    return <DonorCard name={name} />
+    return <DonorCard name={name} />;
   }
-}
+};
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById('sprig-donation').scrollIntoView()
+      window.document.getElementById("sprig-donation").scrollIntoView();
     }
-  }, [sprig])
+  }, [sprig]);
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: 'relative' }}>
+      <Header sx={{ position: "relative" }}>
         <Box
           sx={{
-            background: 'rgba(0,0,0, 0.8)',
+            background: "rgba(0,0,0, 0.8)",
             zIndex: 1,
-            position: 'relative',
-            color: 'white!important',
-            height: '600px'
+            position: "relative",
+            color: "white!important",
+            height: "600px",
           }}
-          pt={[5, 5, '110px']}
+          pt={[5, 5, "110px"]}
         >
           <Box
             sx={{
-              maxWidth: '64rem',
-              mx: 'auto',
+              maxWidth: "64rem",
+              mx: "auto",
               zIndex: 1,
-              position: 'relative'
+              position: "relative",
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: '48rem' }}>
+            <Container sx={{ maxWidth: "48rem" }}>
               <Heading
                 sx={{
-                  fontSize: ['42px', '54px', '72px'],
+                  fontSize: ["42px", "54px", "72px"],
                   my: 2,
-                  color: 'white'
+                  color: "white",
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ['22px', '23px', '28px'],
-                  maxWidth: '40rem',
-                  color: 'white'
+                  fontSize: ["22px", "23px", "28px"],
+                  maxWidth: "40rem",
+                  color: "white",
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ['100%', 'auto'] }}
+                sx={{ width: ["100%", "auto"] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
+                sx={{ mt: 1, display: "block", opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map(name => (
+            {Object.keys(donors).map((name) => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: '1em !important',
-            background: 'slate',
-            textAlign: 'center'
+            fontSize: "1em !important",
+            background: "slate",
+            textAlign: "center",
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes('gl')
-    }
-  }
+      sprig: Object.keys(context.query).includes("gl"),
+    },
+  };
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index e1fe39120..a16d99192 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
-import Nav from '../components/nav'
-import styled from '@emotion/styled'
-import Footer from '../components/footer'
-import NextLink from 'next/link'
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
+import Nav from "../components/nav";
+import styled from "@emotion/styled";
+import Footer from "../components/footer";
+import NextLink from "next/link";
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`
+`;
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`
+`;
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: 'white';
+  color: "white";
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`
+`;
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: 'black';
+  color: "black";
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`
+`;
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`
+`;
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
+    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
+            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: '400',
-                  marginBlockStart: '0em',
-                  fontSize: ['16px', '18px'],
-                  textTransform: 'uppercase'
+                  fontWeight: "400",
+                  marginBlockStart: "0em",
+                  fontSize: ["16px", "18px"],
+                  textTransform: "uppercase",
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: '800',
-                  marginBlockStart: '0em',
-                  textTransform: 'uppercase'
+                  fontWeight: "800",
+                  marginBlockStart: "0em",
+                  textTransform: "uppercase",
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{' '}
+            </strong>{" "}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{' '}
+            did the best programmers. Through our{" "}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: t => t.util.gx('orange', 'red'),
-            margin: 'auto',
-            width: '600px',
-            maxWidth: '90%',
+            backgroundImage: (t) => t.util.gx("orange", "red"),
+            margin: "auto",
+            width: "600px",
+            maxWidth: "90%",
             mb: 4,
             borderRadius: 8,
-            color: 'white',
-            textAlign: 'center',
-            p: 4
+            color: "white",
+            textAlign: "center",
+            p: 4,
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: 'white',
-              color: 'red',
-              display: ['block', 'inline-block'],
-              mx: 'auto'
+              bg: "white",
+              color: "red",
+              display: ["block", "inline-block"],
+              mx: "auto",
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: 'white', color: 'red' }} as="a">
+            <Button sx={{ bg: "white", color: "red" }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  )
+  );
 }
diff --git a/pages/press.js b/pages/press.js
index feb586304..681649900 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import Press from '../components/press.mdx'
-import { Logo } from './brand'
+import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import Press from "../components/press.mdx";
+import { Logo } from "./brand";
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: 'sheet',
-        color: 'text',
+        bg: "sheet",
+        color: "text",
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: 'center'
+        textAlign: "center",
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, 'copyUltra'],
-        h2: { variant: 'text.headline' }
+        maxWidth: [null, "copyUltra"],
+        h2: { variant: "text.headline" },
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          '> p': { maxWidth: 'copy' },
-          h2: { variant: 'text.headline', mt: 4 }
+          "> p": { maxWidth: "copy" },
+          h2: { variant: "text.headline", mt: 4 },
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
         {[
-          'flag-standalone',
-          'flag-orpheus-top',
-          'flag-orpheus-left',
-          'flag-standalone-bw',
+          "flag-standalone",
+          "flag-orpheus-top",
+          "flag-orpheus-left",
+          "flag-standalone-bw",
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          'icon-rounded',
-          'icon-square'
-        ].map(key => (
+          "icon-rounded",
+          "icon-square",
+        ].map((key) => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 89c0ab734..3d7e8aec9 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('blue', 'green')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("blue", "green"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, '82px'],
+            fontSize: [5, 6, null, "82px"],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Tom and Theresa{' '}
-          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
+          Tom and Theresa{" "}
+          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 9096bd3ae..8a8e853b2 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  Text,
+} from "theme-ui";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
+  DatePill,
+} from "../components/announcements/pills";
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('yellow', 'red')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {''} for more students to have opportunities like I had as a young
+          {""} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: 'inline-flex' }}>
+        <Text variant="headline" sx={{ display: "inline-flex" }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default Page
+export default Page;
diff --git a/pages/relon.js b/pages/relon.js
index ad503dd4a..c211c2296 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text
-} from 'theme-ui'
+  Text,
+} from "theme-ui";
 import {
   PillHolder,
   AuthorPill,
-  DatePill
-} from '../components/announcements/pills'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import styled from '@emotion/styled'
-import theme from '../lib/theme'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import ForceTheme from '../components/force-theme'
-import Footer from '../components/footer'
-import ElonCopy from '../components/announcements/relon.mdx'
-import Amount from '../components/announcements/amount'
-import SlackCTA from '../components/announcements/cta'
-import AnnouncementHolder from '../components/announcements/holder'
+  DatePill,
+} from "../components/announcements/pills";
+import Head from "next/head";
+import NextLink from "next/link";
+import styled from "@emotion/styled";
+import theme from "../lib/theme";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import ForceTheme from "../components/force-theme";
+import Footer from "../components/footer";
+import ElonCopy from "../components/announcements/relon.mdx";
+import Amount from "../components/announcements/amount";
+import SlackCTA from "../components/announcements/cta";
+import AnnouncementHolder from "../components/announcements/holder";
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`
+`;
 
-const RelonLink = props => {
-  const { href } = props
+const RelonLink = (props) => {
+  const { href } = props;
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  )
-}
+  );
+};
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: 'rgb(104, 41, 205)',
-        backgroundImage: theme => theme.util.gx('purple', 'orange')
+        bg: "rgb(104, 41, 205)",
+        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
       }}
     >
-      <Container sx={{ textAlign: 'center', color: 'white' }}>
+      <Container sx={{ textAlign: "center", color: "white" }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: 'currentColor',
-              WebkitTextStrokeWidth: ['2px', '3px'],
-              WebkitTextFillColor: 'transparent'
-            }
+              WebkitTextStroke: "currentColor",
+              WebkitTextStrokeWidth: ["2px", "3px"],
+              WebkitTextFillColor: "transparent",
+            },
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-)
+);
 
-export default RelonPage
+export default RelonPage;
diff --git a/pages/santa.js b/pages/santa.js
index 9f16c3451..b7060a64d 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link
-} from 'theme-ui'
-import styled from '@emotion/styled'
-import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
-import FadeIn from '../components/fade-in'
-import { keyframes } from '@emotion/react'
-import { useState } from 'react'
+  Link,
+} from "theme-ui";
+import styled from "@emotion/styled";
+import Snowfall from "react-snowfall";
+import Footer from "../components/footer";
+import FadeIn from "../components/fade-in";
+import { keyframes } from "@emotion/react";
+import { useState } from "react";
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`
+`;
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`
+`;
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`
+`;
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`
+`;
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`
+`;
 
 const Page = () => (
-  <Box sx={{ overflowX: 'hidden' }}>
+  <Box sx={{ overflowX: "hidden" }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
+            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-)
-export default Page
+);
+export default Page;
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: 'grid',
-        width: ['full', 512],
-        bg: 'white',
-        borderRadius: 'extra',
-        mx: 'auto',
+        display: "grid",
+        width: ["full", 512],
+        bg: "white",
+        borderRadius: "extra",
+        mx: "auto",
         p: 4,
-        mt: 4
+        mt: 4,
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  )
+  );
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: 'smoke',
-          color: 'black'
+          bg: "smoke",
+          color: "black",
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  )
+  );
 }
 
 function Signup() {
-  const [values, setValues] = useState({})
+  const [values, setValues] = useState({});
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
+      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: 'left', color: 'muted' }}>
-        Be sure to check out the{' '}
+      <Text sx={{ textAlign: "left", color: "muted" }}>
+        Be sure to check out the{" "}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: 'blue' }}
+          sx={{ color: "blue" }}
         >
           rules
-        </Link>{' '}
+        </Link>{" "}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={e => setValues({ ...values, name: e.target.value })}
+        onChange={(e) => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={e => setValues({ ...values, likes: e.target.value })}
+        onChange={(e) => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={e => setValues({ ...values, dislikes: e.target.value })}
+        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter(n => n !== '').length
+      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter((n) => n !== "").length
       } fields to sign up`}</Button>
     </Base>
-  )
+  );
 }
diff --git a/pages/ship.js b/pages/ship.js
index 0bb747b71..dc109c0d4 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex
-} from 'theme-ui'
-import NextLink from 'next/link'
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
-import SlideUp from '../components/slide-up'
-import Why from '../components/ship/why.mdx'
-import Icon from '../components/icon'
-import Posts from '../components/posts'
-import Footer from '../components/footer'
-import { timeSince } from '../lib/dates'
-import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/react'
-import { thousands } from '../lib/members'
+  Flex,
+} from "theme-ui";
+import NextLink from "next/link";
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
+import SlideUp from "../components/slide-up";
+import Why from "../components/ship/why.mdx";
+import Icon from "../components/icon";
+import Posts from "../components/posts";
+import Footer from "../components/footer";
+import { timeSince } from "../lib/dates";
+import { orderBy, filter, take, map, uniq, reverse } from "lodash";
+import { keyframes } from "@emotion/react";
+import { thousands } from "../lib/members";
 
-const ShipBadge = props => (
+const ShipBadge = (props) => (
   <Badge
     as="mark"
     sx={{
-      bg: '#FF62DC',
-      color: 'inherit',
-      fontSize: 'inherit',
-      display: 'inline-block',
-      borderRadius: 'default',
+      bg: "#FF62DC",
+      color: "inherit",
+      fontSize: "inherit",
+      display: "inline-block",
+      borderRadius: "default",
       px: [2, 3],
       py: 1,
-      ...props.sx
+      ...props.sx,
     }}
     {...props}
   />
-)
+);
 
 const waves = keyframes({
-  '0%': { backgroundPositionX: '0' },
-  '100%': { backgroundPositionX: '-100%' }
-})
+  "0%": { backgroundPositionX: "0" },
+  "100%": { backgroundPositionX: "-100%" },
+});
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: 'blue',
-        backgroundImage: t =>
+        bg: "blue",
+        backgroundImage: (t) =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: 'white',
-        textAlign: 'center',
-        py: [5, 6]
+        color: "white",
+        textAlign: "center",
+        py: [5, 6],
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
-          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+          maxWidth: [null, null, "copyPlus", "copyUltra"],
+          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
         }}
       >
-        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: 'left',
+            textAlign: "left",
             div: { p: [3, 4] },
-            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 }
+            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 },
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: 'blue',
-        color: 'white',
+        bg: "blue",
+        color: "white",
         py: 4,
-        backgroundImage: 'url(/ship/wave.svg)',
-        backgroundSize: '200% auto',
-        '@media (prefers-reduced-motion: no-preference)': {
-          animation: `${waves} 15s linear forwards infinite`
-        }
+        backgroundImage: "url(/ship/wave.svg)",
+        backgroundSize: "200% auto",
+        "@media (prefers-reduced-motion: no-preference)": {
+          animation: `${waves} 15s linear forwards infinite`,
+        },
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: 'center' }}
+        sx={{ px: 3, mb: 4, textAlign: "center" }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: 'black',
-        bg: 'white',
-        py: [4, 5]
+        color: "black",
+        bg: "white",
+        py: [4, 5],
       }}
     >
-      <Container variant="copy" sx={{ textAlign: 'center' }}>
-        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
+      <Container variant="copy" sx={{ textAlign: "center" }}>
+        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-)
+);
 
-export default ShipPage
+export default ShipPage;
 
 export const getStaticProps = async () => {
-  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
-    .then(r => r.json())
-    .then(posts =>
-      filter(posts, p =>
-        ['jpg', 'jpeg', 'png'].includes(
-          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
-        )
-      )
+  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
+    .then((r) => r.json())
+    .then((posts) =>
+      filter(posts, (p) =>
+        ["jpg", "jpeg", "png"].includes(
+          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
+        ),
+      ),
     )
-    .then(posts => orderBy(posts, 'postedAt', 'desc'))
-    .then(posts => take(posts, 24))
-  return { props: { posts }, revalidate: 2 }
-}
+    .then((posts) => orderBy(posts, "postedAt", "desc"))
+    .then((posts) => take(posts, 24));
+  return { props: { posts }, revalidate: 2 };
+};
diff --git a/pages/slack.js b/pages/slack.js
index 2f60e4e9e..36ddce9be 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from '@emotion/react'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import NextLink from 'next/link'
-import useSWR from 'swr'
-import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
-import Nav from '../components/nav'
-import Header from '../components/slack/header'
-import SlackEvents from '../components/slack/slack-events'
-import Stat from '../components/stat'
-import fetcher from '../lib/fetcher'
-import { formatted, thousands } from '../lib/members'
+import { keyframes } from "@emotion/react";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import NextLink from "next/link";
+import useSWR from "swr";
+import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import Icon from "../components/icon";
+import Nav from "../components/nav";
+import Header from "../components/slack/header";
+import SlackEvents from "../components/slack/slack-events";
+import Stat from "../components/stat";
+import fetcher from "../lib/fetcher";
+import { formatted, thousands } from "../lib/members";
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: '-32px bottom' },
-  to: { backgroundPosition: '32px bottom' }
-})
+  from: { backgroundPosition: "-32px bottom" },
+  to: { backgroundPosition: "32px bottom" },
+});
 
-const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    'https://jia.haas.hackclub.com/api/currentNumber',
+    "https://jia.haas.hackclub.com/api/currentNumber",
     fetcher,
-    { refreshInterval: 10_000 }
-  )
+    { refreshInterval: 10_000 },
+  );
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: 'span 2' }}
+            sx={{ gridColumn: "span 2" }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            '> div': {
+            "> div": {
               px: [2, 3],
               py: 4,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gridColumn: ['span 1', 'span 3']
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gridColumn: ["span 1", "span 3"],
             },
             a: {
-              position: 'relative',
-              ':hover,:focus': {
+              position: "relative",
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
             },
             h3: {
-              variant: 'text.headline',
-              color: 'white',
-              lineHeight: 'title',
+              variant: "text.headline",
+              color: "white",
+              lineHeight: "title",
               m: 0,
-              '+ p': {
+              "+ p": {
                 mt: 2,
-                color: 'white',
+                color: "white",
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: 'caption'
-              }
-            }
+                lineHeight: "caption",
+              },
+            },
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, 'span 2'],
-              gridColumn: ['span 2', 'span 3'],
-              maxHeight: '100%',
-              overflow: 'hidden'
+              gridRow: [null, "span 2"],
+              gridColumn: ["span 2", "span 3"],
+              maxHeight: "100%",
+              overflow: "hidden",
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: 'red',
-                textTransform: 'uppercase',
-                letterSpacing: 'headline'
+                color: "red",
+                textTransform: "uppercase",
+                letterSpacing: "headline",
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: 'italic',
-                mb: '16px'
+                fontStyle: "italic",
+                mb: "16px",
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ['span 2', 'span 5'],
-                bg: 'blue',
-                backgroundImage: t => t.util.gx('cyan', 'blue')
+                gridColumn: ["span 2", "span 5"],
+                bg: "blue",
+                backgroundImage: (t) => t.util.gx("cyan", "blue"),
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 5'],
-              bg: 'dark',
-              backgroundImage: t => t.util.gx('yellow', 'orange')
+              gridColumn: ["span 2", "span 5"],
+              bg: "dark",
+              backgroundImage: (t) => t.util.gx("yellow", "orange"),
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ['span 2 !important', 'span 2 !important'],
-              gridRow: ['span 1 !important', 'span 3 !important'],
-              writingMode: ['lr-tb', 'tb-rl']
+              gridColumn: ["span 2 !important", "span 2 !important"],
+              gridRow: ["span 1 !important", "span 3 !important"],
+              writingMode: ["lr-tb", "tb-rl"],
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
-              We’re at{' '}
+            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
+              We’re at{" "}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : '???'}
+                {millionCount ? withCommas(millionCount.number) : "???"}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
-              backgroundColor: '#FEC62E',
-              backgroundPosition: 'center center',
-              backgroundRepeat: 'no-repeat',
-              backgroundSize: '100% auto',
-              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
-              h3: { opacity: 0 }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
+              backgroundColor: "#FEC62E",
+              backgroundPosition: "center center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "100% auto",
+              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
+              h3: { opacity: 0 },
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
-              backgroundSize: '100%',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2', 'span 3 !important']
+                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
+              backgroundSize: "100%",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2", "span 3 !important"],
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: 'dark',
+              bg: "dark",
               backgroundImage:
-                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              textShadow: 'text',
-              gridColumn: ['span 2 !important', 'span 4 !important']
+                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              textShadow: "text",
+              gridColumn: ["span 2 !important", "span 4 !important"],
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: 'text.title',
-              color: 'white',
-              my: 0
+              variant: "text.title",
+              color: "white",
+              my: 0,
             },
             p: {
-              color: 'white',
+              color: "white",
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: 'caption',
-              mt: 2
+              lineHeight: "caption",
+              mt: 2,
             },
             a: {
-              position: 'relative',
+              position: "relative",
               pb: [4, 5],
-              ':hover,:focus': {
+              ":hover,:focus": {
                 svg: {
-                  transform: 'translateX(28px) translateY(-28px)',
-                  opacity: 0
-                }
-              }
+                  transform: "translateX(28px) translateY(-28px)",
+                  opacity: 0,
+                },
+              },
             },
             svg: {
-              position: 'absolute',
+              position: "absolute",
               top: 2,
               right: 2,
-              fill: 'white',
+              fill: "white",
               transition:
-                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
-            }
+                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+            },
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#000',
+                bg: "#000",
                 backgroundImage:
-                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
-                backgroundSize: '100% auto',
-                textShadow: 'text'
+                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
+                backgroundSize: "100% auto",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: 'dark',
+                bg: "dark",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
-                backgroundPosition: 'bottom center',
-                backgroundSize: 'cover',
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
+                backgroundPosition: "bottom center",
+                backgroundSize: "cover",
                 h3: {
-                  textTransform: 'uppercase',
-                  WebkitTextStroke: 'white',
-                  WebkitTextStrokeWidth: '2px',
-                  WebkitTextFillColor: 'transparent',
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
-                }
+                  textTransform: "uppercase",
+                  WebkitTextStroke: "white",
+                  WebkitTextStrokeWidth: "2px",
+                  WebkitTextFillColor: "transparent",
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
+                },
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: '#759B40',
+                bg: "#759B40",
                 backgroundImage:
-                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
-                backgroundSize: 'cover',
-                textShadow: 'text'
+                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
+                backgroundSize: "cover",
+                textShadow: "text",
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: '#3b6fce',
+              bg: "#3b6fce",
               backgroundImage:
-                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
-              backgroundRepeat: 'repeat-x',
-              backgroundPosition: '0 bottom',
-              '@media (prefers-reduced-motion: no-preference)': {
-                animation: `${zoomSlide} 2s linear infinite`
-              }
+                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
+              backgroundRepeat: "repeat-x",
+              backgroundPosition: "0 bottom",
+              "@media (prefers-reduced-motion: no-preference)": {
+                animation: `${zoomSlide} 2s linear infinite`,
+              },
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default SlackPage
+export default SlackPage;
diff --git a/pages/stickers.js b/pages/stickers.js
index 16a8a9d89..6ebd0d525 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
-import Nav from '../components/nav'
-import BGImg from '../components/background-image'
-import Footer from '../components/footer'
-import ForceTheme from '../components/force-theme'
-import StickerForm from '../components/stickers/request-form'
+import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
+import Meta from "@hackclub/meta";
+import Head from "next/head";
+import Nav from "../components/nav";
+import BGImg from "../components/background-image";
+import Footer from "../components/footer";
+import ForceTheme from "../components/force-theme";
+import StickerForm from "../components/stickers/request-form";
 
-import fs from 'fs'
-import path from 'path'
-import { startCase } from 'lodash'
+import fs from "fs";
+import path from "path";
+import { startCase } from "lodash";
 
-const color = '#EC37AD'
+const color = "#EC37AD";
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
+  <Box as="main" key="main" sx={{ textAlign: "center" }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
+      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: 'cards.translucentDark',
-          bg: 'rgba(0, 0, 0, 0.5) !important',
-          position: 'relative',
-          overflow: 'visible',
-          maxWidth: 'copy',
-          mx: 'auto',
+          variant: "cards.translucentDark",
+          bg: "rgba(0, 0, 0, 0.5) !important",
+          position: "relative",
+          overflow: "visible",
+          maxWidth: "copy",
+          mx: "auto",
           my: [4, 5],
-          py: 3
+          py: 3,
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ['none', 'flex'],
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'absolute',
+            display: ["none", "flex"],
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
             top: 0,
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-            width: '100%',
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+            width: "100%",
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-            }
+              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
+            },
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: '4.5rem',
-              height: '6rem'
+              transform: "rotate(-12deg)",
+              width: "4.5rem",
+              height: "6rem",
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: 'rotate(3deg)',
-              width: ['4rem', '6rem'],
-              height: ['4rem', '6rem']
+              transform: "rotate(3deg)",
+              width: ["4rem", "6rem"],
+              height: ["4rem", "6rem"],
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: 'rotate(-12deg)',
-              width: ['6rem', '7.5rem'],
-              height: ['4rem', '5rem']
+              transform: "rotate(-12deg)",
+              width: ["6rem", "7.5rem"],
+              height: ["4rem", "5rem"],
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={theme => ({
-            color: 'primary',
-            ...theme.util.gxText(color, 'red'),
-            mt: [3, 4]
+          sx={(theme) => ({
+            color: "primary",
+            ...theme.util.gxText(color, "red"),
+            mt: [3, 4],
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: 'darkless',
-        maxWidth: 'copyUltra',
-        mx: 'auto',
+        bg: "darkless",
+        maxWidth: "copyUltra",
+        mx: "auto",
         my: [4, 5],
         py: [3, 4],
-        overflow: 'visible'
+        overflow: "visible",
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map(st => (
+        {stickers.map((st) => (
           <Flex
             key={st}
             sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
               img: {
-                objectFit: 'contain',
+                objectFit: "contain",
                 width: [128, 160],
                 height: [128, 160],
-                transition: '.25s transform ease-in-out',
-                ':hover': {
-                  transform: 'scale(1.5)',
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
-                }
-              }
+                transition: ".25s transform ease-in-out",
+                ":hover": {
+                  transform: "scale(1.5)",
+                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
+                },
+              },
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split('.')[0]}
+              alt={st.split(".")[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ''))}
+              {startCase(st.replace(/\.(svg|png)/, ""))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />
-]
+  <Footer dark key="footer" />,
+];
 
-export default StickersPage
+export default StickersPage;
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
+  const stickersDir = path.join(process.cwd(), "public", "stickers");
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter(sticker => sticker !== 'hero.jpg')
-  return { props: { stickers } }
-}
+    .filter((sticker) => sticker !== "hero.jpg");
+  return { props: { stickers } };
+};
diff --git a/pages/winter.js b/pages/winter.js
index 02902575d..f92cd6a92 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Meta from '@hackclub/meta'
-import Nav from '../components/nav'
+import Head from "next/head";
+import Meta from "@hackclub/meta";
+import Nav from "../components/nav";
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex
-} from 'theme-ui'
-import Snowfall from 'react-snowfall'
-import WinterFooter from '../components/winter/footer'
-import FadeIn from '../components/fade-in'
-import { useState } from 'react'
-import ForceTheme from '../components/force-theme'
-import RealTimeline from '../components/winter/timeline'
-import InfoGrid from '../components/winter/info'
-import Breakdown from '../components/winter/breakdown'
-import Projects from '../components/winter/projects'
-import Landing from '../components/winter/landing'
-import Recap from '../components/winter/recap'
-import { Zoom } from 'react-reveal'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
+  Flex,
+} from "theme-ui";
+import Snowfall from "react-snowfall";
+import WinterFooter from "../components/winter/footer";
+import FadeIn from "../components/fade-in";
+import { useState } from "react";
+import ForceTheme from "../components/force-theme";
+import RealTimeline from "../components/winter/timeline";
+import InfoGrid from "../components/winter/info";
+import Breakdown from "../components/winter/breakdown";
+import Projects from "../components/winter/projects";
+import Landing from "../components/winter/landing";
+import Recap from "../components/winter/recap";
+import { Zoom } from "react-reveal";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
+    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
     fetcher,
-    { refreshInterval: 1000 }
-  )
+    { refreshInterval: 1000 },
+  );
 
   const rsvpCount = rsvps
-    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
-    : 1000 // arbitrary fallback number
+    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
+    : 1000; // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: 'blue' }}>
+      <Box as="main" sx={{ bg: "blue" }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: '0px 0px 21px #E1F1FF',
-                color: 'white',
+                textShadow: "0px 0px 21px #E1F1FF",
+                color: "white",
                 fontSize: [3, 4, 5],
-                maxWidth: '90%'
+                maxWidth: "90%",
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{' '}
+              in{" "}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: 'inherit' }}
+                sx={{ color: "inherit" }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{' '}
-              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
+              . Or come hangout with us in #hardware-party on{" "}
+              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ['column', null, 'row'],
-              justifyContent: 'center',
-              alignItems: 'center'
+              flexDirection: ["column", null, "row"],
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <Box
-              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
+              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: 'white',
-                    textTransform: 'uppercase',
-                    transform: ['none', null, 'rotate(-90deg)'],
-                    textShadow: '0px 0px 21px #E1F1FF'
+                    color: "white",
+                    textTransform: "uppercase",
+                    transform: ["none", null, "rotate(-90deg)"],
+                    textShadow: "0px 0px 21px #E1F1FF",
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ['100px', null, '80%'],
+                    width: ["100px", null, "80%"],
                     pt: [null, null, 6],
-                    ml: [2, null, null]
+                    ml: [2, null, null],
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  )
+  );
 }
 
-export default Winter
+export default Winter;
diff --git a/prettier.config.js b/prettier.config.js
index 111881a84..ee14b71bc 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
+  trailingComma: "none",
+  arrowParens: "avoid",
   printWidth: 80,
-  semi: false
-}
+  semi: false,
+};

From c4aba9f47b45ac2cc19218a2a16062eda9b65ce1 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 095/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From f10540d53f575bb7275e7633822598e4f4c34076 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 096/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From f320f6e963f8d6ae62932bb23ab6b1353ea8ef66 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 097/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 6270a93bbe154fa3ee31d2cdc9b6e2049dd0778b Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 27 Sep 2023 20:37:01 +0100
Subject: [PATCH 098/111] started on redesign of the newsletter section +
 formatted things

---
 components/index/cards/mailing-list.js | 39 ++++++++------------------
 components/mail-card.js                | 33 +++++++++-------------
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..fedaaad27 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,6 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
+  Label,
   Input,
   Button,
   Text,
@@ -11,7 +12,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -67,7 +68,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1050px",
+          maxWidth: "1000px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -75,7 +76,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 5,
+            gridGap: 4,
         }}
       >
         <Flex
@@ -173,32 +174,16 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4
-        }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+        <Box>
+            <MailCard/>
         </Box>
       </Card>
-        {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={FooterImgFile}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..8581cbabf 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,15 @@
-import {Box, Card, Text} from "theme-ui";
-import Link from "next/link";
+import { Card, Text } from "theme-ui";
 
-export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+export default function MailCard({ mail }) {
+  return (
+    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
+        <Text as="p">
+            26/04/2021 — To Orpheus, From Hack Club
+        </Text>
+      <Text as="h2" sx={{ fontWeight: 'normal' }}>
+          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
+      </Text>
+    </Card>
   );
-}
\ No newline at end of file
+}

From 0abcf8d2aabbbb2540dee26803e64826bfb8b183 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 20:17:17 +0100
Subject: [PATCH 099/111] further fancifying of the mail card

---
 components/index/cards/mailing-list.js | 13 ++++++++-----
 components/mail-card.js                | 26 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fedaaad27..4df0a663d 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,6 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import {
   Box,
-  Label,
   Input,
   Button,
   Text,
@@ -68,7 +67,7 @@ const MailingList = () => {
     <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: "1000px",
+          maxWidth: "1050px",
           mx: "auto",
           // mt: [3, 4],
           background: "rgb(255,255,255, 0.45)",
@@ -76,7 +75,7 @@ const MailingList = () => {
           zIndex: 2,
           backdropFilter: "blur(8px)",
           display: "flex",
-            gridGap: 4,
+            gridGap: 5,
         }}
       >
         <Flex
@@ -174,8 +173,12 @@ const MailingList = () => {
                 </Alert>
             )}
         </Flex>
-        <Box>
-            <MailCard/>
+        <Box sx={{
+            display: "grid",
+            gridGap: 4
+        }}>
+            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
+            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
       <BGImg
diff --git a/components/mail-card.js b/components/mail-card.js
index 8581cbabf..fc28c7bbc 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,15 +1,19 @@
 import { Card, Text } from "theme-ui";
+import Link from "next/link";
 
-export default function MailCard({ mail }) {
-  return (
-    <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
-      <Text as="h1" sx={{ textTransform: "uppercase" }}>{/*{mail.subject || "No Subject"}*/} No Subject</Text>
-        <Text as="p">
-            26/04/2021 — To Orpheus, From Hack Club
-        </Text>
-      <Text as="h2" sx={{ fontWeight: 'normal' }}>
-          Incididunt ipsum mollit occaecat et est magna pariatur elit nulla. Commodo aliqua aliquip exercitation minim veniam aliqua aliqua qui eiusmod do.
-      </Text>
-    </Card>
+export default function MailCard(mail) {
+    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    return (
+        <Link href="#" sx={{ cursor: "pointer" }}>
+            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Text as="p">
+                    {mail.date} — To Orpheus, From Hack Club
+                </Text>
+              <Text as="h2" sx={{ fontWeight: 'normal' }}>
+                  {body || "We're no strangers to love. You know the rules and so do I."}
+              </Text>
+            </Card>
+        </Link>
   );
 }

From 25ac3e1d855c0566d23cbdb072e0b0ebaa576fc9 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 29 Sep 2023 22:16:40 +0100
Subject: [PATCH 100/111] experimenting with different backgrounds + start of
 pattern!

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++++--------
 components/mail-card.js                | 10 ++++++---
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 4df0a663d..65fad779a 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -11,7 +11,7 @@ import {
   Grid,
 } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
+import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = () => {
+const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
@@ -181,12 +181,24 @@ const MailingList = () => {
             <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
         </Box>
       </Card>
-      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
-        placeholder="blur"
-        alt="Globe with hundreds of Hack Clubs"
-      />
+        {/*<Box
+            sx={{
+                position: "absolute",
+                display: "block",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 0,
+                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
+            }}
+        />*/}
+       <BGImg
+            src={FooterImgFile}
+            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+            priority
+            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+        />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index fc28c7bbc..e3e1c217a 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,11 +1,15 @@
 import { Card, Text } from "theme-ui";
 import Link from "next/link";
+import Image from "next/image";
+
+import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#" sx={{ cursor: "pointer" }}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px" }}>
+        <Link href="#">
+            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
+                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
               <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
@@ -16,4 +20,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
+}
\ No newline at end of file

From f5de6a768220270ce9133c8310f8d02f4a7294ff Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 30 Sep 2023 16:06:41 +0100
Subject: [PATCH 101/111] further fanciness

---
 components/index/cards/mailing-list.js |  2 +-
 components/mail-card.js                | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 65fad779a..961d969ea 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -35,7 +35,7 @@ const Loading = () => (
   ></Box>
 );
 
-const MailingList = ({ gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))", }) => {
+const MailingList = () => {
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
diff --git a/components/mail-card.js b/components/mail-card.js
index e3e1c217a..ec3b3e69e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,21 @@
-import { Card, Text } from "theme-ui";
+import {Box, Card, Text} from "theme-ui";
 import Link from "next/link";
-import Image from "next/image";
-
-import pattern from "../public/../public/home/letter-pattern.svg"
 
 export default function MailCard(mail) {
     const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
     return (
-        <Link href="#">
+        <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Image src={pattern} alt="red and blue letter pattern" sx={{ maxWidth: "100%" }} />
-              <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
+                <Box>
+                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
+                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
                 <Text as="p">
                     {mail.date} — To Orpheus, From Hack Club
                 </Text>
               <Text as="h2" sx={{ fontWeight: 'normal' }}>
                   {body || "We're no strangers to love. You know the rules and so do I."}
               </Text>
+                </Box>
             </Card>
         </Link>
   );

From 68439121a3f88f2e1eca6c69c1e79f86120a8558 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 12:03:44 +0100
Subject: [PATCH 102/111] =?UTF-8?q?biiiiiig=20commit=20=E2=80=94=20reversi?=
 =?UTF-8?q?ng=20formatting.=20+=20polishing=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/dependabot.yml                        |   6 +-
 components/analytics.js                       |   6 +-
 components/announcement.js                    |  54 +-
 components/announcements/amount.js            |  12 +-
 components/announcements/cta.js               |  22 +-
 components/announcements/elon.mdx             |   4 +-
 components/announcements/holder.js            |  12 +-
 components/announcements/pills.js             |  36 +-
 components/announcements/preston-werner.mdx   |   2 +-
 components/announcements/relon.mdx            |   6 +-
 components/background-image.js                |  28 +-
 components/bio.js                             | 106 +-
 components/color-switcher.js                  |  34 +-
 components/comma.js                           |   4 +-
 components/donate/sponsors.js                 |  40 +-
 components/donate/sprigForm.js                |  82 +-
 components/donate/sprigMeta.js                |  10 +-
 components/dot.js                             |  36 +-
 components/fade-in.js                         |  20 +-
 components/flag.js                            |  26 +-
 components/flex-col.js                        |   4 +-
 components/footer.js                          |  66 +-
 components/force-theme.js                     |  12 +-
 components/hackathons/features/marketing.js   |  68 +-
 components/hackathons/features/money.js       |  88 +-
 components/hackathons/features/slack.js       |  88 +-
 components/hackathons/grant/apply.js          | 106 +-
 components/hackathons/grant/form.js           |  52 +-
 components/hackathons/keep-exploring.js       |  50 +-
 components/hackathons/landing.js              | 104 +-
 components/hackathons/overview.js             |  32 +-
 components/hackathons/recap.js                |  54 +-
 components/hackathons/scrolling-hackathons.js | 154 +--
 components/hcb/apply-button.js                |  16 +-
 components/hcb/apply/address-input.js         | 172 +--
 components/hcb/apply/alert-modal.js           |  32 +-
 components/hcb/apply/autofill-colour-fix.js   |  12 +-
 components/hcb/apply/checkbox.js              |  22 +-
 components/hcb/apply/field.js                 |  50 +-
 components/hcb/apply/form-container.js        |  28 +-
 components/hcb/apply/hcb-info.js              |  28 +-
 components/hcb/apply/nav-button.js            | 144 +--
 components/hcb/apply/org-form.js              |  26 +-
 components/hcb/apply/personal-form.js         |  44 +-
 components/hcb/apply/progress.js              |  50 +-
 components/hcb/apply/watermark.js             |  62 +-
 components/hcb/directory/card.js              | 124 +--
 components/hcb/everything.js                  | 162 +--
 components/hcb/features.js                    |  80 +-
 components/hcb/first/features.js              | 100 +-
 components/hcb/first/form.js                  | 144 +--
 components/hcb/first/steps.js                 |  84 +-
 components/hcb/first/testimonials.js          |  98 +-
 components/hcb/landing.js                     | 142 +--
 components/hcb/nonprofits.js                  | 146 +--
 components/hcb/run.js                         |  40 +-
 components/hcb/start.js                       |  22 +-
 components/hcb/stats.js                       |  78 +-
 components/hcb/testimonials.js                | 160 ++-
 components/hcb/timeline.js                    |  58 +-
 components/hcb/tooltip.js                     |  48 +-
 components/icon.js                            |   8 +-
 components/index/cards/angelhacks.js          |  54 +-
 components/index/cards/button.js              |  52 +-
 components/index/cards/card-model.js          |  98 +-
 components/index/cards/clubs.js               |  54 +-
 components/index/cards/epoch.js               | 160 +--
 components/index/cards/events.js              |  52 +-
 components/index/cards/hackathons.js          | 182 ++--
 components/index/cards/haxidraw.js            |  32 +-
 components/index/cards/inspect.js             |  24 +-
 components/index/cards/mailing-list.js        |  17 +-
 components/index/cards/outernet.js            |  34 +-
 components/index/cards/sinerider.js           |  32 +-
 components/index/cards/slack.js               |  98 +-
 components/index/cards/sprig-console.js       |  94 +-
 components/index/cards/sprig.js               | 150 +--
 components/index/cards/winter.js              |  54 +-
 components/index/cards/workshops.js           |  56 +-
 components/index/carousel-cards.js            |  72 +-
 components/index/carousel.js                  |  38 +-
 components/index/events.js                    |  88 +-
 components/index/github.js                    |  58 +-
 components/letterhead.js                      |  78 +-
 components/mail-card.js                       |   6 +-
 components/mention.js                         |  22 +-
 components/nav.js                             | 132 +--
 components/particles.js                       |  56 +-
 components/photo.js                           |  36 +-
 components/posts/emoji.js                     |  52 +-
 components/posts/index.js                     | 130 +--
 components/posts/mention.js                   |  30 +-
 components/press.mdx                          |   2 +-
 components/scroll-hint.js                     |  46 +-
 components/secret.js                          | 138 ++-
 components/ship/why.mdx                       |   2 +-
 components/signature.js                       |  14 +-
 components/signatures.js                      |  14 +-
 components/slack.js                           |  80 +-
 components/slack/header.js                    |  74 +-
 components/slack/join-form.js                 |  78 +-
 components/slack/slack-events.js              | 104 +-
 components/slide-down.js                      |  24 +-
 components/slide-up.js                        |  24 +-
 components/sparkles/index.js                  |  88 +-
 components/sparkles/money.js                  |  90 +-
 components/stage.js                           |  20 +-
 components/stat.js                            |  50 +-
 components/stickers/request-form.js           |  54 +-
 components/submit.js                          |  52 +-
 components/tilt.js                            |  20 +-
 components/winter/breakdown-box.js            |  48 +-
 components/winter/breakdown.js                |  34 +-
 components/winter/footer.js                   |  22 +-
 components/winter/form.js                     |  98 +-
 components/winter/info.js                     | 104 +-
 components/winter/landing.js                  |  98 +-
 components/winter/projects.js                 | 238 ++---
 components/winter/recap.js                    |  40 +-
 components/winter/rsvp.js                     | 104 +-
 components/winter/timeline.js                 |  90 +-
 lib/dates.js                                  | 153 ++-
 lib/fetcher.js                                |   4 +-
 lib/hcb/apply/address-validation.js           |  64 +-
 lib/helpers.js                                | 235 +++--
 lib/members.js                                |   6 +-
 lib/sitemap.js                                |  44 +-
 lib/theme.js                                  |  18 +-
 lib/use-form.js                               |  94 +-
 lib/use-has-mounted.js                        |  12 +-
 lib/use-prefers-motion.js                     |  32 +-
 lib/use-prefers-reduced-motion.js             |  32 +-
 lib/use-random-interval.js                    |  41 +-
 middleware.js                                 |  20 +-
 next.config.mjs                               | 340 +++---
 pages/404.js                                  |  44 +-
 pages/_app.js                                 |  20 +-
 pages/_document.js                            |  44 +-
 pages/amas/geohot.js                          | 318 +++---
 pages/amas/index.js                           | 114 +-
 pages/amas/sal.js                             | 292 +++---
 pages/amas/vitalik.js                         | 300 +++---
 pages/api/channels/dogs.js                    |  10 +-
 pages/api/channels/resolve.js                 |  20 +-
 pages/api/contribute.js                       |  20 +-
 pages/api/first-team.js                       |  16 +-
 pages/api/games.js                            |  12 +-
 pages/api/github.js                           |  52 +-
 pages/api/hcb/apply.js                        |  94 +-
 pages/api/hcb/demo.js                         |  50 +-
 pages/api/join.js                             | 106 +-
 pages/api/mailing-list.js                     |  18 +-
 pages/api/slack.js                            |  32 +-
 pages/api/sprig-console.js                    |  16 +-
 pages/api/stars.js                            |  30 +-
 pages/api/stickers.js                         |  86 +-
 pages/api/stuff.js                            |  26 +-
 pages/api/winter-rsvp.js                      |  38 +-
 pages/brand.js                                | 164 +--
 pages/clubs.js                                | 328 +++---
 pages/content/covid19.mdx                     |   2 +-
 pages/content/it-admins.mdx                   |   4 +-
 pages/content/sponsorship.mdx                 |  14 +-
 pages/content/sunsetting-som.mdx              |   8 +-
 pages/content/transparency/may-2020.mdx       |   2 +-
 pages/deprecated/[deprecated].js              |  78 +-
 pages/donate.js                               | 284 ++---
 pages/elon.js                                 |  42 +-
 pages/hackathons/grant.js                     | 224 ++--
 pages/hackathons/index.js                     |  46 +-
 pages/hcb/apply/index.js                      | 124 +--
 pages/hcb/apply/success.js                    |  70 +-
 pages/hcb/climate/[region].js                 |  43 +-
 pages/hcb/climate/index.js                    | 989 +++++++++---------
 pages/hcb/first.js                            | 116 +-
 pages/hcb/fiscal-sponsorship.js               | 262 ++---
 pages/hcb/index.js                            |  38 +-
 pages/jobs/brand-director.js                  |  22 +-
 pages/jobs/clubs-lead.js                      |  22 +-
 pages/jobs/customer-success-lead.js           |  22 +-
 pages/jobs/education-engineer.js              |  22 +-
 pages/jobs/events-designer.js                 | 119 +--
 pages/jobs/executive-assistant.js             |  22 +-
 pages/jobs/executive-producer.js              |  22 +-
 pages/jobs/hcb-ops-associate.js               |  22 +-
 pages/jobs/hcb-ops-lead.js                    |  22 +-
 pages/jobs/index.js                           | 122 +--
 pages/jobs/lead-hacker.js                     | 107 +-
 .../jobs/philanthropy-communications-lead.js  |  22 +-
 pages/jobs/vp-donor-engagement.js             |  22 +-
 pages/minecraft.js                            |  62 +-
 pages/night.js                                |  83 +-
 pages/opensource.js                           | 128 ++-
 pages/philanthropy/index.js                   | 532 +++++-----
 pages/philanthropy/supporters.js              | 142 +--
 pages/philosophy.js                           |  82 +-
 pages/press.js                                |  54 +-
 pages/preston-werner-2022.js                  |  50 +-
 pages/preston-werner.js                       |  46 +-
 pages/relon.js                                |  62 +-
 pages/santa.js                                |  90 +-
 pages/ship.js                                 | 130 +--
 pages/slack.js                                | 270 ++---
 pages/stickers.js                             | 134 +--
 pages/winter.js                               |  90 +-
 prettier.config.js                            |   8 +-
 206 files changed, 7840 insertions(+), 7877 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e574638e9..d441f1c57 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/components/analytics.js b/components/analytics.js
index 65c22f3dd..e5f61d010 100644
--- a/components/analytics.js
+++ b/components/analytics.js
@@ -1,4 +1,4 @@
-import Script from "next/script";
+import Script from 'next/script'
 
 const Analytics = () => (
   <Script
@@ -6,6 +6,6 @@ const Analytics = () => (
     data-domain="hackclub.com"
     src="https://plausible.io/js/plausible.js"
   />
-);
+)
 
-export default Analytics;
+export default Analytics
diff --git a/components/announcement.js b/components/announcement.js
index f3c0b75d9..575363461 100644
--- a/components/announcement.js
+++ b/components/announcement.js
@@ -1,67 +1,67 @@
-import { Card, Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import Icon from "./icon";
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import Icon from './icon'
 
 const unfold = keyframes({
-  from: { transform: "scaleY(0)" },
-  to: { transform: "scaleY(100%)" },
-});
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
 
 const Announcement = ({
   caption,
   copy,
   iconLeft,
   iconRight,
-  color = "accent",
+  color = 'accent',
   sx = {},
   ...props
 }) => (
   <Card
-    as={props.href ? "a" : "div"}
+    as={props.href ? 'a' : 'div'}
     variant="interactive"
     sx={{
-      variant: "cards.translucent",
-      mx: "auto",
-      maxWidth: "narrow",
-      width: "100%",
-      textAlign: "left",
-      textDecoration: "none",
-      lineHeight: "caption",
-      display: "flex",
-      alignItems: "center",
+      variant: 'cards.translucent',
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
       p: [2, 2],
       px: 3,
       mb: [3, 4],
       mt: [null, -3, -5],
-      transform: "scale(1)",
-      "@media (prefers-reduced-motion: no-preference)": {
-        animation: `${unfold} 0.5s ease-out`,
+      transform: 'scale(1)',
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
       },
-      svg: { flexShrink: "none" },
-      ...sx,
+      svg: { flexShrink: 'none' },
+      ...sx
     }}
     {...props}
   >
     {iconLeft && (
       <Icon
         glyph={iconLeft}
-        sx={{ mr: [2, 3], ml: 2, color, display: ["none", "block"] }}
+        sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }}
       />
     )}
     <Text
       as="p"
-      sx={{ flex: "1 1 auto", strong: { display: ["inline", "block"] } }}
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
     >
       <strong>{copy}</strong>
       {caption && (
         <Text as="span" variant="caption" color="secondary">
-          {" "}
+          {' '}
           {caption}
         </Text>
       )}
     </Text>
     {iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
   </Card>
-);
+)
 
-export default Announcement;
+export default Announcement
diff --git a/components/announcements/amount.js b/components/announcements/amount.js
index 8687ff915..dec062e9c 100644
--- a/components/announcements/amount.js
+++ b/components/announcements/amount.js
@@ -1,15 +1,15 @@
-import Sparkles from "../sparkles";
+import Sparkles from '../sparkles'
 
 const Amount = ({ amount }) => (
   <Sparkles
     sx={{
-      WebkitTextStroke: "currentColor",
-      WebkitTextStrokeWidth: ["2px", "3px"],
-      WebkitTextFillColor: "transparent",
+      WebkitTextStroke: 'currentColor',
+      WebkitTextStrokeWidth: ['2px', '3px'],
+      WebkitTextFillColor: 'transparent'
     }}
   >
     {amount}
   </Sparkles>
-);
+)
 
-export default Amount;
+export default Amount
diff --git a/components/announcements/cta.js b/components/announcements/cta.js
index 31a022edc..2e41e8eca 100644
--- a/components/announcements/cta.js
+++ b/components/announcements/cta.js
@@ -1,26 +1,26 @@
-import { Box, Button, Grid, Heading, Text } from "theme-ui";
-import Icon from "@hackclub/icons";
-import NextLink from "next/link";
-import { thousands } from "../../lib/members";
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+import { thousands } from '../../lib/members'
 
 export default function SlackCTA() {
   return (
     <Box
       as="section"
       sx={{
-        bg: "orange",
-        backgroundImage: (t) => t.util.gx("yellow", "orange"),
-        color: "white",
-        py: [4, 5],
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
       }}
     >
-      <Grid gap={[3, 4]} columns={[null, "auto 1fr"]} variant="layout.copy">
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
         <Icon glyph="welcome" size={72} />
         <Box>
           <Heading as="h2" variant="headline" mt={0}>
             Teenager? New here? Welcome!
           </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
             Hack Club is a global community of high school makers & student-led
             coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
             teenagers learning to code & building amazing projects, & you’ll fit
@@ -36,5 +36,5 @@ export default function SlackCTA() {
         </Box>
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/announcements/elon.mdx b/components/announcements/elon.mdx
index 209b2e4cc..701c848e5 100644
--- a/components/announcements/elon.mdx
+++ b/components/announcements/elon.mdx
@@ -1,5 +1,5 @@
-import Amount from "./amount";
-import Signature from "../signature";
+import Amount from './amount'
+import Signature from '../signature'
 
 # Today, I’m proud to share: Elon&nbsp;Musk is donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/holder.js b/components/announcements/holder.js
index b026cfa45..074636750 100644
--- a/components/announcements/holder.js
+++ b/components/announcements/holder.js
@@ -1,4 +1,4 @@
-import { Container, BaseStyles } from "theme-ui";
+import { Container, BaseStyles } from 'theme-ui'
 
 export default function AnnouncementHolder({ children }) {
   return (
@@ -9,14 +9,14 @@ export default function AnnouncementHolder({ children }) {
         py: [4, 5],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
-  );
+  )
 }
diff --git a/components/announcements/pills.js b/components/announcements/pills.js
index 3629eb7b7..dbf58a586 100644
--- a/components/announcements/pills.js
+++ b/components/announcements/pills.js
@@ -8,33 +8,33 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 
 export function PillHolder({ children }) {
   return (
     <Flex
       sx={{
-        flexWrap: "wrap",
-        justifyContent: "center",
-        alignItems: "center",
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
         div: {
           mt: 0,
           mb: 2,
-          bg: "white",
-          color: "muted",
-          border: "1px solid",
-          borderColor: "border",
-          bg: "snow",
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
           fontSize: 2,
-          fontWeight: "body",
-          lineHeight: "36px",
-        },
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 export function AuthorPill({ tag, image, firstName }) {
@@ -45,14 +45,14 @@ export function AuthorPill({ tag, image, firstName }) {
         mr: [2, 3],
         pl: 2,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
     >
       <Avatar src={image} alt={firstName} size={36} mr={2} />
       {tag}
     </Badge>
-  );
+  )
 }
 
 export function DatePill({ tag }) {
@@ -60,5 +60,5 @@ export function DatePill({ tag }) {
     <Badge variant="pill" px={3}>
       {tag}
     </Badge>
-  );
+  )
 }
diff --git a/components/announcements/preston-werner.mdx b/components/announcements/preston-werner.mdx
index 1cf79b34f..f371cc589 100644
--- a/components/announcements/preston-werner.mdx
+++ b/components/announcements/preston-werner.mdx
@@ -1,4 +1,4 @@
-import Amount from "./amount";
+import Amount from './amount'
 
 # Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
diff --git a/components/announcements/relon.mdx b/components/announcements/relon.mdx
index bc60fd03c..139756ad9 100644
--- a/components/announcements/relon.mdx
+++ b/components/announcements/relon.mdx
@@ -1,6 +1,6 @@
-import Signature from "../signature";
-import Signatures from "../signatures";
-import Image from "theme-ui";
+import Signature from '../signature'
+import Signatures from '../signatures'
+import Image from 'theme-ui'
 
 In March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.
 
diff --git a/components/background-image.js b/components/background-image.js
index e925b043e..61822ec6d 100644
--- a/components/background-image.js
+++ b/components/background-image.js
@@ -1,5 +1,5 @@
-import { Box } from "theme-ui";
-import Image from "next/image";
+import { Box } from 'theme-ui'
+import Image from 'next/image'
 
 /*
  * Use this component inside a container with CSS:
@@ -9,35 +9,35 @@ import Image from "next/image";
  */
 
 const BGImg = ({
-  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
-  alt = "",
+  gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
     sx={{
-      position: "absolute",
-      display: "block",
+      position: 'absolute',
+      display: 'block',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex: 0,
-      "&:after": {
+      '&:after': {
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         backgroundImage: gradient,
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
+        bottom: 0
       },
-      "> span": { height: "100% !important", width: "100% !important" },
-      img: { objectFit: "cover", objectPosition: "center center" },
-      "~ *": { position: "relative" },
+      '> span': { height: '100% !important', width: '100% !important' },
+      img: { objectFit: 'cover', objectPosition: 'center center' },
+      '~ *': { position: 'relative' }
     }}
   >
     <Image layout="responsive" alt={alt} {...props} />
   </Box>
-);
+)
 
-export default BGImg;
+export default BGImg
diff --git a/components/bio.js b/components/bio.js
index 785218a62..00e822f70 100644
--- a/components/bio.js
+++ b/components/bio.js
@@ -1,10 +1,10 @@
-import { Box, Flex, Text, Avatar, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import { useState } from "react";
+import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  let { img, name, teamRole, pronouns, text, subrole, href, video } = props;
-  const [expand, setExpand] = useState(false);
+  let { img, name, teamRole, pronouns, text, subrole, href, video } = props
+  const [expand, setExpand] = useState(false)
   return (
     <>
       <Card
@@ -12,27 +12,27 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         p={popup ? [2, 2, 2] : [3, 3, 3]}
         py={popup ? [3, 3, 3] : [4, 4, 4]}
         sx={{
-          display: "flex",
-          alignItems: popup ? "center" : "flex-start",
-          transition: "transform 0.125s ease-in-out",
-          "&:hover":
-            (text && popup) || href ? { transform: "scale(1.025)" } : {},
-          cursor: (text && popup) || href ? "pointer" : null,
-          textDecoration: "none",
-          maxWidth: "600px",
+          display: 'flex',
+          alignItems: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover':
+            (text && popup) || href ? { transform: 'scale(1.025)' } : {},
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: '600px',
           zIndex: !popup ? 1003 : 5,
-          maxHeight: "90vh",
-          overflowY: "hidden",
-          overscrollBehavior: "contain",
+          maxHeight: '90vh',
+          overflowY: 'hidden',
+          overscrollBehavior: 'contain',
           gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
-          position: "relative",
+          position: 'relative',
         }}
-        as={href && !text ? "a" : "div"}
+        as={href && !text ? 'a' : 'div'}
         href={href}
         target="_blank"
         onClick={() => {
           if (text && popup) {
-            setExpand(true);
+            setExpand(true)
           }
         }}
       >
@@ -43,17 +43,17 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           mr={3}
           src={
             img ||
-            require(`../public/team/${name.split(" ")[0].toLowerCase()}.jpg`)
+            require(`../public/team/${name.split(' ')[0].toLowerCase()}.jpg`)
           }
           alt={name}
           sx={{
-            overflow: "hidden",
-            objectFit: "cover",
-            transition: "transform 0.125s ease-in-out",
-            "&:hover": { transform: "rotate(-8deg) scale(1.25)" },
+            overflow: 'hidden',
+            objectFit: 'cover',
+            transition: 'transform 0.125s ease-in-out',
+            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
             flexShrink: 0,
-            width: "64px",
-            height: "64px",
+            width: '64px',
+            height: '64px'
           }}
         />
         <Box>
@@ -67,9 +67,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 variant="subheadline"
                 fontSize={2}
                 sx={{
-                  mb: ["0px", "0px", "0px"],
-                  fontSize: "1.1em",
-                  width: "fit-content",
+                  mb: ['0px', '0px', '0px'],
+                  fontSize: '1.1em',
+                  width: 'fit-content'
                 }}
               >
                 {teamRole}
@@ -80,10 +80,10 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   <Text
                     color="#24B5A5"
                     sx={{
-                      mb: ["0px", "0px", "0px"],
+                      mb: ['0px', '0px', '0px'],
                       fontSize: 1,
                       fontWeight: 400,
-                      width: "fit-content",
+                      width: 'fit-content'
                     }}
                   >
                     {subrole}
@@ -107,8 +107,8 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                   sx={{
                     marginTop: 4,
                     marginX: 5,
-                    justifyContent: "center",
-                    aspectRatio: 4 / 3,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
                   }}
                 >
                   <iframe
@@ -124,12 +124,12 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
             </>
           )}
           {!popup && href && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Text
                 sx={{
-                  transform: "translateX(-4px) translateY(2px)",
-                  display: "inline-flex",
-                  alignItems: "center",
+                  transform: 'translateX(-4px) translateY(2px)',
+                  display: 'inline-flex',
+                  alignItems: 'center'
                 }}
               >
                 <Icon glyph="external-fill" size={24} />
@@ -138,9 +138,9 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
                 mt={1}
                 mb={0}
                 color="black"
-                as={"a"}
+                as={'a'}
                 href={href}
-                sx={{ transform: "translateX(-2px)" }}
+                sx={{ transform: 'translateX(-2px)' }}
               >
                 {href}
               </Text>
@@ -152,30 +152,30 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         <>
           <Flex
             sx={{
-              position: "fixed",
+              position: 'fixed',
               zIndex: 1004,
               top: 0,
               left: 0,
-              height: "100vh",
-              width: "100vw",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
-              pb: 4,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(0,0,0,0.6)',
+              pb: 4
             }}
           >
             <Bio {...props} popup={false} />
             <Flex
               sx={{
-                position: "fixed",
+                position: 'fixed',
                 zIndex: 1002,
                 top: 0,
                 left: 0,
-                height: "100vh",
-                width: "100vw",
-                alignItems: "center",
-                justifyContent: "center",
-                pb: 4,
+                height: '100vh',
+                width: '100vw',
+                alignItems: 'center',
+                justifyContent: 'center',
+                pb: 4
               }}
               onClick={() => setExpand(false)}
             ></Flex>
@@ -183,5 +183,5 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
         </>
       )}
     </>
-  );
+  )
 }
diff --git a/components/color-switcher.js b/components/color-switcher.js
index 798235368..b578ed104 100755
--- a/components/color-switcher.js
+++ b/components/color-switcher.js
@@ -1,23 +1,23 @@
-import { IconButton, useColorMode } from "theme-ui";
+import { IconButton, useColorMode } from 'theme-ui'
 
-const ColorSwitcher = (props) => {
-  const [mode, setMode] = useColorMode();
+const ColorSwitcher = props => {
+  const [mode, setMode] = useColorMode()
   return (
     <IconButton
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
       sx={{
-        position: "absolute",
+        position: 'absolute',
         top: [2, 3],
         right: [2, 3],
-        color: "primary",
-        cursor: "pointer",
-        borderRadius: "circle",
-        transition: "box-shadow .125s ease-in-out",
-        ":hover,:focus": {
-          boxShadow: "0 0 0 3px",
-          outline: "none",
-        },
+        color: 'primary',
+        cursor: 'pointer',
+        borderRadius: 'circle',
+        transition: 'box-shadow .125s ease-in-out',
+        ':hover,:focus': {
+          boxShadow: '0 0 0 3px',
+          outline: 'none'
+        }
       }}
       {...props}
     >
@@ -33,7 +33,7 @@ const ColorSwitcher = (props) => {
         <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
       </svg>
     </IconButton>
-  );
-};
+  )
+}
 
-export default ColorSwitcher;
+export default ColorSwitcher
diff --git a/components/comma.js b/components/comma.js
index 5943567f1..11efc6088 100644
--- a/components/comma.js
+++ b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
-    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    : "";
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    : ''
 }
diff --git a/components/donate/sponsors.js b/components/donate/sponsors.js
index 370273f28..722b9108f 100644
--- a/components/donate/sponsors.js
+++ b/components/donate/sponsors.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Image, Link } from "theme-ui";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Image, Link } from 'theme-ui'
 
 const Base = styled(Box)`
   display: grid;
@@ -12,32 +12,32 @@ const Base = styled(Box)`
     margin: auto;
     max-width: 12rem;
   }
-`;
+`
 
 const Sponsor = ({ name, href, img, ...props }) => (
   <Link href={href || `https://${name.toLowerCase()}.com`} target="_blank">
     <Image
-      src={`/inkind_logos/${img || name.toLowerCase() + ".svg"}`}
+      src={`/inkind_logos/${img || name.toLowerCase() + '.svg'}`}
       alt={name}
       {...props}
     />
   </Link>
-);
+)
 
-const Sponsors = (props) => (
+const Sponsors = props => (
   <Base maxWidth={48} {...props}>
     {[
-      "Vercel",
-      "Slack",
-      "Netlify",
-      "FullStory",
-      "BrowserStack",
-      "Stripe",
-      "Segment",
-      "Bugsnag",
-      "Google",
-      "Dialpad",
-    ].map((name) => (
+      'Vercel',
+      'Slack',
+      'Netlify',
+      'FullStory',
+      'BrowserStack',
+      'Stripe',
+      'Segment',
+      'Bugsnag',
+      'Google',
+      'Dialpad'
+    ].map(name => (
       <Sponsor name={name} key={name} />
     ))}
     <Sponsor name="Checkly" href="https://checklyhq.com" img="checkly.svg" />
@@ -47,6 +47,6 @@ const Sponsors = (props) => (
       img="fastforward.png"
     />
   </Base>
-);
+)
 
-export default Sponsors;
+export default Sponsors
diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 1903fbaff..a573b7265 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -1,102 +1,100 @@
-import { useState } from "react";
-import { Button, Text } from "theme-ui";
+import { useState } from 'react'
+import { Button, Text } from 'theme-ui'
 
-const pricePerSprig = 100;
+const pricePerSprig = 100
 
 const SprigForm = () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(1)
   function url() {
-    const u = new URL(
-      "https://hcb.hackclub.com/donations/start/game-lab-fund/",
-    );
+    const u = new URL('https://hcb.hackclub.com/donations/start/game-lab-fund/')
     u.searchParams.set(
-      "amount",
-      pricePerSprig * count * 100 /* convert to cents */,
-    );
-    return u;
+      'amount',
+      pricePerSprig * count * 100 /* convert to cents */
+    )
+    return u
   }
   return (
     <>
       <Text
         sx={{
-          fontSize: ["27px !important", 3],
-          position: "relative",
-          justifySelf: "center",
-          alignSelf: "center",
-          paddingBottom: ["1em", "1em", 0],
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
         }}
-        style={{ userSelect: "none" }}
+        style={{ userSelect: 'none' }}
       >
-        I'm donating{" "}
+        I'm donating{' '}
         <Text
           sx={{
-            position: "relative",
+            position: 'relative',
             px: [2],
             py: [1],
             mx: 1,
-            borderRadius: "default",
-            color: "white",
-            bg: "rgba(0,0,0,0.5)",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'rgba(0,0,0,0.5)'
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
           <ButtonDecrease
             count={count}
             setCount={setCount}
-            sx={{ position: "relative" }}
+            sx={{ position: 'relative' }}
           />
           <Text>{count}</Text>
         </Text>
-        Sprig kit{count === 1 ? "" : "s"} to teens
+        Sprig kit{count === 1 ? '' : 's'} to teens
       </Text>
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: "white", bg: "rgba(0,0,0,0.5)", fontSize: [2, 3] }}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
       </Button>
     </>
-  );
-};
-export default SprigForm;
+  )
+}
+export default SprigForm
 
 function ButtonDecrease({ count, setCount }) {
   function handleClick() {
-    setCount(Math.max(count - 1, 1));
+    setCount(Math.max(count - 1, 1))
   }
   return (
     <span
       style={{
-        cursor: count <= 1 ? "not-allowed" : "pointer",
-        position: "absolute",
-        top: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: count <= 1 ? 'not-allowed' : 'pointer',
+        position: 'absolute',
+        top: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▼
     </span>
-  );
+  )
 }
 function ButtonIncrease({ count, setCount }) {
   function handleClick() {
-    setCount(count + 1);
+    setCount(count + 1)
   }
   return (
     <span
       style={{
-        cursor: "pointer",
-        position: "absolute",
-        bottom: "1.2em",
-        left: "50%",
-        transform: "translateX(-50%)",
+        cursor: 'pointer',
+        position: 'absolute',
+        bottom: '1.2em',
+        left: '50%',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
       ▲
     </span>
-  );
+  )
 }
diff --git a/components/donate/sprigMeta.js b/components/donate/sprigMeta.js
index 859c6b080..c161b1452 100644
--- a/components/donate/sprigMeta.js
+++ b/components/donate/sprigMeta.js
@@ -1,5 +1,5 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
 
 const SprigMeta = () => {
   return (
@@ -9,6 +9,6 @@ const SprigMeta = () => {
       description="Inspiring teens to both make and code. Your $100 donation will send a teenager a Hack Club Game Console Kit!"
       image="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
     />
-  );
-};
-export default SprigMeta;
+  )
+}
+export default SprigMeta
diff --git a/components/dot.js b/components/dot.js
index 72881533f..d60284521 100644
--- a/components/dot.js
+++ b/components/dot.js
@@ -1,31 +1,31 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 export default function Dot({ hideOnMobile }) {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        display: hideOnMobile ? ["none", "default"] : "default",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        display: hideOnMobile ? ['none', 'default'] : 'default'
       }}
     />
-  );
+  )
 }
diff --git a/components/fade-in.js b/components/fade-in.js
index 067b08e08..6139c20d8 100644
--- a/components/fade-in.js
+++ b/components/fade-in.js
@@ -1,26 +1,26 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
-const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${fadeIn};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const FadeIn = ({ duration = 300, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default FadeIn;
+export default FadeIn
diff --git a/components/flag.js b/components/flag.js
index 9cf083337..bb4863e74 100644
--- a/components/flag.js
+++ b/components/flag.js
@@ -1,7 +1,7 @@
-import theme from "../lib/theme";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import Link from "next/link";
+import theme from '../lib/theme'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import Link from 'next/link'
 
 const waveFlag = keyframes`
   from {
@@ -10,7 +10,7 @@ const waveFlag = keyframes`
   to {
     transform: rotate(-5deg);
   }
-`;
+`
 
 const waveFlagScaled = keyframes`
   from {
@@ -19,9 +19,9 @@ const waveFlagScaled = keyframes`
   to {
     transform: scale(.875) rotate(-5deg);
   }
-`;
+`
 
-const scrolled = (props) =>
+const scrolled = props =>
   props.scrolled &&
   css`
     transform: scale(0.875);
@@ -30,9 +30,9 @@ const scrolled = (props) =>
     &:focus {
       animation: ${waveFlagScaled} 0.5s linear infinite alternate;
     }
-  `;
+  `
 
-const Base = styled("a")`
+const Base = styled('a')`
   background-image: url(https://assets.hackclub.com/flag-orpheus-top.svg);
   background-repeat: no-repeat;
   background-position: top left;
@@ -55,12 +55,12 @@ const Base = styled("a")`
     animation: none !important;
   }
   ${scrolled};
-`;
+`
 
-const Flag = (props) => (
+const Flag = props => (
   <Link href="/" passHref>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
-);
+)
 
-export default Flag;
+export default Flag
diff --git a/components/flex-col.js b/components/flex-col.js
index dd01f6e00..c20f4c9fa 100644
--- a/components/flex-col.js
+++ b/components/flex-col.js
@@ -1,5 +1,5 @@
-import { Flex } from "theme-ui";
+import { Flex } from 'theme-ui'
 
 export default function FlexCol({ children, ...props }) {
-  return <Flex sx={{ flexDirection: "column", ...props }}>{children}</Flex>;
+  return <Flex sx={{ flexDirection: 'column', ...props }}>{children}</Flex>
 }
diff --git a/components/footer.js b/components/footer.js
index 386fc90e6..eb437af3f 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,25 +1,27 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Container, Image, Grid, Heading, Link, Text } from "theme-ui";
-import NextLink from "next/link";
-import theme from "@hackclub/theme";
-import Icon from "./icon";
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Image, Grid, Heading, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import theme from '@hackclub/theme'
+import Icon from './icon'
 
 const Base = styled(Box)`
-  background: ${(props) =>
+  background: ${props =>
     props.dark
       ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
+  ${props =>
     props.dark &&
     `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
     `} @media print {
     display: none;
   }
-`;
+`
 
-const Logo = (props) => (
+
+
+const Logo = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="256"
@@ -35,9 +37,9 @@ const Logo = (props) => (
       clipRule="evenodd"
     />
   </svg>
-);
+)
 
-const Service = ({ href, icon, name = "", ...props }) => (
+const Service = ({ href, icon, name = '', ...props }) => (
   <Link
     target="_blank"
     rel="noopener me"
@@ -47,14 +49,14 @@ const Service = ({ href, icon, name = "", ...props }) => (
   >
     <Icon glyph={icon} />
   </Link>
-);
+)
 
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
-    color={dark ? "muted" : "slate"}
+    color={dark ? 'muted' : 'slate'}
     py={[4, 5]}
     dark={dark}
-    sx={{ textAlign: "left" }}
+    sx={{ textAlign: 'left' }}
     as="footer"
     {...props}
   >
@@ -67,18 +69,18 @@ const Footer = ({ dark = false, children, ...props }) => (
         sx={{
           px: 0,
           a: {
-            textDecoration: "none",
-            color: "muted",
-            transition: "0.125s color ease-in-out",
-            ":hover,:focus": { color: "slate", textDecoration: "underline" },
+            textDecoration: 'none',
+            color: 'muted',
+            transition: '0.125s color ease-in-out',
+            ':hover,:focus': { color: 'slate', textDecoration: 'underline' }
           },
-          "> div > a": {
-            display: "block",
-            mb: 2,
+          '> div > a': {
+            display: 'block',
+            mb: 2
           },
-          "h2,p": { color: "muted" },
+          'h2,p': { color: 'muted' },
           h2: { fontSize: 3 },
-          "a,p": { fontSize: 2 },
+          'a,p': { fontSize: 2 }
         }}
       >
         <Box>
@@ -115,24 +117,24 @@ const Footer = ({ dark = false, children, ...props }) => (
           <Link href="https://directory.hackclub.com/">Clubs Directory</Link>
           <Link href="https://hackclub.com/conduct/">Code of Conduct</Link>
         </Box>
-        <Box sx={{ gridColumn: ["span 2", "span 1"] }}>
+        <Box sx={{ gridColumn: ['span 2', 'span 1'] }}>
           <Logo aria-label="Hack Club logo" width={128} height={45} />
           <Grid
             columns={[8, 4]}
             gap={2}
             sx={{
-              alignItems: "center",
+              alignItems: 'center',
               ml: -1,
               my: 3,
               maxWidth: [null, 192],
-              svg: { fill: "currentColor", width: 32, height: 32 },
+              svg: { fill: 'currentColor', width: 32, height: 32 },
               a: {
                 lineHeight: 0,
                 mb: 0,
                 transition:
-                  "transform .125s ease-in-out, color .125s ease-in-out",
-                ":hover,:focus": { transform: "scale(1.125)" },
-              },
+                  'transform .125s ease-in-out, color .125s ease-in-out',
+                ':hover,:focus': { transform: 'scale(1.125)' }
+              }
             }}
           >
             <Service
@@ -188,6 +190,6 @@ const Footer = ({ dark = false, children, ...props }) => (
       </Text>
     </Container>
   </Base>
-);
+)
 
-export default Footer;
+export default Footer
diff --git a/components/force-theme.js b/components/force-theme.js
index ae9004315..b5b544095 100644
--- a/components/force-theme.js
+++ b/components/force-theme.js
@@ -1,9 +1,9 @@
-import { useColorMode } from "theme-ui";
+import { useColorMode } from 'theme-ui'
 
 const ForceTheme = ({ theme }) => {
-  const [colorMode, setColorMode] = useColorMode();
-  setColorMode(theme);
-  return null;
-};
+  const [colorMode, setColorMode] = useColorMode()
+  setColorMode(theme)
+  return null
+}
 
-export default ForceTheme;
+export default ForceTheme
diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
index 8a65d4e43..4d365cb65 100644
--- a/components/hackathons/features/marketing.js
+++ b/components/hackathons/features/marketing.js
@@ -1,28 +1,28 @@
-import { Button, Box, Container, Heading, Text } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Text } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import Link from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       hackathons.hackclub.com
     </Text>
     <Heading as="h2" variant="title">
       Spread the word about your hackathon.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Reach hackers worldwide by listing your event on hackathons.hackclub.com,
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
@@ -32,57 +32,57 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+          backgroundImage: theme => theme.util.gx('yellow', 'red')
         }}
       >
         Add your hackathon →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("slate", "black"),
+      backgroundImage: t => t.util.gx('slate', 'black'),
       opacity: 0.7,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png",
+  img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Marketing = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Marketing = () => {
           poster="https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Marketing = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Marketing;
+export default Marketing
diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
index c7bb3ff2c..1411e37f9 100644
--- a/components/hackathons/features/money.js
+++ b/components/hackathons/features/money.js
@@ -1,21 +1,21 @@
-import { Button, Box, Container, Text, Link, Badge } from "theme-ui";
-import NextLink from "next/link";
-import { Fade } from "react-reveal";
-import Icon from "../../icon";
+import { Button, Box, Container, Text, Link, Badge } from 'theme-ui'
+import NextLink from 'next/link'
+import { Fade } from 'react-reveal'
+import Icon from '../../icon'
 
 const Content = () => (
   <>
     <Container
       variant="container"
       sx={{
-        display: "flex",
-        flexDirection: ["column"],
-        width: ["100%", "100%", "100%", "85%"],
-        color: "smoke",
+        display: 'flex',
+        flexDirection: ['column'],
+        width: ['100%', '100%', '100%', '85%'],
+        color: 'smoke',
         px: 4,
         py: [4, 5, 6],
-        borderRadius: "default",
-        position: "relative",
+        borderRadius: 'default',
+        position: 'relative'
       }}
     >
       <Container maxWidth={28} sx={{ mx: 0, pt: 4, pb: 2 }}>
@@ -37,16 +37,16 @@ const Content = () => (
           body={
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
-              by Hack Club with the help of{" "}
+              by Hack Club with the help of{' '}
               <Link
                 href="https://www.firstinspires.org/"
-                sx={{ fontStyle: "italic", color: "white" }}
+                sx={{ fontStyle: 'italic', color: 'white' }}
               >
                 FIRST
               </Link>
               .
               <NextLink href="/hackathons/grant">
-                <Link sx={{ ml: 2, cursor: "pointer" }}>Learn more &rarr;</Link>
+                <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
           }
@@ -70,51 +70,51 @@ const Content = () => (
       <NextLink href="/hcb" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
-          <Box as="span" sx={{ display: ["none", "inline", ""] }}>
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
             for HCB
-          </Box>{" "}
+          </Box>{' '}
           →
         </Button>
       </NextLink>
     </Container>
   </>
-);
+)
 
 const List = ({ children }) => (
   <Box sx={{ maxWidth: 800 }}>
-    <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+    <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
   </Box>
-);
+)
 
 const ListItem = ({ icon, leadText, body, knew }) => (
   <Fade bottom>
     <li
       style={{
         lineHeight: 1.25,
-        display: "flex",
-        pl: 0,
+        display: 'flex',
+        pl: 0
       }}
     >
       <Icon
         glyph={icon}
         size={45}
         sx={{
-          color: "primary",
-          flexShrink: "none",
+          color: 'primary',
+          flexShrink: 'none',
           flexShrink: 0,
-          mr: 2,
+          mr: 2
         }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: [null, null, "flex"],
-            alignItems: "center",
+            display: [null, null, 'flex'],
+            alignItems: 'center'
           }}
         >
           <Text
             as="span"
-            sx={{ fontWeight: "bold", fontSize: [24, 32], lineHeight: 1 }}
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
           >
             {leadText}
           </Text>
@@ -123,11 +123,11 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               as="span"
               variant="pill"
               sx={{
-                zIndex: "1",
-                bg: "muted",
-                color: "steel",
-                fontWeight: "normal",
-                ml: 2,
+                zIndex: '1',
+                bg: 'muted',
+                color: 'steel',
+                fontWeight: 'normal',
+                ml: 2
               }}
             >
               New!
@@ -139,42 +139,42 @@ const ListItem = ({ icon, leadText, body, knew }) => (
       </Box>
     </li>
   </Fade>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
       opacity: 0.875,
-      zIndex: 0,
+      zIndex: 0
     }}
   />
-);
+)
 
 const Static = () => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url('/hcb/bg.webp')`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Money = () => {
-  return <Static />;
-};
+  return <Static />
+}
 
-export default Money;
+export default Money
diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
index 645c9f155..c09675669 100644
--- a/components/hackathons/features/slack.js
+++ b/components/hackathons/features/slack.js
@@ -1,59 +1,59 @@
-import { Button, Box, Container, Heading, Text, Link } from "theme-ui";
-import usePrefersMotion from "../../../lib/use-prefers-motion";
-import useHasMounted from "../../../lib/use-has-mounted";
-import NextLink from "next/link";
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import usePrefersMotion from '../../../lib/use-prefers-motion'
+import useHasMounted from '../../../lib/use-has-mounted'
+import NextLink from 'next/link'
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       The Hack Club Community
     </Text>
     <Heading as="h2" variant="title">
-      A hackathon organizer's{" "}
+      A hackathon organizer's{' '}
       <Text
         as="span"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: "nowrap",
-          color: "currentColor",
-          bg: "green",
+          whiteSpace: 'nowrap',
+          color: 'currentColor',
+          bg: 'green'
         }}
       >
         best friend
       </Text>
       .
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
-      The{" "}
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
+      The{' '}
       <Box
         as="span"
         sx={{
-          bg: "rgb(245, 233, 181, .3)",
+          bg: 'rgb(245, 233, 181, .3)',
           px: 1,
-          borderRadius: 5,
+          borderRadius: 5
         }}
       >
         <Link
           href="https://hackclub.slack.com/archives/C03QSGGCJN7"
-          sx={{ textDecoration: "none", color: "currentColor" }}
+          sx={{ textDecoration: 'none', color: 'currentColor' }}
           target="_blank"
         >
           #hackathon-organizers
         </Link>
-      </Box>{" "}
+      </Box>{' '}
       channel is where teenagers around the world ask questions and share their
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
@@ -63,58 +63,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join us on Slack →
       </Button>
     </NextLink>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
   // screenshot of messages from #hackathon-organizers
-  img = "https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png",
+  img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -126,15 +126,15 @@ const Slack = () => {
           poster="https://cloud-iwkoq2544-hack-club-bot.vercel.app/0screen_shot_2022-07-30_at_9.03.43_am.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -153,10 +153,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
index e5c664bc4..ac9f818bc 100644
--- a/components/hackathons/grant/apply.js
+++ b/components/hackathons/grant/apply.js
@@ -1,9 +1,9 @@
-import { Box, Badge, Grid, Heading } from "theme-ui";
-import { Link, Button, Card } from "theme-ui";
-import { Slide } from "react-reveal";
-import Zoom from "react-reveal/Zoom";
-import MSparkles from "../../sparkles/money";
-import Image from "next/image";
+import { Box, Badge, Grid, Heading } from 'theme-ui'
+import { Link, Button, Card } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Zoom from 'react-reveal/Zoom'
+import MSparkles from '../../sparkles/money'
+import Image from 'next/image'
 /** @jsxImportSource theme-ui */
 
 const Photo = ({
@@ -28,18 +28,18 @@ const Photo = ({
       variant="interactive"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
-      {" "}
-      <Box sx={{ position: "relative" }}>
+      {' '}
+      <Box sx={{ position: 'relative' }}>
         <Image
           src={src}
           alt={alt}
@@ -50,35 +50,35 @@ const Photo = ({
         <Box
           as="span"
           sx={{
-            width: "fit-content",
+            width: 'fit-content',
             bg: color,
             borderRadius: 20,
             lineHeight: 0,
-            p: "14px",
+            p: '14px',
             px: 0,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
-            position: "absolute",
-            bottom: "20px",
-            left: "20px",
-            fontSize: "20px",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            fontSize: '20px'
           }}
         >
           <Badge variant="pill">{duration}</Badge>
         </Box>
       </Box>
-      <Box sx={{ mt: "20px" }}>
+      <Box sx={{ mt: '20px' }}>
         <Heading variant="subtitle" mb={2} p={3} pt={0}>
           {name}
         </Heading>
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 const Apply = ({ channel }) => {
   return (
@@ -86,7 +86,7 @@ const Apply = ({ channel }) => {
       <Box id="apply" sx={{ pt: 6 }}>
         <Zoom>
           <Heading
-            sx={{ textAlign: "center", mb: 3, fontSize: [5, null, 6, 7] }}
+            sx={{ textAlign: 'center', mb: 3, fontSize: [5, null, 6, 7] }}
           >
             The <MSparkles>bucks</MSparkles> start here.
           </Heading>
@@ -94,10 +94,10 @@ const Apply = ({ channel }) => {
         <Zoom>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mb: [2, null, 4],
               fontSize: [28, 30, 40],
-              color: "muted",
+              color: 'muted'
             }}
           >
             Get your hackathon funded.
@@ -110,16 +110,16 @@ const Apply = ({ channel }) => {
         gap={[4, 3, 4]}
         columns={[1, 1, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated'
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Slide left delay={20}>
@@ -134,17 +134,17 @@ const Apply = ({ channel }) => {
             duration="Step 1"
             name={
               <>
-                On{" "}
+                On{' '}
                 <Link
                   href="https://hackclub.com/slack"
                   target="_blank"
                   sx={{
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Slack
                 </Link>
-                , send your website to{" "}
+                , send your website to{' '}
                 <Link href={channel} target="_blank">
                   #hackathon-grants
                 </Link>
@@ -184,16 +184,16 @@ const Apply = ({ channel }) => {
         <Link
           href="/slack/?reason=Application%20for%20the%20high%20school%20hackathon%20grant"
           target="_blank"
-          sx={{ textDecoration: "none" }}
+          sx={{ textDecoration: 'none' }}
         >
           <Button
             as="a"
             variant="primary"
             sx={{
               fontSize: [2, null, 3],
-              display: "block",
-              mx: "auto",
-              width: "fit-content",
+              display: 'block',
+              mx: 'auto',
+              width: 'fit-content'
             }}
           >
             Join Slack
@@ -201,23 +201,23 @@ const Apply = ({ channel }) => {
         </Link>
         <Box
           sx={{
-            fontSize: ["14px", 1, 1],
-            textAlign: "center",
-            color: "muted",
+            fontSize: ['14px', 1, 1],
+            textAlign: 'center',
+            color: 'muted',
             my: 3,
-            width: "60%",
-            mx: "auto",
+            width: '60%',
+            mx: 'auto'
           }}
         >
-          Already have an account? Join the{" "}
+          Already have an account? Join the{' '}
           <Link href={channel} target="_blank">
             #hackathon-grants
-          </Link>{" "}
+          </Link>{' '}
           channel!
         </Box>
       </Slide>
     </>
-  );
-};
+  )
+}
 
-export default Apply;
+export default Apply
diff --git a/components/hackathons/grant/form.js b/components/hackathons/grant/form.js
index 5c7a80f9a..68c01b839 100644
--- a/components/hackathons/grant/form.js
+++ b/components/hackathons/grant/form.js
@@ -1,40 +1,40 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
-import { Box, Label, Input, Button, Text } from "theme-ui";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
+import { Box, Label, Input, Button, Text } from 'theme-ui'
 
 const Form = () => {
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
     await fetch(
-      "https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist",
+      'https://airtable-forms-proxy.hackclub.dev/api/appEzv7w2IBMoxxHe/Hackathon%20Grant%20Waitlist',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          Email: e.target.email.value,
-        }),
-      },
-    );
+          Email: e.target.email.value
+        })
+      }
+    )
 
-    formRef.current.reset();
+    formRef.current.reset()
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Box
-      sx={{ textAlign: "center", maxWidth: "24rem", mx: "auto" }}
+      sx={{ textAlign: 'center', maxWidth: '24rem', mx: 'auto' }}
       as="form"
       ref={formRef}
       onSubmit={handleSubmit}
     >
-      <Label htmlFor="email" sx={{ color: "smoke", fontSize: 18 }}>
+      <Label htmlFor="email" sx={{ color: 'smoke', fontSize: 18 }}>
         Your email
         <Input
           id="email"
@@ -42,17 +42,17 @@ const Form = () => {
           name="email"
           type="email"
           sx={{
-            bg: "darkless",
+            bg: 'darkless',
             my: 0,
             mt: 1,
-            mb: 2,
+            mb: 2
           }}
           required
         />
       </Label>
 
       {submitted ? (
-        <Text color="smoke" sx={{ display: "block", mt: 3 }}>
+        <Text color="smoke" sx={{ display: 'block', mt: 3 }}>
           <Box color="green">
             <Icon glyph="checkmark" />
           </Box>
@@ -64,7 +64,7 @@ const Form = () => {
           <Button variant="outline">Get notified</Button>
           <Text
             variant="caption"
-            sx={{ color: "muted", fontSize: 16, display: "block", mt: 3 }}
+            sx={{ color: 'muted', fontSize: 16, display: 'block', mt: 3 }}
           >
             We'll send you an email when grant applications are open— no spam or
             unexpected marketing emails.
@@ -72,7 +72,7 @@ const Form = () => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
index c42b9abb6..163c28d10 100644
--- a/components/hackathons/keep-exploring.js
+++ b/components/hackathons/keep-exploring.js
@@ -1,20 +1,20 @@
-import { Box, Heading, Button, Text, Grid, Container } from "theme-ui";
-import Link from "next/link";
-import Icon from "../icon";
+import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'
+import Link from 'next/link'
+import Icon from '../icon'
 
 export default function KeepExploring() {
   return (
     <>
       <Box
         sx={{
-          backgroundImage: (t) => t.util.gx("orange", "red"),
-          margin: "auto",
-          maxWidth: "90%",
+          backgroundImage: t => t.util.gx('orange', 'red'),
+          margin: 'auto',
+          maxWidth: '90%',
           my: 4,
           borderRadius: 8,
-          color: "white",
-          textAlign: "center",
-          py: 5,
+          color: 'white',
+          textAlign: 'center',
+          py: 5
         }}
       >
         <Heading
@@ -22,26 +22,26 @@ export default function KeepExploring() {
           sx={{
             fontSize: 6,
             mb: 3,
-            display: "flex",
-            justifyContent: "center",
-            alignContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center'
           }}
         >
-          Keep exploring{" "}
+          Keep exploring{' '}
           <Icon
             glyph="explore"
             size={70}
-            sx={{ display: ["none", "flex", "flex"] }}
+            sx={{ display: ['none', 'flex', 'flex'] }}
           />
         </Heading>
         <Link href="/slack" passHref>
           <Button
             sx={{
-              bg: "white",
-              color: "red",
+              bg: 'white',
+              color: 'red',
               mr: [0, 3],
               mb: [3, 0],
-              fontSize: [2, 3],
+              fontSize: [2, 3]
             }}
             as="a"
           >
@@ -50,7 +50,7 @@ export default function KeepExploring() {
         </Link>
 
         <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: "white", color: "red", fontSize: [2, 3] }} as="a">
+          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
             Discover more hackathons
           </Button>
         </Link>
@@ -58,9 +58,9 @@ export default function KeepExploring() {
 
       <Container>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           my={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Behind the scenes...
@@ -68,17 +68,17 @@ export default function KeepExploring() {
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Teenagers organize hackathons like{" "}
+            Teenagers organize hackathons like{' '}
             <a
               href="https://assemble.hackclub.com"
               target="_blank"
               rel="noreferrer"
             >
               Assemble
-            </a>{" "}
-            &{" "}
+            </a>{' '}
+            &{' '}
             <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
               Windy&nbsp;City&nbsp;Hacks
             </a>
@@ -90,5 +90,5 @@ export default function KeepExploring() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
index dafbd2c4f..522e12eb6 100644
--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@@ -1,9 +1,9 @@
-import { Box, Button, Heading, Text, Card } from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hackathons/assemble.JPG";
-import Icon from "../icon";
+import { Box, Button, Heading, Text, Card } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hackathons/assemble.JPG'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -12,30 +12,30 @@ export default function Landing() {
         <BlueGradientFilter />
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 140,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
               zIndex: 999,
-              paddingTop: 96,
+              paddingTop: 96
             }}
           >
             <Fade duration={625} bottom>
               <Card
                 variant="translucent"
                 sx={{
-                  variant: "layout.container",
+                  variant: 'layout.container',
                   maxWidth: [null, 700, 1000],
-                  borderRadius: "extra",
+                  borderRadius: 'extra',
                   p: [3, 4],
-                  position: "relative",
-                  color: "black",
+                  position: 'relative',
+                  color: 'black'
                 }}
               >
                 <Button
@@ -44,19 +44,19 @@ export default function Landing() {
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("yellow", "pink"),
-                    position: "absolute",
+                    backgroundImage: t => t.util.gx('yellow', 'pink'),
+                    position: 'absolute',
                     right: [0, -3],
                     top: -3,
                     transform: [
-                      "translateY(-50%) rotate(8deg)",
-                      "translateX(15%) rotate(12deg)",
+                      'translateY(-50%) rotate(8deg)',
+                      'translateX(15%) rotate(12deg)'
                     ],
                     fontSize: [2, 3],
-                    display: ["none", "inline", "inline"],
+                    display: ['none', 'inline', 'inline']
                   }}
                 >
-                  Looking for hackathons?{" "}
+                  Looking for hackathons?{' '}
                   <Icon glyph="external" size={30} sx={{ pl: 1 }} />
                 </Button>
 
@@ -64,19 +64,19 @@ export default function Landing() {
                   as="h2"
                   variant="title"
                   sx={{
-                    color: "black",
-                    span: { color: "white", display: "block" },
+                    color: 'black',
+                    span: { color: 'white', display: 'block' }
                   }}
                 >
-                  Welcome to the{" "}
+                  Welcome to the{' '}
                   <Text
                     as="span"
                     variant="ultratitle"
                     sx={{
-                      WebkitTextStroke: "currentColor",
-                      WebkitTextStrokeWidth: "2px",
-                      WebkitTextFillColor: "#33D6A6",
-                      whiteSpace: [null, null, "nowrap"],
+                      WebkitTextStroke: 'currentColor',
+                      WebkitTextStrokeWidth: '2px',
+                      WebkitTextFillColor: '#33D6A6',
+                      whiteSpace: [null, null, 'nowrap']
                     }}
                   >
                     high school hackathon.
@@ -87,13 +87,13 @@ export default function Landing() {
                   variant="subtitle"
                   sx={{
                     mt: 3,
-                    fontSize: [2, 3],
+                    fontSize: [2, 3]
                   }}
                 >
                   <strong>
                     It's not an extracurricular or a club. It's not a class or a
                     lecture.
-                  </strong>{" "}
+                  </strong>{' '}
                   Hackathons are a place to build things for fun and meet others
                   doing the same.
                 </Text>
@@ -106,25 +106,25 @@ export default function Landing() {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -137,7 +137,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function BlueGradientFilter() {
@@ -145,13 +145,13 @@ function BlueGradientFilter() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hackathons/overview.js b/components/hackathons/overview.js
index 81da20248..dc20476d3 100644
--- a/components/hackathons/overview.js
+++ b/components/hackathons/overview.js
@@ -1,26 +1,26 @@
-import { Box, Heading, Container, Text, Grid, Flex } from "theme-ui";
-import Photo from "../photo";
+import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
+import Photo from '../photo'
 
 export default function Overview() {
   return (
     <>
-      <Box as="section" sx={{ py: [4, 5], color: "black" }}>
-        <Container sx={{ width: "95vw" }}>
+      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
+        <Container sx={{ width: '95vw' }}>
           <Heading
             sx={{
               fontSize: [36, 50, 50, 50, 48],
               mb: 3,
-              color: "purple",
+              color: 'purple'
             }}
           >
-            A hackathon is a social coding marathon where teenagers{" "}
-            <Highlight>come together</Highlight> to{" "}
-            <Highlight>build projects</Highlight> for a weekend and{" "}
+            A hackathon is a social coding marathon where teenagers{' '}
+            <Highlight>come together</Highlight> to{' '}
+            <Highlight>build projects</Highlight> for a weekend and{' '}
             <Highlight>share them with the world</Highlight>.
           </Heading>
           <Grid columns={[null, null, 2]} gap={[3, 4]}>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "blue", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                 The best way to learn is by <b>building</b>.
               </Box>
               A hackathon is a space that helps give makers everything they need
@@ -29,7 +29,7 @@ export default function Overview() {
               their own, ready and excited to keep hacking once they get home.
             </Text>
             <Text as="p" variant="subtitle">
-              <Box sx={{ color: "green", fontSize: 28, mb: 2 }}>
+              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                 We're at our best when we're <b>making</b>.
               </Box>
               Hack Club is a global community of thousands of high school
@@ -61,7 +61,7 @@ export default function Overview() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Highlight({ children }) {
@@ -69,14 +69,14 @@ function Highlight({ children }) {
     <Text
       as="span"
       sx={{
-        bg: "yellow",
-        borderRadius: "default",
+        bg: 'yellow',
+        borderRadius: 'default',
         px: 1,
-        color: "#5d114c",
-        lineHeight: "1.3",
+        color: '#5d114c',
+        lineHeight: '1.3'
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hackathons/recap.js b/components/hackathons/recap.js
index 67d7c1d0c..cb6e9c76c 100644
--- a/components/hackathons/recap.js
+++ b/components/hackathons/recap.js
@@ -1,29 +1,29 @@
-import { Card, Box, Heading, Grid, Text, Container } from "theme-ui";
-import Stage from "../stage";
+import { Card, Box, Heading, Grid, Text, Container } from 'theme-ui'
+import Stage from '../stage'
 
 export default function Recap() {
   return (
     <>
-      <Box as="header" sx={{ textAlign: [null, "center"], pt: [4, 5] }}>
+      <Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
         <Text as="p" variant="eyebrow">
           Get started today
         </Text>
         <Heading as="h2" variant="title">
-          Resources so you can organize an{" "}
+          Resources so you can organize an{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              bg: "rgb(91, 255, 205)",
-              color: "#095365",
-              display: "inline-block",
-              whiteSpace: ["wrap", "nowrap"],
+              bg: 'rgb(91, 255, 205)',
+              color: '#095365',
+              display: 'inline-block',
+              whiteSpace: ['wrap', 'nowrap']
             }}
           >
             amazing
-          </Text>{" "}
+          </Text>{' '}
           hackathon.
         </Heading>
       </Box>
@@ -33,18 +33,18 @@ export default function Recap() {
         gap={[4, 3, 4]}
         columns={[1, null, 3]}
         sx={{
-          textAlign: "left",
-          "> a, > div": {
-            borderRadius: "extra",
-            boxShadow: "elevated",
+          textAlign: 'left',
+          '> a, > div': {
+            borderRadius: 'extra',
+            boxShadow: 'elevated',
             px: [3, null, 4],
-            py: [4, null, 5],
+            py: [4, null, 5]
           },
           span: {
             boxShadow:
-              "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+              '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
           },
-          svg: { fill: "currentColor" },
+          svg: { fill: 'currentColor' }
         }}
       >
         <Card
@@ -52,9 +52,9 @@ export default function Recap() {
           as="a"
           href="/slack"
           sx={{
-            background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-            color: "white",
-            svg: { color: "#fb558e" },
+            background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+            color: 'white',
+            svg: { color: '#fb558e' }
           }}
         >
           <Stage
@@ -70,9 +70,9 @@ export default function Recap() {
           href="/hackathons/grant"
           sx={{
             background:
-              "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(236, 55, 80)" },
+              'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(236, 55, 80)' }
           }}
         >
           <Stage
@@ -93,9 +93,9 @@ export default function Recap() {
           href="https://hackathons.hackclub.com/"
           sx={{
             background:
-              "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-            color: "white",
-            svg: { color: "rgb(51, 142, 218)" },
+              'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+            color: 'white',
+            svg: { color: 'rgb(51, 142, 218)' }
           }}
         >
           <Stage
@@ -107,5 +107,5 @@ export default function Recap() {
         </Card>
       </Grid>
     </>
-  );
+  )
 }
diff --git a/components/hackathons/scrolling-hackathons.js b/components/hackathons/scrolling-hackathons.js
index 59fc00d5c..f61caf69d 100644
--- a/components/hackathons/scrolling-hackathons.js
+++ b/components/hackathons/scrolling-hackathons.js
@@ -1,4 +1,4 @@
-import Ticker from "react-ticker";
+import Ticker from 'react-ticker'
 import {
   Box,
   Card,
@@ -7,14 +7,14 @@ import {
   Badge,
   Container,
   Image,
-  Link,
-} from "theme-ui";
-import { useState } from "react";
-import { keyframes } from "@emotion/react";
-import Tilt from "../tilt";
-import NextLink from "next/link";
-import PageVisibility from "react-page-visibility";
-import { formatAddress } from "../../lib/helpers";
+  Link
+} from 'theme-ui'
+import { useState } from 'react'
+import { keyframes } from '@emotion/react'
+import Tilt from '../tilt'
+import NextLink from 'next/link'
+import PageVisibility from 'react-page-visibility'
+import { formatAddress } from '../../lib/helpers'
 
 export default function ScrollingHackathons({
   eventData,
@@ -22,10 +22,10 @@ export default function ScrollingHackathons({
   title,
   ...props
 }) {
-  const [pageIsVisible, setPageIsVisible] = useState(true);
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <>
@@ -34,35 +34,35 @@ export default function ScrollingHackathons({
           <Heading
             sx={{
               fontSize: [36, 64],
-              color: "black",
-              textAlign: "center",
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              mt: 4,
+              color: 'black',
+              textAlign: 'center',
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              mt: 4
             }}
           >
             Join other high-schoolers at an upcoming hackathon.
           </Heading>
           <Box
             sx={{
-              maxWidth: ["95vw", "66vw"],
-              margin: "auto",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              mb: 2,
+              maxWidth: ['95vw', '66vw'],
+              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2
             }}
           >
-            <Text sx={{ display: ["none", "flex"], alignItems: "center" }}>
+            <Text sx={{ display: ['none', 'flex'], alignItems: 'center' }}>
               <Dot />
             </Text>
             <Text
               variant="lead"
-              sx={{ color: "muted", mr: 2, textAlign: "center" }}
+              sx={{ color: 'muted', mr: 2, textAlign: 'center' }}
             >
-              from{" "}
+              from{' '}
               <NextLink href="https://hackathons.hackclub.com" passHref>
-                <Link sx={{ color: "currentcolor" }}>
+                <Link sx={{ color: 'currentcolor' }}>
                   hackathons.hackclub.com
                 </Link>
               </NextLink>
@@ -75,9 +75,9 @@ export default function ScrollingHackathons({
       )}
       <PageVisibility onChange={handleVisibilityChange}>
         {pageIsVisible && (
-          <Ticker mode={mode || "string"} {...props}>
+          <Ticker mode={mode || 'string'} {...props}>
             {() => (
-              <Box as="div" sx={{ display: "flex", py: 3 }}>
+              <Box as="div" sx={{ display: 'flex', py: 3 }}>
                 {eventData.map(({ ...props }) => (
                   <EventCard key={eventData.id} {...props} />
                 ))}
@@ -87,35 +87,35 @@ export default function ScrollingHackathons({
         )}
       </PageVisibility>
     </>
-  );
+  )
 }
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 function EventCard({
@@ -131,7 +131,7 @@ function EventCard({
   logo,
   virtual,
   hybrid,
-  footer,
+  footer
 }) {
   return (
     <Tilt>
@@ -143,37 +143,37 @@ function EventCard({
         itemScope
         itemType="http://schema.org/Event"
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           px: 4,
           mx: 4,
-          borderRadius: "extra",
-          width: "400px",
-          height: "200px",
-          textDecoration: "none",
-          color: "white",
+          borderRadius: 'extra',
+          width: '400px',
+          height: '200px',
+          textDecoration: 'none',
+          color: 'white'
         }}
         style={{
           backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${banner}')`,
-          textAlign: "center",
-          backgroundSize: "cover",
+          textAlign: 'center',
+          backgroundSize: 'cover'
         }}
       >
         <Badge
           as="span"
           itemType="VirtualLocation"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 16,
             right: 16,
-            bg: "snow",
-            color: virtual ? "red" : hybrid ? "orange" : "blue",
-            fontSize: "inherit",
-            textShadow: "none",
-            borderRadius: 5,
+            bg: 'snow',
+            color: virtual ? 'red' : hybrid ? 'orange' : 'blue',
+            fontSize: 'inherit',
+            textShadow: 'none',
+            borderRadius: 5
           }}
         >
-          {virtual ? "Online" : hybrid ? "Hybrid" : "In-Person"}
+          {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}
         </Badge>
 
         {logo && (
@@ -184,9 +184,9 @@ function EventCard({
             sx={{
               minWidth: 64,
               height: 64,
-              objectFit: "contain",
-              borderRadius: "default",
-              mt: "auto",
+              objectFit: 'contain',
+              borderRadius: 'default',
+              mt: 'auto'
             }}
           />
         )}
@@ -199,10 +199,10 @@ function EventCard({
             fontSize: [3, 4],
             mt: 2,
             mb: 3,
-            overflowWrap: "anywhere",
-            width: "100%",
-            color: "white",
-            textDecoration: "none",
+            overflowWrap: 'anywhere',
+            width: '100%',
+            color: 'white',
+            textDecoration: 'none'
           }}
         >
           {name}
@@ -210,10 +210,10 @@ function EventCard({
         <Box
           as="footer"
           sx={{
-            mt: "auto",
+            mt: 'auto',
             mb: 0,
-            width: "100%",
-            opacity: 0.875,
+            width: '100%',
+            opacity: 0.875
           }}
         >
           {footer ? (
@@ -235,11 +235,11 @@ function EventCard({
             </>
           )}
         </Box>
-        <Box sx={{ display: "none" }}>
+        <Box sx={{ display: 'none' }}>
           <span itemProp="eventAttendanceMode">
             {virtual
-              ? "https://schema.org/OnlineEventAttendanceMode"
-              : "https://schema.org/OfflineEventAttendanceMode"}
+              ? 'https://schema.org/OnlineEventAttendanceMode'
+              : 'https://schema.org/OfflineEventAttendanceMode'}
           </span>
           <span itemProp="url">{website}</span>
           <span itemProp="startDate" content={start}>
@@ -251,5 +251,5 @@ function EventCard({
         </Box>
       </Card>
     </Tilt>
-  );
+  )
 }
diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 98e3e0138..29006859f 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,5 +1,5 @@
-import { Button, Text, Image, Flex } from "theme-ui";
-import Icon from "../icon";
+import { Button, Text, Image, Flex } from 'theme-ui'
+import Icon from '../icon'
 
 export default function ApplyButton() {
   return (
@@ -8,23 +8,23 @@ export default function ApplyButton() {
       as="a"
       href="/hcb/apply"
       sx={{
-        width: "100%",
-        height: "4.2rem",
+        width: '100%',
+        height: '4.2rem'
         // borderRadius: '1.5rem',
       }}
     >
       <Flex
         sx={{
-          alignItems: "center",
+          alignItems: 'center',
           gap: 3,
-          mr: "-32px", // Man...
+          mr: '-32px' // Man...
         }}
       >
-        <Text color="white" sx={{ fontWeight: "bold", fontSize: 4 }}>
+        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
           Apply now
         </Text>
         <Icon glyph="view-forward" size={46} color="white" />
       </Flex>
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/address-input.js b/components/hcb/apply/address-input.js
index 234d3981d..e4b40cd64 100644
--- a/components/hcb/apply/address-input.js
+++ b/components/hcb/apply/address-input.js
@@ -1,92 +1,92 @@
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Input, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
-import AutofillColourFix from "./autofill-colour-fix";
-import { geocode, search } from "../../../lib/hcb/apply/address-validation";
-import Icon from "../../icon";
+import { useEffect, useRef, useState } from 'react'
+import { Box, Flex, Input, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
+import AutofillColourFix from './autofill-colour-fix'
+import { geocode, search } from '../../../lib/hcb/apply/address-validation'
+import Icon from '../../icon'
 
 const approvedCountries = [
-  "AT",
-  "FI",
-  "FR",
-  "DE",
-  "GR",
-  "ES",
-  "IT",
-  "SE",
-  "TR",
-  "GB",
-  "NO",
-  "UA",
-  "BR",
-  "CO",
-  "US",
-  "CA",
-  "MX",
-  "JP",
-  "PH",
-  "MY",
-  "SG",
-];
+  'AT',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'ES',
+  'IT',
+  'SE',
+  'TR',
+  'GB',
+  'NO',
+  'UA',
+  'BR',
+  'CO',
+  'US',
+  'CA',
+  'MX',
+  'JP',
+  'PH',
+  'MY',
+  'SG'
+]
 
 export default function AutoComplete({ name, isPersonalAddressInput }) {
-  const input = useRef();
-  const base = useRef();
-  const [predictions, setPredictions] = useState(null);
-  const [countryCode, setCountryCode] = useState(null);
+  const input = useRef()
+  const base = useRef()
+  const [predictions, setPredictions] = useState(null)
+  const [countryCode, setCountryCode] = useState(null)
 
-  const optionClicked = async (prediction) => {
-    input.current.value = prediction.name;
-    await onInput(prediction.name);
-    setPredictions(null);
-  };
-  const clickOutside = (e) => {
+  const optionClicked = async prediction => {
+    input.current.value = prediction.name
+    await onInput(prediction.name)
+    setPredictions(null)
+  }
+  const clickOutside = e => {
     if (input.current && !input.current.contains(e.target)) {
-      setPredictions(null);
+      setPredictions(null)
     }
-  };
+  }
 
-  const onInput = async (value) => {
-    setPredictions(value ? (await search(value)).results : null);
+  const onInput = async value => {
+    setPredictions(value ? (await search(value)).results : null)
 
-    if (isPersonalAddressInput) return;
+    if (isPersonalAddressInput) return
     geocode(value)
-      .then((res) => {
-        const country = res?.results[0]?.country;
-        const countryCode = res?.results[0]?.countryCode;
+      .then(res => {
+        const country = res?.results[0]?.country
+        const countryCode = res?.results[0]?.countryCode
 
-        setCountryCode(countryCode);
+        setCountryCode(countryCode)
 
-        sessionStorage.setItem("bank-signup-eventCountry", country);
-        sessionStorage.setItem("bank-signup-eventCountryCode", countryCode);
+        sessionStorage.setItem('bank-signup-eventCountry', country)
+        sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
       })
-      .catch((err) => console.error(err));
-  };
+      .catch(err => console.error(err))
+  }
 
-  const onInputWrapper = async (e) => {
-    if (e.target.value) await onInput(e.target.value);
-  };
+  const onInputWrapper = async e => {
+    if (e.target.value) await onInput(e.target.value)
+  }
 
   //TODO: Close suggestions view when focus is lost via tabbing.
   //TODO: Navigate suggestions with arrow keys.
 
   useEffect(() => {
-    const inputEl = input.current;
-    if (!inputEl) return;
+    const inputEl = input.current
+    if (!inputEl) return
 
-    document.addEventListener("click", clickOutside);
-    inputEl.addEventListener("input", onInputWrapper);
-    inputEl.addEventListener("focus", onInputWrapper);
+    document.addEventListener('click', clickOutside)
+    inputEl.addEventListener('input', onInputWrapper)
+    inputEl.addEventListener('focus', onInputWrapper)
 
     return () => {
-      document.removeEventListener("click", clickOutside);
-      inputEl.removeEventListener("input", onInputWrapper);
-      inputEl.removeEventListener("focus", onInputWrapper);
-    };
-  }, []);
+      document.removeEventListener('click', clickOutside)
+      inputEl.removeEventListener('input', onInputWrapper)
+      inputEl.removeEventListener('focus', onInputWrapper)
+    }
+  }, [])
 
   return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
       <FlexCol flexDirection="column" position="relative" width="100%" gap="2">
         <Input
           ref={input}
@@ -99,17 +99,17 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         <Box>
           {/* {String(countryCode)} */}
           {countryCode && !approvedCountries.includes(countryCode) && (
-            <Flex sx={{ alignItems: "center" }}>
+            <Flex sx={{ alignItems: 'center' }}>
               <Icon
                 glyph="sad"
                 size="2.5rem"
-                sx={{ color: "red", mr: 1, flexShrink: 0 }}
+                sx={{ color: 'red', mr: 1, flexShrink: 0 }}
               />
               <Text
                 as="label"
                 htmlFor={name}
                 sx={{
-                  color: "red",
+                  color: 'red'
                   // fontWeight: 'medium',
                 }}
               >
@@ -127,13 +127,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
       {predictions && predictions.length > 0 && (
         <Box
           sx={{
-            background: "#47454f",
-            border: "1px solid #696675",
-            width: "100%",
+            background: '#47454f',
+            border: '1px solid #696675',
+            width: '100%',
             p: 3,
-            borderRadius: "4px",
-            position: "absolute",
-            bottom: "calc(100% + 0.5em)",
+            borderRadius: '4px',
+            position: 'absolute',
+            bottom: 'calc(100% + 0.5em)'
           }}
         >
           <FlexCol gap={1}>
@@ -143,16 +143,16 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                   as="button"
                   onClick={() => optionClicked(prediction)}
                   sx={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    color: "#d1cbe7",
-                    "&:hover": {
-                      color: "white",
+                    cursor: 'pointer',
+                    border: 'none',
+                    background: 'none',
+                    color: '#d1cbe7',
+                    '&:hover': {
+                      color: 'white'
                     },
-                    fontFamily: "inherit",
-                    fontSize: "inherit",
-                    textAlign: "inherit",
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    textAlign: 'inherit'
                   }}
                   key={idx}
                 >
@@ -162,8 +162,8 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
                 {idx < predictions.length - 1 && (
                   <hr
                     style={{
-                      width: "100%",
-                      color: "#8492a6",
+                      width: '100%',
+                      color: '#8492a6'
                     }}
                   />
                 )}
@@ -173,5 +173,5 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         </Box>
       )}
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/alert-modal.js b/components/hcb/apply/alert-modal.js
index 71bbeb504..09b06f791 100644
--- a/components/hcb/apply/alert-modal.js
+++ b/components/hcb/apply/alert-modal.js
@@ -1,36 +1,36 @@
-import { Box, Button, Flex, Text } from "theme-ui";
-import Icon from "../../icon";
+import { Box, Button, Flex, Text } from 'theme-ui'
+import Icon from '../../icon'
 
 export default function AlertModal({ formError, setFormError }) {
-  if (!formError) return null;
+  if (!formError) return null
 
-  const close = () => setFormError(null);
+  const close = () => setFormError(null)
 
   return (
     <Box>
       <Box
         onClick={close}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          background: "#000000",
+          background: '#000000',
           opacity: 0.5,
-          zIndex: 1000,
+          zIndex: 1000
         }}
       />
       <Flex
         sx={{
-          flexDirection: "column",
-          alignItems: "center",
+          flexDirection: 'column',
+          alignItems: 'center',
           gap: 3,
-          background: "#252429",
-          position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
+          background: '#252429',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
           zIndex: 1001,
           padding: 4,
-          borderRadius: "default",
+          borderRadius: 'default'
         }}
       >
         <Text variant="title">Oops!</Text>
@@ -38,5 +38,5 @@ export default function AlertModal({ formError, setFormError }) {
         <Button onClick={close}>Dismiss</Button>
       </Flex>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/autofill-colour-fix.js b/components/hcb/apply/autofill-colour-fix.js
index 275d36272..b9aa59d11 100644
--- a/components/hcb/apply/autofill-colour-fix.js
+++ b/components/hcb/apply/autofill-colour-fix.js
@@ -1,10 +1,10 @@
 //TODO: Move to main theme
 
 const autofillColourFix = {
-  "&:-webkit-autofill": {
-    boxShadow: "0 0 0 100px #252429 inset !important",
-    WebkitTextFillColor: "white",
-  },
-};
+  '&:-webkit-autofill': {
+    boxShadow: '0 0 0 100px #252429 inset !important',
+    WebkitTextFillColor: 'white'
+  }
+}
 
-export default autofillColourFix;
+export default autofillColourFix
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index ac8b45c10..0442d343c 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,26 +1,26 @@
-import { useEffect, useState } from "react";
-import Icon from "../../icon";
+import { useEffect, useState } from 'react'
+import Icon from '../../icon'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
-  const [checked, setChecked] = useState(defaultChecked);
-  const toggle = () => setChecked(!checked);
+  const [checked, setChecked] = useState(defaultChecked)
+  const toggle = () => setChecked(!checked)
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      input && setChecked(value === "true");
+      const input = document.getElementById(name)
+      input && setChecked(value === 'true')
     }
-  }, [name]);
+  }, [name])
 
   return (
     <>
       <input aria-hidden="true" type="hidden" value={checked} name={name} />
       <Icon
-        glyph={checked ? "checkmark" : "checkbox"}
+        glyph={checked ? 'checkmark' : 'checkbox'}
         size={size}
         id={name}
         name={name}
@@ -28,8 +28,8 @@ export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
         role="checkbox"
         tabindex="0"
         onClick={() => toggle()}
-        onKeyDown={(e) => e.key === "Enter" && toggle()}
+        onKeyDown={e => e.key === 'Enter' && toggle()}
       />
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index be5c411da..4b942e1fc 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { Box, Flex, Label, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Box, Flex, Label, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 export default function Field({
   name,
@@ -9,38 +9,38 @@ export default function Field({
   description,
   col = true,
   requiredFields,
-  children,
+  children
 }) {
-  const router = useRouter();
+  const router = useRouter()
   const isRequired =
-    requiredFields[parseInt(router.query.step) - 1].includes(name);
+    requiredFields[parseInt(router.query.step) - 1].includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem("bank-signup-" + name);
+    const value = sessionStorage.getItem('bank-signup-' + name)
     if (value) {
-      const input = document.getElementById(name);
-      if (input) input.value = value;
+      const input = document.getElementById(name)
+      if (input) input.value = value
     }
-  }, [name]);
+  }, [name])
 
   return (
-    <FlexCol gap={2} width={"100%"}>
+    <FlexCol gap={2} width={'100%'}>
       <Flex
         sx={{
-          flexDirection: col ? "column" : "row",
-          alignItems: col ? "flex-start" : "center",
-          gap: 2,
+          flexDirection: col ? 'column' : 'row',
+          alignItems: col ? 'flex-start' : 'center',
+          gap: 2
         }}
       >
-        <Flex sx={{ alignItems: "center", gap: 2 }}>
+        <Flex sx={{ alignItems: 'center', gap: 2 }}>
           <Label
             htmlFor={name}
             sx={{
-              textTransform: "capitalize",
+              textTransform: 'capitalize',
               fontSize: 3,
-              width: "fit-content",
+              width: 'fit-content'
             }}
           >
             {label}
@@ -48,11 +48,11 @@ export default function Field({
           {isRequired && (
             <Box
               sx={{
-                backgroundColor: "muted",
-                padding: "4px 6px",
-                borderRadius: "999px",
-                lineHeight: "1",
-                fontSize: 14,
+                backgroundColor: 'muted',
+                padding: '4px 6px',
+                borderRadius: '999px',
+                lineHeight: '1',
+                fontSize: 14
               }}
             >
               Required
@@ -62,8 +62,8 @@ export default function Field({
         {children}
       </Flex>
       {description && (
-        <Text sx={{ color: "muted", fontSize: 1 }}>{description}</Text>
+        <Text sx={{ color: 'muted', fontSize: 1 }}>{description}</Text>
       )}
     </FlexCol>
-  );
+  )
 }
diff --git a/components/hcb/apply/form-container.js b/components/hcb/apply/form-container.js
index fbe1ec707..f9ff0fd9e 100644
--- a/components/hcb/apply/form-container.js
+++ b/components/hcb/apply/form-container.js
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Box } from "theme-ui";
+import { forwardRef } from 'react'
+import { Box } from 'theme-ui'
 
 const formContainer = forwardRef(({ children }, ref) => {
   return (
@@ -7,23 +7,23 @@ const formContainer = forwardRef(({ children }, ref) => {
       ref={ref}
       as="form"
       sx={{
-        height: "100%",
-        width: ["100%", null, null, "50ch"],
-        flex: "1",
-        overflowY: ["none", null, null, "auto"],
-        pr: [0, null, "2ch"],
+        height: '100%',
+        width: ['100%', null, null, '50ch'],
+        flex: '1',
+        overflowY: ['none', null, null, 'auto'],
+        pr: [0, null, '2ch'],
         pl: [0, null, 1],
         pb: [0, null, 3],
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4
       }}
     >
       {children}
     </Box>
-  );
-});
+  )
+})
 
 // https://stackoverflow.com/a/67993106/10652680
-formContainer.displayName = "formContainer";
-export default formContainer;
+formContainer.displayName = 'formContainer'
+export default formContainer
diff --git a/components/hcb/apply/hcb-info.js b/components/hcb/apply/hcb-info.js
index 75c128834..d88eda205 100644
--- a/components/hcb/apply/hcb-info.js
+++ b/components/hcb/apply/hcb-info.js
@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Text } from "theme-ui";
-import Icon from "../../icon";
-import FlexCol from "../../flex-col";
+import { Box, Flex, Link, Text } from 'theme-ui'
+import Icon from '../../icon'
+import FlexCol from '../../flex-col'
 
 export default function HCBInfo() {
   return (
@@ -12,23 +12,23 @@ export default function HCBInfo() {
           </Text>
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
-              <Flex sx={{ alignItems: "center", gap: 2 }}>
+              <Flex sx={{ alignItems: 'center', gap: 2 }}>
                 <Link
                   color="white"
                   href="/hcb/fiscal-sponsorship"
                   target="_blank"
                   sx={{
                     fontSize: 3,
-                    display: "inline-flex",
-                    alignItems: "flex-end",
-                    gap: 1,
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    gap: 1
                   }}
                 >
                   A fiscal sponsor
                   <Icon glyph="external" />
                 </Link>
               </Flex>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>Nonprofit status.</li>
                   <li>Tax-deductable donations.</li>
@@ -37,7 +37,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>A financial platform</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>A donations page and invoicing system.</li>
                   <li>Transfer money electronically.</li>
@@ -54,10 +54,10 @@ export default function HCBInfo() {
           <FlexCol gap={3} ml={3}>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>
-                A bank!{" "}
-                <Text sx={{ color: "muted", fontSize: 2 }}>(we're better)</Text>
+                A bank!{' '}
+                <Text sx={{ color: 'muted', fontSize: 2 }}>(we're better)</Text>
               </Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     Rather than setting up a standard bank account, you'll get a
@@ -69,7 +69,7 @@ export default function HCBInfo() {
             </FlexCol>
             <FlexCol gap={2}>
               <Text sx={{ fontSize: 3 }}>For-profit</Text>
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 <ul>
                   <li>
                     If you’re a for-profit entity, then HCB is not for you.
@@ -82,5 +82,5 @@ export default function HCBInfo() {
         </FlexCol>
       </FlexCol>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/apply/nav-button.js b/components/hcb/apply/nav-button.js
index f6c76c92e..2436a323e 100644
--- a/components/hcb/apply/nav-button.js
+++ b/components/hcb/apply/nav-button.js
@@ -1,38 +1,38 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { Button, Flex, Text, Spinner } from "theme-ui";
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Flex, Text, Spinner } from 'theme-ui'
 
 async function sendApplication() {
   // Get the form data from sessionStorage
-  const data = {};
+  const data = {}
   for (let i = 0; i < sessionStorage.length; i++) {
-    const key = sessionStorage.key(i);
-    if (key.startsWith("bank-signup-")) {
-      data[key.replace("bank-signup-", "")] = sessionStorage.getItem(key);
+    const key = sessionStorage.key(i)
+    if (key.startsWith('bank-signup-')) {
+      data[key.replace('bank-signup-', '')] = sessionStorage.getItem(key)
     }
   }
-  console.dir("Sending data:", data);
+  console.dir('Sending data:', data)
 
   // Send the data
   try {
-    const res = await fetch("/api/hcb/apply", {
-      method: "POST",
-      cors: "no-cors",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
+    const res = await fetch('/api/hcb/apply', {
+      method: 'POST',
+      cors: 'no-cors',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 }
 
 function NavIcon({ isBack }) {
   const style = {
-    height: "1em",
-    fill: "white",
+    height: '1em',
+    fill: 'white',
     margin: 0,
-    flexShrink: 0,
-  };
+    flexShrink: 0
+  }
 
   return isBack ? (
     <svg style={style} viewBox="10.73 7.72 9.27 16.53">
@@ -46,7 +46,7 @@ function NavIcon({ isBack }) {
         <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path>
       </g>
     </svg>
-  );
+  )
 }
 
 export default function NavButton({
@@ -54,125 +54,125 @@ export default function NavButton({
   form,
   clickHandler,
   requiredFields,
-  setFormError,
+  setFormError
 }) {
-  const router = useRouter();
-  const [spinner, setSpinner] = useState(false);
+  const router = useRouter()
+  const [spinner, setSpinner] = useState(false)
 
   useEffect(() => {
-    setSpinner(false);
-  }, [router.query.step]);
+    setSpinner(false)
+  }, [router.query.step])
 
-  const minStep = 1;
-  const maxStep = 3;
+  const minStep = 1
+  const maxStep = 3
 
   const click = async () => {
-    setSpinner(true);
+    setSpinner(true)
 
-    let step = parseInt(router.query.step);
+    let step = parseInt(router.query.step)
 
     async function setStep(s) {
       await router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: s },
+          query: { ...router.query, step: s }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
 
     if (!step) {
       // Set the step query param to minStep if it's not there.
-      await setStep(minStep);
+      await setStep(minStep)
     } else if (step === minStep && isBack) {
-      await router.push("/hcb");
-      return;
+      await router.push('/hcb')
+      return
     } else if (step < minStep) {
       // Set the step query param to minStep if it's lower than that.
-      await setStep(minStep);
+      await setStep(minStep)
     }
 
     /* Don't return from inside the loop since 
         we want all input values to be saved every time */
-    let wasError = false;
+    let wasError = false
 
-    const formData = new FormData(form.current);
+    const formData = new FormData(form.current)
 
     // Save form data
     formData.forEach((value, key) => {
-      sessionStorage.setItem("bank-signup-" + key, value);
+      sessionStorage.setItem('bank-signup-' + key, value)
 
       // Check if there are empty required fields.
       if (
         (!isBack &&
-          (!value || value.trim() === "") &&
+          (!value || value.trim() === '') &&
           requiredFields[step - 1].includes(key)) ||
         (!isBack &&
-          formData.get("contactOption") === "slack" &&
-          !formData.get("slackUsername")) // I'm so sorry for this
+          formData.get('contactOption') === 'slack' &&
+          !formData.get('slackUsername')) // I'm so sorry for this
       ) {
-        setFormError("Please fill all required fields");
-        wasError = true;
-        setSpinner(false);
+        setFormError('Please fill all required fields')
+        wasError = true
+        setSpinner(false)
       }
-    });
-    if (wasError) return;
+    })
+    if (wasError) return
 
     // Run the parent's click handler for this button.
-    if (clickHandler) await clickHandler();
+    if (clickHandler) await clickHandler()
 
     if (step >= maxStep && !isBack) {
-      await sendApplication();
-      await router.push("/hcb/apply/success");
-      return;
+      await sendApplication()
+      await router.push('/hcb/apply/success')
+      return
     } else {
-      step += isBack ? -1 : 1;
+      step += isBack ? -1 : 1
     }
-    await setStep(step);
-  };
+    await setStep(step)
+  }
 
   return (
     <Button
-      variant={isBack ? "outline" : "ctaLg"}
+      variant={isBack ? 'outline' : 'ctaLg'}
       sx={{
-        color: "white",
-        width: "100%",
-        maxWidth: isBack ? "8rem" : "10rem",
-        position: "relative",
+        color: 'white',
+        width: '100%',
+        maxWidth: isBack ? '8rem' : '10rem',
+        position: 'relative'
       }}
       onClick={click}
     >
       <Flex
         sx={{
-          flexDirection: isBack ? "row" : "row-reverse",
-          justifyContent: "center",
-          placeItems: "center",
+          flexDirection: isBack ? 'row' : 'row-reverse',
+          justifyContent: 'center',
+          placeItems: 'center',
           fontSize: isBack ? 2 : 4,
-          gap: [2, null, null, 3],
+          gap: [2, null, null, 3]
         }}
       >
         <NavIcon isBack={isBack} />
         <Text
           sx={{
-            textTransform: "none",
-            fontWeight: "bold",
+            textTransform: 'none',
+            fontWeight: 'bold'
           }}
         >
-          {isBack ? "Back" : "Next"}
+          {isBack ? 'Back' : 'Next'}
         </Text>
       </Flex>
       {!isBack && spinner && (
         <Spinner
           sx={{
-            height: "32px",
-            color: "white",
-            position: "absolute",
-            right: "-0.3rem",
-            margin: "0 !important",
+            height: '32px',
+            color: 'white',
+            position: 'absolute',
+            right: '-0.3rem',
+            margin: '0 !important'
           }}
         />
       )}
     </Button>
-  );
+  )
 }
diff --git a/components/hcb/apply/org-form.js b/components/hcb/apply/org-form.js
index 806e71088..f71c467d1 100644
--- a/components/hcb/apply/org-form.js
+++ b/components/hcb/apply/org-form.js
@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react";
-import { Input, Textarea } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
+import { useState, useEffect } from 'react'
+import { Input, Textarea } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState("organization");
+  const [org, setOrg] = useState('organization')
 
   useEffect(() => {
-    if (navigator.language === "en-GB") setOrg("organisation");
-  }, []);
+    if (navigator.language === 'en-GB') setOrg('organisation')
+  }, [])
 
   return (
     <>
@@ -73,12 +73,12 @@ export default function OrganizationInfoForm({ requiredFields }) {
           id="eventDescription"
           rows={3}
           sx={{
-            resize: "vertical",
-            width: "100%",
-            ...AutofillColourFix,
+            resize: 'vertical',
+            width: '100%',
+            ...AutofillColourFix
           }}
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/personal-form.js b/components/hcb/apply/personal-form.js
index d05508055..dc7cb869c 100644
--- a/components/hcb/apply/personal-form.js
+++ b/components/hcb/apply/personal-form.js
@@ -1,22 +1,22 @@
-import { Input, Flex, Label, Radio } from "theme-ui";
-import Checkbox from "./checkbox";
-import AddressInput from "./address-input";
-import Field from "./field";
-import AutofillColourFix from "./autofill-colour-fix";
-import { useState } from "react";
+import { Input, Flex, Label, Radio } from 'theme-ui'
+import Checkbox from './checkbox'
+import AddressInput from './address-input'
+import Field from './field'
+import AutofillColourFix from './autofill-colour-fix'
+import { useState } from 'react'
 
 export default function PersonalInfoForm({
   setValidationResult,
-  requiredFields,
+  requiredFields
 }) {
-  const [selectedContactOption, setSelectedContactOption] = useState("Email");
+  const [selectedContactOption, setSelectedContactOption] = useState('Email')
   const [email, setEmail] = useState(
-    window.sessionStorage.getItem("bank-signup-userEmail"),
-  ); // For display only, is not used for data submission.
+    window.sessionStorage.getItem('bank-signup-userEmail')
+  ) // For display only, is not used for data submission.
 
   return (
     <>
-      <Flex sx={{ justifyContent: "space-between", gap: 4 }}>
+      <Flex sx={{ justifyContent: 'space-between', gap: 4 }}>
         <Field
           name="firstName"
           label="First name"
@@ -48,7 +48,7 @@ export default function PersonalInfoForm({
           id="userEmail"
           type="email"
           placeholder="fiona@hackclub.com"
-          onInput={(e) => setEmail(e.target.value)}
+          onInput={e => setEmail(e.target.value)}
           sx={{ ...AutofillColourFix }}
         />
       </Field>
@@ -120,33 +120,33 @@ export default function PersonalInfoForm({
         <Flex sx={{ gap: 4 }}>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Email"
               defaultChecked={true}
-              onInput={() => setSelectedContactOption("Email")}
+              onInput={() => setSelectedContactOption('Email')}
             />
             Email
           </Label>
           <Label
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row'
             }}
           >
             <Radio
               name="contactOption"
               value="Slack"
-              onInput={() => setSelectedContactOption("Slack")}
+              onInput={() => setSelectedContactOption('Slack')}
             />
             Slack
           </Label>
         </Flex>
-        {selectedContactOption === "Slack" ? (
+        {selectedContactOption === 'Slack' ? (
           <Field name="slackUsername" requiredFields={requiredFields}>
             <Input
               name="slackUsername"
@@ -155,9 +155,9 @@ export default function PersonalInfoForm({
               sx={{ ...AutofillColourFix }}
             />
           </Field>
-        ) : selectedContactOption === "Email" ? (
+        ) : selectedContactOption === 'Email' ? (
           <div>
-            We'll use {email ?? "whatever you put for your email above!"}
+            We'll use {email ?? 'whatever you put for your email above!'}
           </div>
         ) : null}
       </Field>
@@ -175,5 +175,5 @@ export default function PersonalInfoForm({
         />
       </Field>
     </>
-  );
+  )
 }
diff --git a/components/hcb/apply/progress.js b/components/hcb/apply/progress.js
index d4ab64ea7..a82976f9b 100644
--- a/components/hcb/apply/progress.js
+++ b/components/hcb/apply/progress.js
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import FlexCol from "../../flex-col";
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import FlexCol from '../../flex-col'
 
 function StepIcon({ completed, number }) {
-  let strokeColour = completed ? "#33d6a6" : "#8492a6";
-  let fillColour = completed ? "#33d6a6" : "none";
+  let strokeColour = completed ? '#33d6a6' : '#8492a6'
+  let fillColour = completed ? '#33d6a6' : 'none'
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <svg
-        style={{ translate: "0 1px" }}
+        style={{ translate: '0 1px' }}
         width="40"
         height="40"
         viewBox="0 0 40 40"
@@ -27,59 +27,59 @@ function StepIcon({ completed, number }) {
       </svg>
       <Flex
         sx={{
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "absolute",
-          inset: "0",
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'absolute',
+          inset: '0'
         }}
       >
         <Text
           sx={{
-            color: "white",
-            fontSize: 2,
+            color: 'white',
+            fontSize: 2
           }}
         >
           {number}
         </Text>
       </Flex>
     </Box>
-  );
+  )
 }
 
 function Step({ number, label, completed }) {
   return (
-    <Flex sx={{ lineHeight: "1", alignItems: "center", gap: "4" }}>
+    <Flex sx={{ lineHeight: '1', alignItems: 'center', gap: '4' }}>
       <StepIcon completed={completed} number={number + 1} />
       <Text
         sx={{
-          fontSize: "3",
-          display: ["none", null, null, "block"],
+          fontSize: '3',
+          display: ['none', null, null, 'block']
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Progress() {
-  const router = useRouter();
-  const step = parseInt(router.query.step);
+  const router = useRouter()
+  const step = parseInt(router.query.step)
 
-  const labels = ["Intro", "Organization info", "Personal info"];
+  const labels = ['Intro', 'Organization info', 'Personal info']
 
   return (
     <Flex
       sx={{
         gap: 3,
-        translate: [0, null, null, "-1rem 0"],
-        flexDirection: ["row", null, null, "column"],
+        translate: [0, null, null, '-1rem 0'],
+        flexDirection: ['row', null, null, 'column']
       }}
     >
       {labels.map((label, i) => (
         <Step number={i} label={label} completed={step > i} key={i} />
       ))}
     </Flex>
-  );
+  )
 }
diff --git a/components/hcb/apply/watermark.js b/components/hcb/apply/watermark.js
index bcefad827..a6b6323c9 100644
--- a/components/hcb/apply/watermark.js
+++ b/components/hcb/apply/watermark.js
@@ -1,38 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import React, { useRef, useEffect } from 'react'
+import { Box } from 'theme-ui'
 
 export default function Watermark() {
   /* This is going to come back to haunt me one day.
     It's an abomination but it works ... for now */
 
-  const shineRef = useRef();
-  const svgRef = useRef();
+  const shineRef = useRef()
+  const svgRef = useRef()
 
   // Mouse move event
   const handleMouseMove = ({ clientX, clientY }) => {
-    if (!shineRef.current || !svgRef.current) return;
+    if (!shineRef.current || !svgRef.current) return
 
-    const svgWidth = svgRef.current.clientWidth / 100;
-    const svgFromTop = svgRef.current.getBoundingClientRect().top;
-    const svgFromLeft = svgRef.current.getBoundingClientRect().left;
+    const svgWidth = svgRef.current.clientWidth / 100
+    const svgFromTop = svgRef.current.getBoundingClientRect().top
+    const svgFromLeft = svgRef.current.getBoundingClientRect().left
 
-    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`;
-    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`;
-  };
+    shineRef.current.style.top = `${clientY / svgWidth + 6.2}px`
+    shineRef.current.style.left = `${clientX / svgWidth + 9.2}px`
+  }
 
   // Bind event
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
         top: -330,
-        left: -480,
+        left: -480
       }}
     >
       <svg
@@ -40,9 +40,9 @@ export default function Watermark() {
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
         style={{
-          position: "fixed",
-          width: "4600px",
-          overflow: "hidden",
+          position: 'fixed',
+          width: '4600px',
+          overflow: 'hidden'
         }}
       >
         <defs>
@@ -55,22 +55,22 @@ export default function Watermark() {
           <foreignObject id="clip-content" width="100%" height="100%">
             <Box
               sx={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#1d181f",
-                clipPath: "url(#my-clip-path)",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#1d181f',
+                clipPath: 'url(#my-clip-path)'
               }}
             >
               <Box
                 ref={shineRef}
                 sx={{
-                  position: "absolute",
-                  width: "2px",
-                  height: "2px",
-                  borderRadius: "50%",
-                  backgroundColor: "red",
-                  filter: "blur(2px)",
+                  position: 'absolute',
+                  width: '2px',
+                  height: '2px',
+                  borderRadius: '50%',
+                  backgroundColor: 'red',
+                  filter: 'blur(2px)'
                 }}
               />
             </Box>
@@ -78,5 +78,5 @@ export default function Watermark() {
         </g>
       </svg>
     </Box>
-  );
+  )
 }
diff --git a/components/hcb/directory/card.js b/components/hcb/directory/card.js
index cc482a6e6..c3b27ce7f 100644
--- a/components/hcb/directory/card.js
+++ b/components/hcb/directory/card.js
@@ -1,8 +1,8 @@
-import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from "theme-ui";
-import { Organization } from "../../../pages/hcb/climate";
-import Tilt from "../../../components/tilt";
-import Icon from "@hackclub/icons";
-import Tooltip from "../tooltip";
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/hcb/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+import Tooltip from '../tooltip'
 
 export const Badge = ({ badge }) =>
   badge.image ? (
@@ -10,49 +10,49 @@ export const Badge = ({ badge }) =>
       as="span"
       sx={{
         backgroundImage: `url("${badge.image}")`,
-        backgroundSize: "contain",
-        backgroundColor: "unset",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        fontSize: "inherit",
-        textShadow: "none",
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "block",
+        display: 'block',
         height: 30,
-        width: 38,
+        width: 38
       }}
     >
-      <span style={{ opacity: "0" }}>.</span>
+      <span style={{ opacity: '0' }}>.</span>
     </ThemeBadge>
   ) : (
     <ThemeBadge
       as="span"
       sx={{
         bg: badge.color,
-        color: "snow",
-        fontSize: "inherit",
-        textShadow: "none",
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
         borderRadius: 5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Icon glyph={badge.icon} size={30} />
     </ThemeBadge>
-  );
+  )
 
 const TagRow = ({ category, type, badgeNames }) => {
   return (
     <>
       {badgeNames
-        .map((name) => badges[name])
+        .map(name => badges[name])
         .map((Badge, i) => (
           <Badge key={i} />
         ))}
     </>
-  );
-};
+  )
+}
 
 /**
  *
@@ -66,7 +66,7 @@ export const OrganizationCard = ({
   openModal,
   badges,
   organization,
-  showTags = false,
+  showTags = false
 }) => (
   <Tilt>
     <Card
@@ -76,38 +76,38 @@ export const OrganizationCard = ({
       itemType="http://schema.org/Event"
       variant="event"
       sx={{
-        justifyContent: "center",
-        alignItems: "center",
+        justifyContent: 'center',
+        alignItems: 'center',
         minHeight: 128,
-        color: "white",
-        cursor: "pointer",
-        textShadow: "0 1px 4px rgba(0, 0, 0, 0.375)",
-        textDecoration: "none",
-        backgroundColor: "black",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        borderRadius: "extra",
-        overflow: "hidden",
-        position: "relative",
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
         p: 3,
-        height: "100%",
-        display: "flex",
+        height: '100%',
+        display: 'flex',
         px: 3,
         backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
-        textAlign: "center",
-        flexDirection: "column",
+        textAlign: 'center',
+        flexDirection: 'column'
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
-          width: "100%",
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
           gap: 2,
-          flexDirection: "row",
-          mb: 3,
+          flexDirection: 'row',
+          mb: 3
         }}
       >
         {badges.map((badge, i) => (
@@ -127,23 +127,23 @@ export const OrganizationCard = ({
           sx={{
             minWidth: 64,
             height: 64,
-            objectFit: "contain",
-            objectPosition: "left",
-            borderRadius: "default",
-            mt: "auto",
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
           }}
         />
       )}
       <Heading
-        as={"h3"}
+        as={'h3'}
         itemProp="name"
         sx={{
           fontSize: [3, 4],
           mt: 2,
           mb: 3,
-          overflowWrap: "anywhere",
-          width: "100%",
-          display: "block",
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
         }}
       >
         {organization.name}
@@ -151,11 +151,11 @@ export const OrganizationCard = ({
       <Box
         as="footer"
         sx={{
-          mt: "auto",
+          mt: 'auto',
           mb: 0,
-          width: "100%",
+          width: '100%',
           opacity: 0.875,
-          textTransform: "none",
+          textTransform: 'none'
         }}
       >
         <>
@@ -171,11 +171,11 @@ export const OrganizationCard = ({
           </Text>
         </>
       </Box>
-      <Box sx={{ display: "none" }}>
+      <Box sx={{ display: 'none' }}>
         <span itemProp="url">{organization.links.website}</span>
       </Box>
     </Card>
   </Tilt>
-);
+)
 
-export default OrganizationCard;
+export default OrganizationCard
diff --git a/components/hcb/everything.js b/components/hcb/everything.js
index 1dcaa1c8c..1474a82f2 100644
--- a/components/hcb/everything.js
+++ b/components/hcb/everything.js
@@ -1,7 +1,7 @@
-import { Box, Container, Heading, Text, Link, Grid } from "theme-ui";
-import Run from "./run";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Container, Heading, Text, Link, Grid } from 'theme-ui'
+import Run from './run'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Everything({ fee, partner = false }) {
   return (
@@ -11,53 +11,53 @@ export default function Everything({ fee, partner = false }) {
           pt: 6,
           pb: [3, 6],
           marginTop: 6,
-          bg: "darker",
+          bg: 'darker'
         }}
       >
-        <Container mb={[4, 5]} px={3} sx={{ textAlign: "center" }}>
-          <Heading variant="ultratitle" sx={{ color: "smoke" }}>
+        <Container mb={[4, 5]} px={3} sx={{ textAlign: 'center' }}>
+          <Heading variant="ultratitle" sx={{ color: 'smoke' }}>
             Everything you’ll&nbsp;need.
           </Heading>
         </Container>
         <Container px={[3, null, 5]}>
           <List>
             {Object.entries({
-              "Legal entity with 501(c)(3) status": "briefcase",
-              "We do your taxes": "checkmark",
-              "Share access with your whole team": "member-add",
-              "Backed by a bank account under the hood": "bank-account",
-              "Instant invoice sending": "transactions",
-              "Real-time dashboard of finances": "analytics",
-              "Transaction data export": "download",
-              "Record shared notes on transactions": "docs",
-              "24-hour response support": "clock",
-              "Reimbursement process": "enter",
+              'Legal entity with 501(c)(3) status': 'briefcase',
+              'We do your taxes': 'checkmark',
+              'Share access with your whole team': 'member-add',
+              'Backed by a bank account under the hood': 'bank-account',
+              'Instant invoice sending': 'transactions',
+              'Real-time dashboard of finances': 'analytics',
+              'Transaction data export': 'download',
+              'Record shared notes on transactions': 'docs',
+              '24-hour response support': 'clock',
+              'Reimbursement process': 'enter'
               //   'Instant deposits': 'bolt'
-            }).map(([item, icon = "enter"]) => (
+            }).map(([item, icon = 'enter']) => (
               <ListItem key={item} icon={icon}>
                 {item}
               </ListItem>
             ))}
             {Object.entries({
-              "Physical check sending & voiding": "",
-              "Online direct deposit & ACH transfers": "",
-              "Generate attendee legal waivers": "",
-              "Virtual debit cards (with Apple & Google Pay)": "",
-              "Debit card transaction paper trail": "",
-              "Transparency Mode": "",
+              'Physical check sending & voiding': '',
+              'Online direct deposit & ACH transfers': '',
+              'Generate attendee legal waivers': '',
+              'Virtual debit cards (with Apple & Google Pay)': '',
+              'Debit card transaction paper trail': '',
+              'Transparency Mode': ''
             }).map(([item, date]) => (
               <ListItem
                 key={item}
                 icon={
-                  item.includes("signup")
-                    ? "bolt"
-                    : item.includes("card")
-                    ? "card"
-                    : item.includes("Transparency")
-                    ? "explore"
-                    : item.includes("Physical")
-                    ? "email"
-                    : "enter"
+                  item.includes('signup')
+                    ? 'bolt'
+                    : item.includes('card')
+                    ? 'card'
+                    : item.includes('Transparency')
+                    ? 'explore'
+                    : item.includes('Physical')
+                    ? 'email'
+                    : 'enter'
                 }
               >
                 {item}
@@ -65,33 +65,33 @@ export default function Everything({ fee, partner = false }) {
             ))}
             {!partner
               ? Object.entries({
-                  "Online, embeddable donation form": "",
+                  'Online, embeddable donation form': ''
                 }).map(([item, date]) => (
                   <ListItem
                     key={item}
                     icon={
-                      item.startsWith("Instant")
-                        ? "bolt"
-                        : item.includes("form")
-                        ? "link"
-                        : "enter"
+                      item.startsWith('Instant')
+                        ? 'bolt'
+                        : item.includes('form')
+                        ? 'link'
+                        : 'enter'
                     }
                   >
                     {item}
                   </ListItem>
                 ))
-              : ""}
+              : ''}
           </List>
         </Container>
         <Run />
         <Container px={3} mt={4}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              textAlign: 'center'
             }}
           >
             <Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
@@ -103,17 +103,17 @@ export default function Everything({ fee, partner = false }) {
           <Container
             variant="copy"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 18,
-              lineHeight: "1.25",
-              letterSpacing: "-.03ch",
+              lineHeight: '1.25',
+              letterSpacing: '-.03ch',
               marginTop: 4,
-              marginBottom: 5,
+              marginBottom: 5
             }}
           >
             <Container variant="narrow">
-              <Text sx={{ color: "muted", lineHeight: 1.375 }}>
-                HCB is a{" "}
+              <Text sx={{ color: 'muted', lineHeight: 1.375 }}>
+                HCB is a{' '}
                 <Link
                   color="primary"
                   href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
@@ -129,7 +129,7 @@ export default function Everything({ fee, partner = false }) {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function List({ children }) {
@@ -138,76 +138,76 @@ function List({ children }) {
       <ol
         style={{
           paddingLeft: 0,
-          listStyle: "none",
+          listStyle: 'none'
         }}
       >
-        <Grid gap={2} columns={[1, 1, "1fr 1fr"]}>
+        <Grid gap={2} columns={[1, 1, '1fr 1fr']}>
           {children}
         </Grid>
       </ol>
     </Container>
-  );
+  )
 }
 
-function ListItem({ icon = "enter", start, ...props }) {
+function ListItem({ icon = 'enter', start, ...props }) {
   return (
     <Fade left>
       <li
         style={{
           lineHeight: 1.25,
-          breakInside: "avoid",
-          display: "flex",
-          alignItems: "center",
+          breakInside: 'avoid',
+          display: 'flex',
+          alignItems: 'center',
           paddingBottom: 4,
-          marginBottom: 8,
+          marginBottom: 8
         }}
       >
         {start || (
           <Icon
             glyph={icon}
-            sx={{ color: "muted", marginRight: 2 }}
+            sx={{ color: 'muted', marginRight: 2 }}
             size={32}
             mr={2}
           />
         )}
-        <Text sx={{ fontSize: 24, color: "smoke" }} {...props} />
+        <Text sx={{ fontSize: 24, color: 'smoke' }} {...props} />
       </li>
     </Fade>
-  );
+  )
 }
 
 function Percentage({ fee }) {
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        bg: "slate",
-        color: "green",
+        display: 'flex',
+        alignItems: 'center',
+        bg: 'slate',
+        color: 'green',
         width: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
         height: [fee.length === 1 ? 70 : 80, fee.length === 1 ? 128 : 138],
-        borderRadius: "circle",
-        fontWeight: "bold",
-        justifyContent: "center",
-        boxShadow: "0 8px 32px rgba(255, 255, 255, 0.125)",
+        borderRadius: 'circle',
+        fontWeight: 'bold',
+        justifyContent: 'center',
+        boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
         fontSize: [48, 84],
-        "&:after": {
+        '&:after': {
           content: '"%"',
           fontSize: [24, 40],
-          fontWeight: "normal",
+          fontWeight: 'normal',
           marginRight: fee.length === 1 ? -2 : 0,
           marginLeft: [null, fee.length === 1 ? 2 : 0],
-          color: "muted",
-        },
+          color: 'muted'
+        }
       }}
     >
       {fee}
     </Box>
-  );
+  )
 }
 
-const recent = (dt) => {
-  const past = new Date();
-  past.setMonth(past.getMonth() - 2);
-  return new Date(dt) > past;
-};
+const recent = dt => {
+  const past = new Date()
+  past.setMonth(past.getMonth() - 2)
+  return new Date(dt) > past
+}
diff --git a/components/hcb/features.js b/components/hcb/features.js
index d7f2b004d..be946c56f 100644
--- a/components/hcb/features.js
+++ b/components/hcb/features.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Link, Text, Container, Grid } from "theme-ui";
-import Icon from "../icon";
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import Icon from '../icon'
 
 export default function Features({ partner = false }) {
   return (
@@ -10,7 +10,7 @@ export default function Features({ partner = false }) {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Invoice sponsors, issue debit cards to your team, and view transaction
           history.
           <br />
@@ -44,8 +44,8 @@ export default function Features({ partner = false }) {
             href="https://hcb.hackclub.com/the-innovation-circuit"
             title="See The Innovation Circuit’s finances in public"
             sx={{
-              gridColumn: [null, null, "span 2"],
-              gridRow: [null, null, "span 2"],
+              gridColumn: [null, null, 'span 2'],
+              gridRow: [null, null, 'span 2']
             }}
           />
           <Module
@@ -53,7 +53,7 @@ export default function Features({ partner = false }) {
             name="Debit cards"
             body={
               <>
-                Issue physical debit cards to all your teammates, backed by{" "}
+                Issue physical debit cards to all your teammates, backed by{' '}
                 <Link
                   href="https://stripe.com/issuing"
                   color="smoke"
@@ -114,7 +114,7 @@ export default function Features({ partner = false }) {
             name="Postal"
             body={
               <>
-                Send email newsletters for free using our hosted instance of{" "}
+                Send email newsletters for free using our hosted instance of{' '}
                 <Link
                   href="https://sendy.co/"
                   color="smoke"
@@ -139,7 +139,7 @@ export default function Features({ partner = false }) {
             name="PVSA Awards"
             body={
               <>
-                Issue the{" "}
+                Issue the{' '}
                 <Link
                   href="https://presidentialserviceawards.gov"
                   color="smoke"
@@ -147,7 +147,7 @@ export default function Features({ partner = false }) {
                   target="_blank"
                 >
                   President's Volunteer Service Award
-                </Link>{" "}
+                </Link>{' '}
                 to your volunteers.
               </>
             }
@@ -170,21 +170,21 @@ export default function Features({ partner = false }) {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Text
           variant="lead"
           sx={{
-            color: "muted",
+            color: 'muted',
             fontSize: 3,
-            marginTop: [4, 5],
+            marginTop: [4, 5]
           }}
         >
-          Have more questions? <br /> Check out the{" "}
+          Have more questions? <br /> Check out the{' '}
           <Link
             href="https://hcb.hackclub.com/faq"
             target="_blank"
@@ -197,66 +197,66 @@ export default function Features({ partner = false }) {
         </Text>
       </Container>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "start" }}>
+    <Box sx={{ display: 'flex', alignItems: 'start' }}>
       <Icon
         size={48}
         glyph={icon}
-        sx={{ flexShrink: 0, marginRight: 3, color: "primary" }}
+        sx={{ flexShrink: 0, marginRight: 3, color: 'primary' }}
       />
       <Box>
-        <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
-        <Text sx={{ color: "muted", lineHeight: "1.375", fontSize: 17 }}>
+        <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
+        <Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
           {body}
         </Text>
       </Box>
     </Box>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
   return (
     <Box
       sx={{
-        bg: "#252429",
-        color: "smoke",
+        bg: '#252429',
+        color: 'smoke',
         mt: 4,
         ml: 0,
         py: 3,
         px: 2,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.0625)",
-        borderRadius: "default",
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.0625)',
+        borderRadius: 'default'
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -264,16 +264,16 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage: "url('/hcb/laptop-dark.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/features.js b/components/hcb/first/features.js
index 1b6219863..1ecde2c31 100644
--- a/components/hcb/first/features.js
+++ b/components/hcb/first/features.js
@@ -1,9 +1,9 @@
-import { Box, Heading, Link, Text, Container, Card, Image } from "theme-ui";
-import Icon from "../../icon";
-import Masonry from "react-masonry-css";
-import NextImage from "next/image";
+import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
+import Icon from '../../icon'
+import Masonry from 'react-masonry-css'
+import NextImage from 'next/image'
 
-import Fade from "react-reveal/Fade";
+import Fade from 'react-reveal/Fade'
 
 export default function Features() {
   return (
@@ -15,13 +15,13 @@ export default function Features() {
           width={200}
           height={100}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             right: 2,
             mt: -36,
-            display: ["none", "none", "none", "block"],
-            "&:hover": {
-              transform: "scale(1.05)",
-            },
+            display: ['none', 'none', 'none', 'block'],
+            '&:hover': {
+              transform: 'scale(1.05)'
+            }
           }}
         />
       </Box>
@@ -31,7 +31,7 @@ export default function Features() {
         </Text>
         <br />
         <br />
-        <Text sx={{ color: "muted", maxWidth: "48", fontSize: 28 }}>
+        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
           Organize your team's finances in real time, receive grants, gain
           nonprofit status, & more.
           <br />
@@ -48,7 +48,7 @@ export default function Features() {
             10000: 3,
             640: 2,
             480: 1,
-            default: 1,
+            default: 1
           }}
           className="masonry-posts"
           columnClassName="masonry-posts-column"
@@ -256,11 +256,11 @@ export default function Features() {
         variant="narrow"
         sx={{
           pt: 3,
-          borderColor: "muted",
-          textAlign: "center",
+          borderColor: 'muted',
+          textAlign: 'center'
         }}
       >
-        <Text variant="caption" sx={{ color: "muted" }}>
+        <Text variant="caption" sx={{ color: 'muted' }}>
           Hack Club does not directly provide banking services. Banking services
           are provided by FDIC-certified financial institutions.
         </Text>
@@ -318,7 +318,7 @@ export default function Features() {
 
     `}</style>
     </Box>
-  );
+  )
 }
 
 function Module({ icon, name, body, iconColor }) {
@@ -327,37 +327,37 @@ function Module({ icon, name, body, iconColor }) {
       <Card
         variant="primary"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          p: [4, null, 4],
+          display: 'flex',
+          flexDirection: 'column',
+          p: [4, null, 4]
         }}
         className="post"
       >
         <Box
           as="span"
           sx={{
-            width: "fit-content",
-            background: iconColor || "primary",
-            borderRadius: "default",
+            width: 'fit-content',
+            background: iconColor || 'primary',
+            borderRadius: 'default',
             lineHeight: 0,
             p: 1,
             mb: 1,
-            display: "inline-block",
-            transform: ["scale(0.75)", "none"],
-            transformOrigin: "bottom left",
+            display: 'inline-block',
+            transform: ['scale(0.75)', 'none'],
+            transformOrigin: 'bottom left',
             boxShadow:
-              "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+              'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
           }}
         >
           <Icon glyph={icon} size={28} />
         </Box>
         <Box>
-          <Heading sx={{ color: "snow", lineHeight: "1.5" }}>{name}</Heading>
+          <Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
           <Text
             sx={{
-              color: "muted",
-              lineHeight: "1.375",
-              fontSize: 17,
+              color: 'muted',
+              lineHeight: '1.375',
+              fontSize: 17
             }}
           >
             {body}
@@ -365,7 +365,7 @@ function Module({ icon, name, body, iconColor }) {
         </Box>
       </Card>
     </Fade>
-  );
+  )
 }
 
 function ModuleDetails({ children }) {
@@ -373,40 +373,40 @@ function ModuleDetails({ children }) {
     <Fade bottom>
       <Box
         sx={{
-          bg: "none",
-          color: "smoke",
-          boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-          borderRadius: "default",
+          bg: 'none',
+          color: 'smoke',
+          boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+          borderRadius: 'default',
           p: 0,
-          mb: 3,
+          mb: 3
         }}
       >
         {children}
       </Box>
     </Fade>
-  );
+  )
 }
 
 function Document({ name, cost }) {
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: 'flex' }}>
       <Icon
         size={28}
         mr={1}
         glyph="payment"
-        sx={{ flexShrink: 0, color: "green" }}
+        sx={{ flexShrink: 0, color: 'green' }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Text fontSize={2}>{name}</Text>
 
         {cost && (
-          <Text fontSize={1} color="muted" style={{ lineHeight: "1.375" }}>
+          <Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
             {cost}
           </Text>
         )}
       </Box>
     </Box>
-  );
+  )
 }
 
 function Laptop({ href, title, sx }) {
@@ -414,17 +414,17 @@ function Laptop({ href, title, sx }) {
     <Link href={href} title={title} sx={sx}>
       <Box
         sx={{
-          display: "block",
-          width: "100%",
-          height: "100%",
-          minHeight: "16rem",
-          backgroundSize: "auto 115%",
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          minHeight: '16rem',
+          backgroundSize: 'auto 115%',
           backgroundImage:
             "url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
-          backgroundPosition: "center top",
-          backgroundRepeat: "no-repeat",
+          backgroundPosition: 'center top',
+          backgroundRepeat: 'no-repeat'
         }}
       ></Box>
     </Link>
-  );
+  )
 }
diff --git a/components/hcb/first/form.js b/components/hcb/first/form.js
index e8c461c7e..0ecdef36a 100644
--- a/components/hcb/first/form.js
+++ b/components/hcb/first/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "dark",
+            bg: 'dark'
           }}
           onChange={onChange}
           value={value}
@@ -76,68 +76,68 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [teamType, setTeamType] = useState("");
-  const [teamNumber, setTeamNumber] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [teamType, setTeamType] = useState('')
+  const [teamNumber, setTeamNumber] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const [teamNameLoading, setTeamNameLoading] = useState(false);
+  const [teamNameLoading, setTeamNameLoading] = useState(false)
 
   const debouncedTeamNameUpdate = useRef(
-    debounce(async (teamNumber) => {
+    debounce(async teamNumber => {
       try {
         const data = await fetch(
-          `/api/first-team?teamNumber=${teamNumber}`,
-        ).then((res) => res.json());
+          `/api/first-team?teamNumber=${teamNumber}`
+        ).then(res => res.json())
 
-        setTeamNameLoading(false);
+        setTeamNameLoading(false)
 
         if (data.ok !== false) {
-          setEventName(data.nickname);
+          setEventName(data.nickname)
         } else {
-          setEventName("");
+          setEventName('')
         }
       } catch (e) {}
-    }, 200),
-  );
+    }, 200)
+  )
 
   useEffect(() => {
-    if (teamNumber && teamType === "FRC") {
-      setTeamNameLoading(true);
-      debouncedTeamNameUpdate.current(teamNumber);
+    if (teamNumber && teamType === 'FRC') {
+      setTeamNameLoading(true)
+      debouncedTeamNameUpdate.current(teamNumber)
     } else {
-      setEventName("");
+      setEventName('')
     }
-  }, [teamType, teamNumber]);
+  }, [teamType, teamNumber])
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         teamType,
         teamNumber,
         userEmail,
-        eventCategory: "robotics team",
-      }),
-    });
+        eventCategory: 'robotics team'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setTeamType("");
-    setTeamNumber("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setTeamType('')
+    setTeamNumber('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -147,14 +147,14 @@ export default function Signup() {
         action="/api/hcb/demo"
         onSubmit={handleSubmit}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 2fr", alignItems: "center" }}>
-          <Label htmlFor="teamType" sx={{ color: "muted", fontSize: 18 }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 2fr', alignItems: 'center' }}>
+          <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
             Level
             <Select
               name="teamType"
               defaultValue="Select"
-              sx={{ bg: "dark", w: "500px !important" }}
-              onChange={(e) => setTeamType(e.target.value)}
+              sx={{ bg: 'dark', w: '500px !important' }}
+              onChange={e => setTeamType(e.target.value)}
             >
               <option value="Select" disabled>
                 Select
@@ -171,7 +171,7 @@ export default function Signup() {
             placeholder="12345"
             value={teamNumber}
             loading={teamNameLoading}
-            onChange={(e) => setTeamNumber(e.target.value)}
+            onChange={e => setTeamNumber(e.target.value)}
             required={false}
           />
         </Grid>
@@ -180,7 +180,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Poseidon Robotics"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -188,13 +188,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("orange", "red"),
+            backgroundImage: theme.util.gx('orange', 'red'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -207,14 +207,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -222,5 +222,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/hcb/first/steps.js b/components/hcb/first/steps.js
index 49c03212d..be4d257e9 100644
--- a/components/hcb/first/steps.js
+++ b/components/hcb/first/steps.js
@@ -1,13 +1,13 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../../icon'
 
 function Timeline({ children }) {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center" }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 function TimelineStep({ children }) {
@@ -16,32 +16,32 @@ function TimelineStep({ children }) {
       sx={{
         marginX: 4,
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "#3c4858",
-          height: "200px",
-          width: "4px",
+          background: '#3c4858',
+          height: '200px',
+          width: '4px',
           marginLeft: 26,
-          position: "absolute",
-          zIndex: -1,
+          position: 'absolute',
+          zIndex: -1
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [null, null, 0],
-          width: [null, null, 0],
-        },
+          width: [null, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -49,20 +49,20 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
-        color: "white",
+        background: 'red',
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -71,7 +71,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer" }}>
+            <Link href={href} sx={{ cursor: 'pointer' }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -81,35 +81,35 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "muted",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
+              bg: 'muted',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
               width: 64,
               fontSize: 18,
-              px: 2,
+              px: 2
             }}
           >
             {duration}
           </Badge>
           <Text
-            sx={{ color: "white", fontSize: 24, maxWidth: [300, null, 550] }}
+            sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
           >
             {name}
           </Text>
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
@@ -131,5 +131,5 @@ export default function RealTimeline() {
         duration="Step 3"
       />
     </Timeline>
-  );
+  )
 }
diff --git a/components/hcb/first/testimonials.js b/components/hcb/first/testimonials.js
index f274da0df..aadd20f57 100644
--- a/components/hcb/first/testimonials.js
+++ b/components/hcb/first/testimonials.js
@@ -7,9 +7,9 @@ import {
   Grid,
   Link,
   Avatar,
-  Button,
-} from "theme-ui";
-import { Slide } from "react-reveal";
+  Button
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
 
 export default function Testimonials() {
   return (
@@ -17,10 +17,10 @@ export default function Testimonials() {
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center'
         }}
       >
         <Heading variant="title">
@@ -35,7 +35,7 @@ export default function Testimonials() {
         <Grid
           gap={4}
           sx={{
-            gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+            gridTemplateColumns: ['100%', null, null, '1fr 1fr']
           }}
         >
           <Organization
@@ -72,7 +72,7 @@ export default function Testimonials() {
         </Grid>
       </Container>
     </>
-  );
+  )
 }
 
 function Organization({
@@ -87,16 +87,16 @@ function Organization({
   hackerName,
   hackerAvatarUrl,
   hackerRole,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -106,27 +106,27 @@ function Organization({
             width={800}
             height={450}
             sx={{
-              borderRadius: "default",
-              objectFit: "cover",
+              borderRadius: 'default',
+              objectFit: 'cover'
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -136,7 +136,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -145,13 +145,13 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {teamNum}
-                  </Link>{" "}
+                  </Link>{' '}
                   • {teamLocation}
                 </Box>
               </Box>
@@ -161,10 +161,10 @@ function Organization({
             <Text
               sx={{
                 fontSize: 2,
-                color: "snow",
-                textIndent: "-.375em",
-                lineHeight: "caption",
-                fontSize: 18,
+                color: 'snow',
+                textIndent: '-.375em',
+                lineHeight: 'caption',
+                fontSize: 18
               }}
             >
               "{quote}"
@@ -172,18 +172,18 @@ function Organization({
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
@@ -191,7 +191,7 @@ function Organization({
                   size={48}
                   sx={{
                     mr: 2,
-                    borderRadius: "100%",
+                    borderRadius: '100%'
                   }}
                   alt="Photo of ${hackerName}"
                 />
@@ -199,11 +199,11 @@ function Organization({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {hackerName}
                   </Text>
                   <Text>{hackerRole}</Text>
@@ -214,12 +214,12 @@ function Organization({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -232,5 +232,5 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/landing.js b/components/hcb/landing.js
index b8be43cb4..34753d552 100644
--- a/components/hcb/landing.js
+++ b/components/hcb/landing.js
@@ -6,12 +6,12 @@ import {
   Flex,
   Text,
   Container,
-  Badge,
-} from "theme-ui";
-import Fade from "react-reveal/Fade";
-import ScrollHint from "../scroll-hint";
-import Image from "next/image";
-import hero from "../../public/hcb/bg.webp";
+  Badge
+} from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/hcb/bg.webp'
 
 export default function Landing({ showButton = true, eventsCount }) {
   return (
@@ -21,42 +21,42 @@ export default function Landing({ showButton = true, eventsCount }) {
 
         <Box
           sx={{
-            position: "absolute",
-            flexDirection: "column",
-            justifyContent: "center",
+            position: 'absolute',
+            flexDirection: 'column',
+            justifyContent: 'center',
             bottom: 5,
-            mx: "auto",
-            width: "100%",
+            mx: 'auto',
+            width: '100%'
           }}
         >
           <Box
             sx={{
-              zIndex: "100",
-              paddingTop: "96px",
+              zIndex: '100',
+              paddingTop: '96px'
             }}
           >
             <Fade duration={625} bottom>
               <Container
                 variant="container"
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  textAlign: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  textAlign: 'center'
                 }}
               >
                 <Heading
                   variant="ultratitle"
                   sx={{
                     marginBottom: 4,
-                    textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                    letterSpacing: "-0.02em",
-                    "@media screen and (max-height: 600px)": {
-                      lineHeight: 0.875,
-                    },
-                    "@media screen and (min-height: 610px)": {
-                      lineHeight: 1.125,
+                    textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                    letterSpacing: '-0.02em',
+                    '@media screen and (max-height: 600px)': {
+                      lineHeight: 0.875
                     },
+                    '@media screen and (min-height: 610px)': {
+                      lineHeight: 1.125
+                    }
                   }}
                   as="h1"
                 >
@@ -65,9 +65,9 @@ export default function Landing({ showButton = true, eventsCount }) {
                 <Flex
                   sx={{
                     gap: 3,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: 4,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 4
                   }}
                 >
                   <img
@@ -75,7 +75,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                     alt="HCB Icon"
                     height={64}
                     sx={{
-                      margin: "auto",
+                      margin: 'auto'
                     }}
                   />
                   <Text as="h2" sx={{ fontSize: 4 }}>
@@ -91,13 +91,13 @@ export default function Landing({ showButton = true, eventsCount }) {
                   <Text
                     variant="lead"
                     sx={{
-                      textShadow: "0 3px 6px rgba(0, 0, 0, 0.5)",
-                      "@media screen and (max-height: 600px)": {
-                        lineHeight: 1,
-                      },
+                      textShadow: '0 3px 6px rgba(0, 0, 0, 0.5)',
+                      '@media screen and (max-height: 600px)': {
+                        lineHeight: 1
+                      }
                     }}
                   >
-                    The team behind the{" "}
+                    The team behind the{' '}
                     <Link
                       href="https://innovationcircuit.com"
                       target="_blank"
@@ -106,7 +106,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                       hoverline
                     >
                       Innovation Circuit
-                    </Link>{" "}
+                    </Link>{' '}
                     is one of {Math.round((eventsCount - 50) / 100) * 100}+
                     teams who use <strong>HCB</strong> to run world-class
                     organizations, hackathons, and clubs.
@@ -118,9 +118,9 @@ export default function Landing({ showButton = true, eventsCount }) {
           <br />
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginBottom: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              marginBottom: 3
             }}
           >
             {showButton && (
@@ -129,7 +129,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   variant="ctaLg"
                   as="a"
                   href="#apply"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                 >
                   Apply Now
                 </Button>
@@ -138,7 +138,7 @@ export default function Landing({ showButton = true, eventsCount }) {
                   as="a"
                   href="https://hcb.hackclub.com"
                   target="_blank"
-                  style={{ zIndex: "100" }}
+                  style={{ zIndex: '100' }}
                   ml={3}
                 >
                   Sign in
@@ -150,19 +150,19 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 3,
             right: 2,
-            display: ["none", "block"],
+            display: ['none', 'block']
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              zIndex: "1",
-              bg: "muted",
-              color: "steel",
-              fontWeight: "normal",
+              zIndex: '1',
+              bg: 'muted',
+              color: 'steel',
+              fontWeight: 'normal'
             }}
           >
             Singapore
@@ -170,40 +170,40 @@ export default function Landing({ showButton = true, eventsCount }) {
         </Box>
       </Slide>
     </>
-  );
+  )
 }
 
 function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: "url(/underline-red.svg)",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1rem",
-        backgroundPosition: "bottom center",
+        backgroundImage: 'url(/underline-red.svg)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 1rem',
+        backgroundPosition: 'bottom center'
       }}
     >
       {children}
     </span>
-  );
+  )
 }
 
 function Slide({ children }) {
   return (
     <Box
       style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "end",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundColor: "#000000",
-        boxShadow: "inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        width: "100%",
-        minHeight: "100vh",
-        position: "relative",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '100vh',
+        position: 'relative'
       }}
     >
       <Image
@@ -216,7 +216,7 @@ function Slide({ children }) {
       />
       {children}
     </Box>
-  );
+  )
 }
 
 function Vignette() {
@@ -224,13 +224,13 @@ function Vignette() {
     <Box
       style={{
         backgroundImage:
-          "linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)",
-        height: "100vh",
-        left: "0",
-        right: "0",
-        position: "absolute",
-        zIndex: "0",
+          'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25) 25%,rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%)',
+        height: '100vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '0'
       }}
     ></Box>
-  );
+  )
 }
diff --git a/components/hcb/nonprofits.js b/components/hcb/nonprofits.js
index a8f0ff9d3..888cd68e7 100644
--- a/components/hcb/nonprofits.js
+++ b/components/hcb/nonprofits.js
@@ -1,69 +1,69 @@
-import { Box, Image, Text, Heading, Container, Grid, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+import { Box, Image, Text, Heading, Container, Grid, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const orgs = [
   {
-    logo: "/hcb/nonprofits/girlgenius.png",
-    name: "Girl Genius",
-    director: "Chloe Yan",
-    role: "Executive Director",
+    logo: '/hcb/nonprofits/girlgenius.png',
+    name: 'Girl Genius',
+    director: 'Chloe Yan',
+    role: 'Executive Director',
     budget: 5,
-    website: "girlgeniusmag.tech",
+    website: 'girlgeniusmag.tech',
     description:
-      "Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).",
+      'Girl Genius Magazine is a fully student-run publication inspiring the next generation of female and non-binary leaders in STEAM. Their journalism and inclusive online community are dedicated to breaking down tech’s lingering gender barriers. Becoming fiscally sponsored allowed them to publish more issues, host over 40 workshops, organize a conference, and reach a global audience of 11k readers (and counting).'
   },
   {
-    logo: "/hcb/nonprofits/techshift.png",
-    transparency: "techshift",
-    name: "TechShift",
-    director: "Daniel Jin",
-    role: "Co-Executive Director",
+    logo: '/hcb/nonprofits/techshift.png',
+    transparency: 'techshift',
+    name: 'TechShift',
+    director: 'Daniel Jin',
+    role: 'Co-Executive Director',
     budget: 100,
-    website: "techshift.org",
+    website: 'techshift.org',
     description:
-      "Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.",
+      'Founded in 2017, TechShift supports a network of 30+ student-run chapters across 3 continents leading initiatives at the intersection of technology and social impact. With the help of HCB, they are bringing about a more equitable technological future through their mentorship programs, community partnerships, microgrants, and the STEM For Social Good Toolkit.'
   },
   {
-    logo: "/hcb/nonprofits/projectboom.jpg",
-    transparency: "projectboom",
-    name: "Project Boom",
-    director: "Kunal Botla",
-    role: "Founder",
-    budget: "5.6",
-    budgetLabel: "raised",
-    website: "projectboom.org",
-    url: "https://projectboom.org/",
+    logo: '/hcb/nonprofits/projectboom.jpg',
+    transparency: 'projectboom',
+    name: 'Project Boom',
+    director: 'Kunal Botla',
+    role: 'Founder',
+    budget: '5.6',
+    budgetLabel: 'raised',
+    website: 'projectboom.org',
+    url: 'https://projectboom.org/',
     description:
-      "Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.",
+      'Project Boom is a student-led organization with a simple mission: getting computers to those who need them. Instead of becoming e-waste, old machines are given new life to deserving students worldwide. Joining HCB provided Project Boom with a platform to easily accept and manage donations, helping them to repair and ship more computers than ever before.'
   },
   {
-    logo: "/hcb/nonprofits/executebig.png",
-    name: "Execute Big",
-    director: "Mingjie Jiang",
-    role: "Co-Executive Director",
-    budget: "4",
-    budgetLabel: "funded",
-    website: "executebig.org",
+    logo: '/hcb/nonprofits/executebig.png',
+    name: 'Execute Big',
+    director: 'Mingjie Jiang',
+    role: 'Co-Executive Director',
+    budget: '4',
+    budgetLabel: 'funded',
+    website: 'executebig.org',
     description:
-      "Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.",
-  },
-];
+      'Execute Big began by using leftover hackathon funds to provide travel grants for students. HCB helped make possible their array of grants, fellowships, and innovative programs to share computer science with students nationally. Now their own 501(c)(3) nonprofit, they leverage existing resources to make STEM activities accessible to everyone.'
+  }
+]
 
 export default function Nonprofits() {
   return (
     <Container
-      sx={{ pt: 6, pb: [2, null, 5], mx: "auto", px: [null, null, 4] }}
+      sx={{ pt: 6, pb: [2, null, 5], mx: 'auto', px: [null, null, 4] }}
     >
       <Container
         variant="copy"
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center",
-          pb: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          pb: 3
         }}
       >
         <Heading variant="title">Nonprofit? No problem.</Heading>
@@ -76,11 +76,11 @@ export default function Nonprofits() {
       <Grid
         gap={4}
         sx={{
-          gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+          gridTemplateColumns: ['100%', null, null, '1fr 1fr']
         }}
       >
-        {orgs.map((org) => {
-          const id = kebabCase(org.name);
+        {orgs.map(org => {
+          const id = kebabCase(org.name)
           return (
             <Organization
               logo={org.logo}
@@ -92,11 +92,11 @@ export default function Nonprofits() {
               url={org.url}
               key={id}
             />
-          );
+          )
         })}
       </Grid>
     </Container>
-  );
+  )
 }
 
 function Organization({
@@ -106,36 +106,36 @@ function Organization({
   budgetLabel,
   website,
   url,
-  description,
+  description
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between'
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Image
                   src={logo}
                   alt={`${name} logo`}
                   sx={{
-                    height: "4rem",
-                    width: "4rem",
-                    objectFit: "cover",
-                    borderRadius: "default",
+                    height: '4rem',
+                    width: '4rem',
+                    objectFit: 'cover',
+                    borderRadius: 'default'
                   }}
                 />
                 <Box sx={{ ml: 3 }}>
@@ -145,7 +145,7 @@ function Organization({
                     sx={{
                       fontSize: [28, null, 38],
                       lineHeight: 1,
-                      letterSpacing: -0.1,
+                      letterSpacing: -0.1
                     }}
                   >
                     {name}
@@ -154,9 +154,9 @@ function Organization({
                   <Link
                     href={url || `https://${website}`}
                     sx={{
-                      textDecoration: "none",
-                      color: "muted",
-                      "&:hover": { textDecoration: "underline" },
+                      textDecoration: 'none',
+                      color: 'muted',
+                      '&:hover': { textDecoration: 'underline' }
                     }}
                   >
                     {website}
@@ -165,7 +165,7 @@ function Organization({
               </Box>
               <DetailStat
                 value={`$${budget}k`}
-                label={budgetLabel ?? "budget"}
+                label={budgetLabel ?? 'budget'}
               />
             </Box>
 
@@ -175,7 +175,7 @@ function Organization({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -183,7 +183,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function About({ children }) {
@@ -191,13 +191,13 @@ function About({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "snow",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'snow',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/run.js b/components/hcb/run.js
index 70d195a2f..b787962ec 100644
--- a/components/hcb/run.js
+++ b/components/hcb/run.js
@@ -1,6 +1,6 @@
-import { Box, Text, Container } from "theme-ui";
-import { Fade } from "react-reveal";
-import Icon from "../icon";
+import { Box, Text, Container } from 'theme-ui'
+import { Fade } from 'react-reveal'
+import Icon from '../icon'
 
 export default function Run() {
   return (
@@ -8,16 +8,16 @@ export default function Run() {
       <Container
         variant="container"
         sx={{
-          display: "flex",
-          flexDirection: ["column", null, "row"],
-          alignItems: "center",
-          width: ["100%", "100%", "100%", "85%"],
-          bg: "#252429",
-          color: "smoke",
+          display: 'flex',
+          flexDirection: ['column', null, 'row'],
+          alignItems: 'center',
+          width: ['100%', '100%', '100%', '85%'],
+          bg: '#252429',
+          color: 'smoke',
           px: 4,
 
-          borderRadius: "default",
-          position: "relative",
+          borderRadius: 'default',
+          position: 'relative'
         }}
       >
         <Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
@@ -25,7 +25,7 @@ export default function Run() {
             HCB doesn’t stop at closing ceremony.
           </Text>
           <br />
-          <Text variant="lead" sx={{ color: "muted", fontSize: 28 }}>
+          <Text variant="lead" sx={{ color: 'muted', fontSize: 28 }}>
             Receiving and managing money is just the start. HCB helps you handle
             ongoing obligations while you’re organizing.
           </Text>
@@ -46,15 +46,15 @@ export default function Run() {
         </List>
       </Container>
     </>
-  );
+  )
 }
 
 function List({ children }) {
   return (
     <Box>
-      <ol style={{ listStyle: "none", paddingLeft: 0 }}>{children}</ol>
+      <ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
     </Box>
-  );
+  )
 }
 
 function ListItem({ icon, body }) {
@@ -63,20 +63,20 @@ function ListItem({ icon, body }) {
       <li
         style={{
           lineHeight: 1.25,
-          display: "flex",
-          alignItems: "center",
-          pl: 0,
+          display: 'flex',
+          alignItems: 'center',
+          pl: 0
         }}
       >
         <Icon
           glyph={icon}
           size={45}
-          sx={{ color: "primary", flexShrink: "none", flexShrink: 0, mr: 2 }}
+          sx={{ color: 'primary', flexShrink: 'none', flexShrink: 0, mr: 2 }}
         />
         <Text fontSize={[32, 48]} variant="lead">
           {body}
         </Text>
       </li>
     </Fade>
-  );
+  )
 }
diff --git a/components/hcb/start.js b/components/hcb/start.js
index 646ccf48c..de1a02b1b 100644
--- a/components/hcb/start.js
+++ b/components/hcb/start.js
@@ -1,20 +1,20 @@
-import { Box, Link, Text, Heading, Flex } from "theme-ui";
-import Timeline from "./timeline";
-import Stats from "./stats";
-import ApplyButton from "./apply-button";
+import { Box, Link, Text, Heading, Flex } from 'theme-ui'
+import Timeline from './timeline'
+import Stats from './stats'
+import ApplyButton from './apply-button'
 
 export default function Start({ stats }) {
   return (
     <>
       <Box as="section" id="apply" py={6}>
         <Flex
-          sx={{ flexDirection: "column", alignItems: "center", gap: 5, mx: 4 }}
+          sx={{ flexDirection: 'column', alignItems: 'center', gap: 5, mx: 4 }}
         >
           <Flex
             sx={{
-              flexDirection: "column",
-              textAlign: "center",
-              gap: 3,
+              flexDirection: 'column',
+              textAlign: 'center',
+              gap: 3
             }}
           >
             <Heading variant="ultratitle" color="white">
@@ -28,11 +28,11 @@ export default function Start({ stats }) {
           <Stats stats={stats} />
           <Timeline />
           <Flex
-            sx={{ flexDirection: "column", textAlign: "center", gap: 4, mx: 3 }}
+            sx={{ flexDirection: 'column', textAlign: 'center', gap: 4, mx: 3 }}
           >
             <ApplyButton />
             <Text color="muted" sx={{ fontSize: 18 }}>
-              We run Hack Club HQ on HCB!{" "}
+              We run Hack Club HQ on HCB!{' '}
               <Link href="https://hcb.hackclub.com/hq" color="primary">
                 See&nbsp;our&nbsp;finances.
               </Link>
@@ -41,5 +41,5 @@ export default function Start({ stats }) {
         </Flex>
       </Box>
     </>
-  );
+  )
 }
diff --git a/components/hcb/stats.js b/components/hcb/stats.js
index 4ce569799..4b2524a20 100644
--- a/components/hcb/stats.js
+++ b/components/hcb/stats.js
@@ -1,73 +1,73 @@
-import { Text, Box, Flex } from "theme-ui";
-import { useEffect, useState } from "react";
+import { Text, Box, Flex } from 'theme-ui'
+import { useEffect, useState } from 'react'
 
-const easeInOutExpo = (x) =>
+const easeInOutExpo = x =>
   x === 0
     ? 0
     : x === 1
     ? 1
     : x < 0.5
     ? Math.pow(2, 20 * x - 10) / 2
-    : (2 - Math.pow(2, -20 * x + 10)) / 2;
+    : (2 - Math.pow(2, -20 * x + 10)) / 2
 
 function startMoneyAnimation(
   setBalance,
   amount,
   duration = 2_000,
-  moneyFormatter,
+  moneyFormatter
 ) {
-  const startTime = performance.now();
+  const startTime = performance.now()
 
   function animate() {
-    const time = performance.now() - startTime;
-    const progress = time / duration;
-    const easedProgress = easeInOutExpo(progress);
+    const time = performance.now() - startTime
+    const progress = time / duration
+    const easedProgress = easeInOutExpo(progress)
 
-    setBalance(moneyFormatter(amount * easedProgress));
+    setBalance(moneyFormatter(amount * easedProgress))
 
     if (progress < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     } else {
-      setBalance(moneyFormatter(amount));
+      setBalance(moneyFormatter(amount))
     }
   }
 
-  requestAnimationFrame(animate);
+  requestAnimationFrame(animate)
 }
 
 function formatMoney(amount) {
-  const normalisedAmount = amount / 100;
+  const normalisedAmount = amount / 100
   return normalisedAmount
-    .toLocaleString("en-US", { style: "currency", currency: "USD" })
-    .split(".");
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+    .split('.')
 }
 
 const Stats = ({ stats }) => {
-  const [balance, setBalance] = useState(0); // A formatted balance string, split by decimal
+  const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
     let observer = new IntersectionObserver(
-      (e) => {
+      e => {
         if (e[0].isIntersecting) {
-          console.info("intersecting");
+          console.info('intersecting')
           startMoneyAnimation(
             setBalance,
             stats.transactions_volume,
             2_500,
-            formatMoney,
-          );
+            formatMoney
+          )
         }
       },
-      { threshold: 1.0 },
-    );
-    observer.observe(document.querySelector("#parent"));
+      { threshold: 1.0 }
+    )
+    observer.observe(document.querySelector('#parent'))
 
-    return () => observer.disconnect();
-  }, [stats.transactions_volume]);
+    return () => observer.disconnect()
+  }, [stats.transactions_volume])
 
   return (
     <Box id="parent">
-      <Flex sx={{ flexDirection: "column", alignItems: "center" }}>
+      <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>
         <Text sx={{ fontSize: [3, 4] }}>So far we have enabled</Text>
         {stats ? (
           <>
@@ -75,8 +75,8 @@ const Stats = ({ stats }) => {
               variant="title"
               color="green"
               sx={{
-                color: "green",
-                fontSize: [5, 6],
+                color: 'green',
+                fontSize: [5, 6]
               }}
             >
               {balance[0]}
@@ -88,8 +88,8 @@ const Stats = ({ stats }) => {
             variant="title"
             color="green"
             sx={{
-              color: "green",
-              fontSize: [5, 6],
+              color: 'green',
+              fontSize: [5, 6]
             }}
           >
             ...
@@ -98,18 +98,18 @@ const Stats = ({ stats }) => {
         <Text sx={{ fontSize: [3, 4] }}>in transactions</Text>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
-    },
-  };
+      stats
+    }
+  }
 }
 
-export default Stats;
+export default Stats
diff --git a/components/hcb/testimonials.js b/components/hcb/testimonials.js
index 3d0ba0e57..d341b3bbd 100644
--- a/components/hcb/testimonials.js
+++ b/components/hcb/testimonials.js
@@ -7,53 +7,53 @@ import {
   Heading,
   Container,
   Grid,
-  Link,
-} from "theme-ui";
-import { Slide } from "react-reveal";
-import Stat from "../stat";
-import kebabCase from "lodash/kebabCase";
+  Link
+} from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Stat from '../stat'
+import kebabCase from 'lodash/kebabCase'
 
 const events = [
   {
-    transparency: "hackpenn",
-    name: "Hack Pennsylvania",
-    location: "State College, PA",
-    organizer: "Joy Liu",
+    transparency: 'hackpenn',
+    name: 'Hack Pennsylvania',
+    location: 'State College, PA',
+    organizer: 'Joy Liu',
     budget: 15,
     attendees: 115,
     testimonial:
-      "For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.",
+      'For me, HCB unlocked organizing hackathons. Even after as a club leader, raising money seemed insurmountable. HCB directly enabled organizing events in my community with event bank accounts [sic] & a supportive community. I couldn’t recommend it more highly.'
   },
   {
-    name: "Teenhacks LI",
-    location: "Long Island, NY",
-    organizer: "Wesley Pergament",
+    name: 'Teenhacks LI',
+    location: 'Long Island, NY',
+    organizer: 'Wesley Pergament',
     budget: 35,
     attendees: 300,
     testimonial:
-      "For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.",
+      'For our hackathon, HCB has given us the tools to make sure our organization is professional with sponsors. HCB and their team have created an easily manageable resource to make sure any event is run successfully. We would highly recommend any organization be a part of the Hack Club ecosystem.'
   },
   {
-    transparency: "mahacks",
-    name: "MAHacks",
-    location: "Boston, MA",
-    organizer: "Kat Huang",
+    transparency: 'mahacks',
+    name: 'MAHacks',
+    location: 'Boston, MA',
+    organizer: 'Kat Huang',
     budget: 10,
     attendees: 70,
     testimonial:
-      "HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.",
+      'HCB removed the barriers to starting fundraising for MAHacks. In mere days, vs months of nonprofit paperwork, HCB enabled my team to invoice sponsors professionally and manage our finances on a clear, up-to-date dashboard. I highly recommend using HCB & joining the Hack Club community.'
   },
   {
-    transparency: "dv-hacks",
-    name: "DV Hacks",
-    location: "Santa Clara, CA",
-    organizer: "Khushi Wadhwa",
+    transparency: 'dv-hacks',
+    name: 'DV Hacks',
+    location: 'Santa Clara, CA',
+    organizer: 'Khushi Wadhwa',
     budget: 12,
     attendees: 150,
     testimonial:
-      "HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.",
-  },
-];
+      'HCB is an essential platform for any hackathon organizer! It made us look both professional and credible in front of our sponsors and it relieved us of legal/financial burdens. HCB was there for us every step of the way and for a first-year hackathon, that support was priceless.'
+  }
+]
 
 export default function Testimonials() {
   return (
@@ -62,10 +62,10 @@ export default function Testimonials() {
         <Container
           variant="copy"
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            textAlign: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            textAlign: 'center'
           }}
         >
           <Heading variant="title">
@@ -78,31 +78,29 @@ export default function Testimonials() {
         </Container>
         <Container
           sx={{
-            color: "smoke",
+            color: 'smoke',
             px: [null, null, 4],
-            mx: "auto",
+            mx: 'auto',
             mt: 2,
             borderRadius: 0,
-            position: "relative",
+            position: 'relative'
           }}
         >
           <Grid
             gap={4}
             sx={{
-              gridTemplateColumns: ["100%", null, null, "1fr 1fr"],
+              gridTemplateColumns: ['100%', null, null, '1fr 1fr']
             }}
           >
-            {events.map((event) => {
-              const id = kebabCase(event.name);
-              return (
-                <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
-              );
+            {events.map(event => {
+              const id = kebabCase(event.name)
+              return <Event {...event} img={`/hcb/events/${id}.jpg`} key={id} />
             })}
           </Grid>
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
 function Event({
@@ -113,16 +111,16 @@ function Event({
   attendees,
   organizer,
   testimonial,
-  transparency,
+  transparency
 }) {
   return (
     <Slide bottom>
       <Box
         sx={{
-          backgroundColor: "darkless",
-          color: "smoke",
-          borderRadius: "extra",
-          mx: "auto",
+          backgroundColor: 'darkless',
+          color: 'smoke',
+          borderRadius: 'extra',
+          mx: 'auto'
         }}
       >
         <Container sx={{ padding: 0, margin: 0 }}>
@@ -130,21 +128,21 @@ function Event({
             src={img}
             alt={location}
             sx={{
-              maxHeight: "20rem",
-              objectFit: "cover",
-              width: "100%",
-              borderRadius: "default",
-              mb: -3,
+              maxHeight: '20rem',
+              objectFit: 'cover',
+              width: '100%',
+              borderRadius: 'default',
+              mb: -3
             }}
           />
           <Box p={[3, null, 4]}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", "row", "row"],
-                alignItems: ["baseline", "center"],
-                justifyContent: "space-between",
-                marginBottom: -3,
+                display: 'flex',
+                flexDirection: ['column', 'row', 'row'],
+                alignItems: ['baseline', 'center'],
+                justifyContent: 'space-between',
+                marginBottom: -3
               }}
             >
               <Text
@@ -156,12 +154,12 @@ function Event({
               </Text>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-start",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
                   my: 0,
                   ml: -2,
-                  pl: 0,
+                  pl: 0
                 }}
               >
                 <DetailStat value={attendees} label="attendees" />
@@ -172,22 +170,22 @@ function Event({
             <Quote>"{testimonial}"</Quote>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-                marginTop: ["0px", 3],
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                marginTop: ['0px', 3]
               }}
             >
               <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: ["16px", "0px"],
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: ['16px', '0px']
                 }}
               >
                 <Avatar
-                  src={`/hackers/${organizer.split(" ")[0].toLowerCase()}.jpg`}
+                  src={`/hackers/${organizer.split(' ')[0].toLowerCase()}.jpg`}
                   size={48}
                   mr={2}
                   alt="Photo of ${organizer}"
@@ -196,11 +194,11 @@ function Event({
                   color="white"
                   sx={{
                     fontSize: 19,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column'
                   }}
                 >
-                  <Text sx={{ fontWeight: "bold", lineHeight: 1.125 }}>
+                  <Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
                     {organizer}
                   </Text>
                   <Text>Lead Organizer</Text>
@@ -211,12 +209,12 @@ function Event({
                   href={`https://hcb.hackclub.com/${transparency}`}
                   target="_blank"
                   rel="noreferrer"
-                  sx={{ mt: ["16px", "0px"] }}
+                  sx={{ mt: ['16px', '0px'] }}
                 >
                   <Button
                     mt={[null, null, 4, 0]}
-                    ml={[0, "auto"]}
-                    sx={{ textTransform: "none" }}
+                    ml={[0, 'auto']}
+                    sx={{ textTransform: 'none' }}
                     variant="primary"
                     title="🎶 take a look, it's in our books 🎵"
                   >
@@ -229,7 +227,7 @@ function Event({
         </Container>
       </Box>
     </Slide>
-  );
+  )
 }
 
 function DetailStat({ value, label }) {
@@ -237,7 +235,7 @@ function DetailStat({ value, label }) {
     <Box sx={{ px: 0, mb: [3, 0], ml: [-1, 0], mx: 3 }}>
       <Stat value={value} label={label} sm />
     </Box>
-  );
+  )
 }
 
 function Quote({ children }) {
@@ -245,13 +243,13 @@ function Quote({ children }) {
     <Text
       sx={{
         fontSize: 2,
-        color: "muted",
-        textIndent: "-.375em",
-        lineHeight: "caption",
-        fontSize: 18,
+        color: 'muted',
+        textIndent: '-.375em',
+        lineHeight: 'caption',
+        fontSize: 18
       }}
     >
       {children}
     </Text>
-  );
+  )
 }
diff --git a/components/hcb/timeline.js b/components/hcb/timeline.js
index 823a329d0..44ba05450 100644
--- a/components/hcb/timeline.js
+++ b/components/hcb/timeline.js
@@ -1,15 +1,15 @@
-import { Flex, Text, Image, Box, Container } from "theme-ui";
-import Slide from "react-reveal";
+import { Flex, Text, Image, Box, Container } from 'theme-ui'
+import Slide from 'react-reveal'
 
 function Step({ stepIndex, label }) {
   return (
     <Flex
       sx={{
-        flexDirection: ["row", null, "column"],
-        flex: "1 0 0",
-        alignItems: "center",
-        maxWidth: ["24rem", null, "12rem"],
-        gap: 3,
+        flexDirection: ['row', null, 'column'],
+        flex: '1 0 0',
+        alignItems: 'center',
+        maxWidth: ['24rem', null, '12rem'],
+        gap: 3
       }}
     >
       <Image
@@ -20,35 +20,35 @@ function Step({ stepIndex, label }) {
       <Text
         variant="lead"
         sx={{
-          textAlign: ["left", null, "center"],
-          margin: "0px !important",
+          textAlign: ['left', null, 'center'],
+          margin: '0px !important'
         }}
       >
         {label}
       </Text>
     </Flex>
-  );
+  )
 }
 
 export default function Timeline() {
   const labels = [
-    "Register your organization for HCB",
-    "Explore the interface in Playground mode",
-    "Hop on an intro call with our team",
-    "Start fundraising!",
-  ];
-  const stepSideLength = 64;
+    'Register your organization for HCB',
+    'Explore the interface in Playground mode',
+    'Hop on an intro call with our team',
+    'Start fundraising!'
+  ]
+  const stepSideLength = 64
 
   return (
     <Slide>
       <Flex
         sx={{
-          flexDirection: ["column", null, "row"],
-          justifyContent: "space-between",
+          flexDirection: ['column', null, 'row'],
+          justifyContent: 'space-between',
           gap: 4,
-          maxWidth: ["300px", null, "1200px"],
-          mx: "auto",
-          position: "relative",
+          maxWidth: ['300px', null, '1200px'],
+          mx: 'auto',
+          position: 'relative'
         }}
       >
         {labels.map((label, idx) => (
@@ -56,17 +56,17 @@ export default function Timeline() {
         ))}
         <Box
           sx={{
-            border: "solid #8492a6",
-            borderWidth: "3px 3px 0 0",
-            position: "absolute",
+            border: 'solid #8492a6',
+            borderWidth: '3px 3px 0 0',
+            position: 'absolute',
             top: stepSideLength / 2,
-            left: "10%", // TODO: make this dynamic
-            right: ["auto", null, "10%"],
-            bottom: [stepSideLength / 2, null, "auto"],
-            zIndex: -1,
+            left: '10%', // TODO: make this dynamic
+            right: ['auto', null, '10%'],
+            bottom: [stepSideLength / 2, null, 'auto'],
+            zIndex: -1
           }}
         />
       </Flex>
     </Slide>
-  );
+  )
 }
diff --git a/components/hcb/tooltip.js b/components/hcb/tooltip.js
index aa686949f..f730ca824 100644
--- a/components/hcb/tooltip.js
+++ b/components/hcb/tooltip.js
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 const addClassNameToChildren = (children, className) =>
-  React.Children.map(children, (child) =>
+  React.Children.map(children, child =>
     React.cloneElement(child, {
-      className: `${child.props.className || ""} ${className}`,
-    }),
-  );
+      className: `${child.props.className || ''} ${className}`
+    })
+  )
 
-const tooltip = (direction) =>
+const tooltip = direction =>
   function Tooltip({ children, text, id }) {
-    const escapedText = text.replace(/'/g, "\\'");
+    const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
             left: 100%;
@@ -35,17 +35,17 @@ const tooltip = (direction) =>
             top: 100%;
             margin-top: 0.5rem;
             transform: translateX(50%);
-        `,
-    }[direction || "e"];
+        `
+    }[direction || 'e']
 
     return (
       <>
-        <style>{`.tooltipped${id ? "-" + id : ""} {
+        <style>{`.tooltipped${id ? '-' + id : ''} {
                 position: relative;
             }
             
             @media (min-width: 56em) {
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     background-color: rgba(31, 45, 61, 0.875);
                     border-radius: 0.5rem;
                     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@@ -73,29 +73,29 @@ const tooltip = (direction) =>
             
                 }
             
-                .tooltipped${id ? "-" + id : ""}:hover:after,
-                .tooltipped${id ? "-" + id : ""}:active:after,
-                .tooltipped${id ? "-" + id : ""}:focus:after {
+                .tooltipped${id ? '-' + id : ''}:hover:after,
+                .tooltipped${id ? '-' + id : ''}:active:after,
+                .tooltipped${id ? '-' + id : ''}:focus:after {
                     opacity: 1;
                     z-index: 9000000;
                     backdrop-filter: blur(2px);
                 }
             
-                .tooltipped${id ? "-" + id : ""}:after {
+                .tooltipped${id ? '-' + id : ''}:after {
                     ${directionalStyles}
                 }
             }`}</style>
 
         {children}
       </>
-    );
-  };
+    )
+  }
 
-const Tooltip = tooltip();
-Tooltip.N = tooltip("n");
-Tooltip.S = tooltip("s");
-Tooltip.E = tooltip("e");
-Tooltip.W = tooltip("w");
+const Tooltip = tooltip()
+Tooltip.N = tooltip('n')
+Tooltip.S = tooltip('s')
+Tooltip.E = tooltip('e')
+Tooltip.W = tooltip('w')
 
-export { Tooltip };
-export default Tooltip;
+export { Tooltip }
+export default Tooltip
diff --git a/components/icon.js b/components/icon.js
index b947763c5..3aae1161a 100644
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "theme-ui";
-import Icon from "@hackclub/icons";
+import { jsx } from 'theme-ui'
+import Icon from '@hackclub/icons'
 
-const IconComponent = (props) => <Icon {...props} />;
+const IconComponent = props => <Icon {...props} />
 
-export default IconComponent;
+export default IconComponent
diff --git a/components/index/cards/angelhacks.js b/components/index/cards/angelhacks.js
index baadf1925..650b5c981 100644
--- a/components/index/cards/angelhacks.js
+++ b/components/index/cards/angelhacks.js
@@ -1,4 +1,4 @@
-import CardModel from "./card-model";
+import CardModel from './card-model'
 import {
   Box,
   Button,
@@ -10,12 +10,12 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import Buttons from "./button";
-import Dot from "../../dot";
+  Text
+} from 'theme-ui'
+import Buttons from './button'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function Epoch() {
   return (
@@ -23,31 +23,31 @@ export default function Epoch() {
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="https://cloud-f3vv32ihb-hack-club-bot.vercel.app/0bg_angelhacks.png"
         alt=""
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          filter: "brightness(0.3)",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          filter: 'brightness(0.3)',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <img
             alt=""
             src="https://cloud-a2oswmb6u-hack-club-bot.vercel.app/0angelhacks_edgefix.png"
             sx={{
-              width: ["270px", "270px", "290px", "390px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['270px', '270px', '290px', '390px'],
+              position: 'relative',
+              zIndex: 2
             }}
           />
         </Box>
@@ -58,27 +58,27 @@ export default function Epoch() {
             the coolest of games. So, what are you waiting for?
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksba.hackclub.com"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksto.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Toronto
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#ffb400" }}
+              sx={{ color: '#ffb400' }}
               href="https://angelhacksla.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -89,9 +89,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -114,5 +114,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index ef332adbc..792aedd52 100644
--- a/components/index/cards/button.js
+++ b/components/index/cards/button.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Box, Button, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
-import Icon from "@hackclub/icons";
+import React from 'react'
+import { Box, Button, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
+import Icon from '@hackclub/icons'
 
 export default function Buttons({
   children,
@@ -13,12 +13,12 @@ export default function Buttons({
   overrideColor,
   ...props
 }) {
-  let fontWeight = primary ? "700" : "400";
+  let fontWeight = primary ? '700' : '400'
 
   return (
     <Box
       as="button"
-      sx={{ background: "transparent", border: "none", color: "white" }}
+      sx={{ background: 'transparent', border: 'none', color: 'white' }}
       py={1}
     >
       <Button
@@ -27,34 +27,34 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || overrideColor || "rgb(255, 255, 255, 0.3)",
-          borderRadius: "100px",
-          border: "none",
-          display: "flex",
-          alignItems: "center",
-          color: "inherit",
-          px: "3",
-          py: primary ? "12px" : 2,
-          width: "fit-content",
-          textTransform: "none",
-          fontWeight: "400",
-          fontSize: primary ? ["18px", "20px", "22px"] : [1, "16px", "18px"],
-          backdropFilter: "blur(2px)",
-          fontWeight: fontWeight,
+          background: primary || overrideColor || 'rgb(255, 255, 255, 0.3)',
+          borderRadius: '100px',
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          px: '3',
+          py: primary ? '12px' : 2,
+          width: 'fit-content',
+          textTransform: 'none',
+          fontWeight: '400',
+          fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
+          backdropFilter: 'blur(2px)',
+          fontWeight: fontWeight
         }}
         as="a"
-        href={link || "/"}
+        href={link || '/'}
         target="_blank"
         rel="noreferrer"
         {...props}
       >
         <Icon
-          glyph={icon || "plus-fill"}
-          sx={{ color: "inherit", marginRight: 2 }}
+          glyph={icon || 'plus-fill'}
+          sx={{ color: 'inherit', marginRight: 2 }}
           size={24}
           mr={2}
         />
-        <Text sx={{ fontFamily: "Phantom Sans", textAlign: "left" }}>
+        <Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>
           {children}
         </Text>
       </Button>
@@ -65,7 +65,7 @@ export default function Buttons({
         delayUpdate={500}
         clickable={true}
         getContent={() => {
-          return null;
+          return null
         }}
         className="custom-tooltip-radius custom-arrow-radius"
         arrowRadius="2"
@@ -74,5 +74,5 @@ export default function Buttons({
         {content}
       </ReactTooltip>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index 5d00bfad1..ed1e9e0e2 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -1,8 +1,8 @@
-import Icon from "../../icon";
-import { Box, Card, Flex, Image, Link, Text } from "theme-ui";
-import { Zoom } from "react-reveal";
-import ReactTooltip from "react-tooltip";
-import Comma from "../../comma";
+import Icon from '../../icon'
+import { Box, Card, Flex, Image, Link, Text } from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import ReactTooltip from 'react-tooltip'
+import Comma from '../../comma'
 
 /** @jsxImportSource theme-ui */
 
@@ -25,53 +25,53 @@ const CardModel = ({
   // <Zoom delay={delay}>
   <Card
     sx={{
-      position: "relative",
-      width: "100%",
+      position: 'relative',
+      width: '100%',
       color: color,
       my: [4, 4],
-      p: "24px",
-      backgroundSize: "cover",
-      backgroundImage: `url(${background})` || "",
-      backgroundPosition: "center bottom",
-      backgroundRepeat: "no-repeat",
-      "& p": {
-        fontSize: ["18px", "20px", "22px"],
-      },
+      p: '24px',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${background})` || '',
+      backgroundPosition: 'center bottom',
+      backgroundRepeat: 'no-repeat',
+      '& p': {
+        fontSize: ['18px', '20px', '22px']
+      }
     }}
     {...props}
   >
     {badge && (
       <Box
         sx={{
-          position: ["relative", "relative", "relative", "absolute"],
-          width: "fit-content",
+          position: ['relative', 'relative', 'relative', 'absolute'],
+          width: 'fit-content',
           right: [0, 0, 0, 3],
           top: [0, 0, 0, 3],
           zIndex: 3,
-          px: "12px",
-          py: "4px",
+          px: '12px',
+          py: '4px',
           mb: 2,
-          float: [null, "right", null],
+          float: [null, 'right', null],
           // background: 'rgba(255,255,255,0.2)',
-          border: "rgba(255,255,255,0.2) dashed 1px",
-          borderRadius: "circle",
-          fontWeight: "bold",
+          border: 'rgba(255,255,255,0.2) dashed 1px',
+          borderRadius: 'circle',
+          fontWeight: 'bold'
         }}
       >
-        {text || "Happening now"}
+        {text || 'Happening now'}
       </Box>
     )}
 
     {github_link && (
       <Box>
-        {position === "bottom" ? (
+        {position === 'bottom' ? (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: 3,
               bottom: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
             }}
           >
             <Link
@@ -85,10 +85,10 @@ const CardModel = ({
                 size={42}
                 color="#2351fs"
                 sx={{
-                  color: "#000",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  color: '#000',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -103,16 +103,16 @@ const CardModel = ({
         ) : (
           <Flex
             sx={{
-              position: "absolute",
+              position: 'absolute',
               right: 2,
               top: 2,
-              alignItems: "center",
-              zIndex: 2,
+              alignItems: 'center',
+              zIndex: 2
               // flexDirection: ['column', 'row', 'row']
             }}
           >
             {stars ? (
-              <Text as="h2" sx={{ fontSize: ["20px", "24px", "28px"] }}>
+              <Text as="h2" sx={{ fontSize: ['20px', '24px', '28px'] }}>
                 ⭐️ <Comma>{stars}</Comma>
               </Text>
             ) : (
@@ -124,10 +124,10 @@ const CardModel = ({
                 size={42}
                 sx={{
                   color: color,
-                  transition: "0.4s",
-                  "&:hover": {
-                    color: highlight || color,
-                  },
+                  transition: '0.4s',
+                  '&:hover': {
+                    color: highlight || color
+                  }
                 }}
               />
             </Link>
@@ -141,14 +141,14 @@ const CardModel = ({
         src={image}
         draggable="false"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
           zIndex: 0,
-          filter,
+          filter
         }}
         alt=""
       />
@@ -157,6 +157,6 @@ const CardModel = ({
     <ReactTooltip />
   </Card>
   // </Zoom>
-);
+)
 
-export default CardModel;
+export default CardModel
diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js
index d15218d4c..fe035e253 100644
--- a/components/index/cards/clubs.js
+++ b/components/index/cards/clubs.js
@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import { Box, Grid, Flex, Image, Text } from "theme-ui";
-import ReactTooltip from "react-tooltip";
+import React, { useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
+import { Box, Grid, Flex, Image, Text } from 'theme-ui'
+import ReactTooltip from 'react-tooltip'
 
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Clubs() {
   // let [fooRef, setFooRef] = useState('')
@@ -30,20 +30,20 @@ export default function Clubs() {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "red",
+        backgroundColor: 'red'
       }}
     >
       <Image
         src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
         alt="Summer Creek Hack Club meeting, February 2020"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "120%",
-          height: "120%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
-          zIndex: 0,
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '120%',
+          height: '120%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px'],
+          zIndex: 0
         }}
       />
       <Cover />
@@ -51,24 +51,24 @@ export default function Clubs() {
         variant="title"
         as="h3"
         sx={{
-          borderRadius: "default",
+          borderRadius: 'default',
           px: 2,
           mx: [-2, 0],
-          whiteSpace: [null, "nowrap", "nowrap"],
-          fontSize: ["36px", 4, 5],
-          position: "relative",
+          whiteSpace: [null, 'nowrap', 'nowrap'],
+          fontSize: ['36px', 4, 5],
+          position: 'relative',
           zIndex: 2,
-          width: "fit-content",
+          width: 'fit-content'
         }}
       >
         A Network of 400+ Coding Clubs
       </Text>
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box>
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             Join or start a Hack&nbsp;Club and be part of a network of high
             quality coding clubs where you learn to code entirely through
@@ -77,12 +77,12 @@ export default function Clubs() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ textShadow: "1px 1px 5px black" }}
+            sx={{ textShadow: '1px 1px 5px black' }}
           >
             You can start with no experience and build and ship a project every
             meeting.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="we'll support you with meeting content, stickers, and more"
               id="2"
@@ -96,5 +96,5 @@ export default function Clubs() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index 5c22e716a..788c886e4 100644
--- a/components/index/cards/epoch.js
+++ b/components/index/cards/epoch.js
@@ -1,144 +1,144 @@
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useEffect, useState } from "react";
-import Buttons from "./button";
-import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useEffect, useState } from 'react'
+import Buttons from './button'
+import CardModel from './card-model'
 
 export default function Epoch() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date();
-    let timeLeft = {};
+    const difference = +new Date(`2022-12-30T12:30:00.000Z`) - +new Date()
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "#FF4794",
-          position: "relative",
-          width: [null, "85%", "80%"],
-          height: [null, "50%", "85%"],
-          border: "none",
-          borderColor: "#FF4794",
+        sx={theme => ({
+          color: '#FF4794',
+          position: 'relative',
+          width: [null, '85%', '80%'],
+          height: [null, '50%', '85%'],
+          border: 'none',
+          borderColor: '#FF4794',
           fontSize: [3, 4],
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          opacity: 0.7,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          opacity: 0.7
         })}
       >
         <Box>
           <Text
             sx={{
-              color: "#FF4794",
+              color: '#FF4794'
             }}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
             sx={{
-              color: "white",
-              position: "relative",
-              fontSize: [1, "16px", "20px"],
-              display: "block",
-              pb: "15px",
+              color: 'white',
+              position: 'relative',
+              fontSize: [1, '16px', '20px'],
+              display: 'block',
+              pb: '15px'
             }}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
   return (
     <CardModel
       id="epoch"
       color="white"
       sx={{
-        backgroundColor: "#000",
+        backgroundColor: '#000'
       }}
     >
       <Image
         src="/home/epoch-bg.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Hack Club Presents Epoch background"
       />
-      <Grid columns={[1, 1, "1fr 1.5fr"]} sx={{ position: "relative" }}>
+      <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
           <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
-              width: ["220px", "220px", "240px", "350px"],
-              position: "relative",
-              zIndex: 2,
+              width: ['220px', '220px', '240px', '350px'],
+              position: 'relative',
+              zIndex: 2
             }}
             alt="Hack Club Presents Epoch header"
           />
@@ -146,7 +146,7 @@ export default function Epoch() {
             {timer.length ? (
               <Grid
                 key="{e}"
-                columns={["1fr 1fr 1fr 1fr"]}
+                columns={['1fr 1fr 1fr 1fr']}
                 sx={{ mr: 2, mt: 2 }}
               >
                 {timer}
@@ -164,27 +164,27 @@ export default function Epoch() {
             thrill of being in-person together.
           </Text>
           <Text as="p" variant="subtitle">
-            In{" "}
+            In{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://hackclub.slack.com/archives/C04CGDDLC72"
               target="_blank"
               rel="noopener"
             >
               Austin
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochba.hackclub.com/"
               target="_blank"
               rel="noopener"
             >
               Bay Area
             </Link>
-            , or{" "}
+            , or{' '}
             <Link
-              sx={{ color: "#FF4794" }}
+              sx={{ color: '#FF4794' }}
               href="https://epochvt.hackclub.com/"
               target="_blank"
               rel="noopener"
@@ -195,9 +195,9 @@ export default function Epoch() {
           </Text>
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               mt: [4, 3, 4],
-              position: "relative",
+              position: 'relative'
             }}
           >
             <Buttons
@@ -221,5 +221,5 @@ export default function Epoch() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/events.js b/components/index/cards/events.js
index ed7f7f73a..5419b3a65 100644
--- a/components/index/cards/events.js
+++ b/components/index/cards/events.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Button, Grid, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
+import CardModel from './card-model'
+import { Box, Button, Grid, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,72 +10,72 @@ export default function Events({ data, stars, events }) {
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
           'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
-        backgroundPositon: "center center",
-        backgroundSize: "100% auto",
+        backgroundPositon: 'center center',
+        backgroundSize: '100% auto'
       }}
     >
-      <Text variant="title" sx={{ fontSize: ["36px", 4, 5], zIndex: 2 }}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
         Virtual Events
       </Text>
-      <Grid columns={[1, "0.6fr 1fr"]}>
+      <Grid columns={[1, '0.6fr 1fr']}>
         <Box>
           <Text as="p" variant="subtitle">
             Hack Clubbers run events that don’t suck. From live coding sessions
             to movie nights, we like to hangout on calls.
           </Text>
           <Text as="p" variant="subtitle">
-            Sometimes, we also invite someone we really want to speak to (like{" "}
+            Sometimes, we also invite someone we really want to speak to (like{' '}
             <Link
               href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Sal Khan
             </Link>
-            ,{" "}
+            ,{' '}
             <Link
               href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               George Hotz
             </Link>
-            , and{" "}
+            , and{' '}
             <Link
               href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
               target="_blank"
               rel="noopener"
               sx={{
-                color: "inherit",
-                fontStyle: "italic",
-                textDecoration: "none",
+                color: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'none'
               }}
             >
               Lady Ada
             </Link>
-            ) and host an{" "}
+            ) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Button variant="primary" mt={3}>
             Find an event
@@ -86,5 +86,5 @@ export default function Events({ data, stars, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 54b8a31d1..5234d3ddf 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,34 +1,34 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import { useState, useEffect } from "react";
-import Buttons from "./button";
-import ScrollingHackathons from "../../hackathons/scrolling-hackathons";
-import Dot from "../../dot";
-import { formatDate } from "../../../lib/dates";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import Buttons from './button'
+import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
+import Dot from '../../dot'
+import { formatDate } from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 export default function Hackathons({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "dark",
+        backgroundColor: 'dark'
       }}
       stars={stars}
       github_link="https://github.com/hackclub/hackathons"
@@ -37,13 +37,13 @@ export default function Hackathons({ data, stars }) {
       <Image
         src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
           ml: -4,
           mt: -4,
-          zIndex: 0,
+          zIndex: 0
         }}
         alt="A crowd of hackers cheering at Epoch"
       />
@@ -51,21 +51,21 @@ export default function Hackathons({ data, stars }) {
       <Text
         variant="title"
         as="h3"
-        sx={{ fontSize: ["36px", 4, 5], position: "relative", zIndex: 2 }}
+        sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
       >
         High School Hackathons
       </Text>
       <Grid
         columns={[1, 1, 2]}
-        sx={{ position: "relative", zIndex: 2, minHeight: "200px" }}
+        sx={{ position: 'relative', zIndex: 2, minHeight: '200px' }}
       >
         <Box>
           <Text as="p" variant="subtitle">
             We support the largest network of high school hackathons in the
             world. From an online community of organizers to free stickers and
-            more!{" "}
+            more!{' '}
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="19"
               icon="event-code"
@@ -86,39 +86,39 @@ export default function Hackathons({ data, stars }) {
         </Box>
         <Flex
           sx={{
-            flexDirection: "column",
-            alignItems: "flex-end",
-            alignSelf: "flex-end",
-            position: ["absolute", "absolute", "relative"],
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            alignSelf: 'flex-end',
+            position: ['absolute', 'absolute', 'relative'],
             right: 0,
             bottom: 0,
-            display: ["none", "none", "block"],
+            display: ['none', 'none', 'block']
           }}
         >
-          <Box sx={{ width: "fit-content", float: "right" }}>
+          <Box sx={{ width: 'fit-content', float: 'right' }}>
             <Text
               as="h4"
-              sx={{ fontSize: "small", width: "100%", textAlign: "center" }}
+              sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}
             >
               <Dot /> Upcoming Hackathons
             </Text>
-            {data.slice(0, 5).map((data) => (
+            {data.slice(0, 5).map(data => (
               <Box
                 sx={{
-                  zIndex: "1",
+                  zIndex: '1',
                   // bg: 'rgb(255, 255, 255, 0.3)',
-                  color: "white",
-                  textDecoration: "none",
-                  fontWeight: "normal",
-                  width: "fit-content",
-                  display: "flex",
-                  alignItems: "center",
-                  fontSize: "small",
+                  color: 'white',
+                  textDecoration: 'none',
+                  fontWeight: 'normal',
+                  width: 'fit-content',
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 'small',
                   my: 2,
                   a: {
-                    textDecoration: "none",
-                    color: "white",
-                  },
+                    textDecoration: 'none',
+                    color: 'white'
+                  }
                 }}
                 key={data.name}
               >
@@ -126,13 +126,13 @@ export default function Hackathons({ data, stars }) {
                   <Box
                     sx={{
                       backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "circle",
-                      height: ["20px", "25px", "30px"],
-                      width: ["20px", "25px", "30px"],
-                      mr: "10px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: 'circle',
+                      height: ['20px', '25px', '30px'],
+                      width: ['20px', '25px', '30px'],
+                      mr: '10px'
                     }}
                   >
                     <Image
@@ -140,23 +140,23 @@ export default function Hackathons({ data, stars }) {
                       alt={`${data.name} logo`}
                       loading="lazy"
                       sx={{
-                        height: "70%",
-                        width: "70%",
-                        objectFit: "contain",
-                        borderRadius: "default",
+                        height: '70%',
+                        width: '70%',
+                        objectFit: 'contain',
+                        borderRadius: 'default'
                       }}
                     />
                   </Box>
                 )}
-                <Flex sx={{ flexDirection: "column" }}>
+                <Flex sx={{ flexDirection: 'column' }}>
                   <Link
                     href={data.website}
                     as="a"
                     target="_blank"
                     sx={{
-                      color: "inherit",
-                      textDecoration: "none",
-                      fontWeight: "bold",
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      fontWeight: 'bold'
                     }}
                   >
                     {data.name}
@@ -164,12 +164,12 @@ export default function Hackathons({ data, stars }) {
                   <Text
                     as="h6"
                     sx={{
-                      fontWeight: "400",
-                      fontSize: "0.8em",
-                      color: "sunken",
+                      fontWeight: '400',
+                      fontSize: '0.8em',
+                      color: 'sunken'
                     }}
                   >
-                    {formatDate("mmmm d", new Date(data.start))}
+                    {formatDate('mmmm d', new Date(data.start))}
                   </Text>
                 </Flex>
               </Box>
@@ -179,35 +179,35 @@ export default function Hackathons({ data, stars }) {
       </Grid>
       <Flex
         sx={{
-          flexDirection: "row",
-          position: "relative",
-          alignItems: "center",
+          flexDirection: 'row',
+          position: 'relative',
+          alignItems: 'center',
           mt: 2,
-          justifyContent: "space-between",
-          display: ["block", "block", "none"],
+          justifyContent: 'space-between',
+          display: ['block', 'block', 'none']
         }}
       >
-        <Text sx={{ fontSize: "small", color: "white" }}>
+        <Text sx={{ fontSize: 'small', color: 'white' }}>
           Upcoming Hackathons:
         </Text>
-        <Flex sx={{ gap: "10px" }}>
-          {data.slice(0, 2).map((data) => (
+        <Flex sx={{ gap: '10px' }}>
+          {data.slice(0, 2).map(data => (
             <Box
               sx={{
-                zIndex: "1",
+                zIndex: '1',
                 // bg: 'rgb(255, 255, 255, 0.3)',
-                color: "white",
-                textDecoration: "none",
-                fontWeight: "normal",
-                width: "fit-content",
-                display: "flex",
-                alignItems: "center",
-                fontSize: "small",
+                color: 'white',
+                textDecoration: 'none',
+                fontWeight: 'normal',
+                width: 'fit-content',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'small',
                 my: 2,
                 a: {
-                  textDecoration: "none",
-                  color: "white",
-                },
+                  textDecoration: 'none',
+                  color: 'white'
+                }
               }}
               key={data.name}
             >
@@ -215,13 +215,13 @@ export default function Hackathons({ data, stars }) {
                 <Box
                   sx={{
                     backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "circle",
-                    height: ["20px", "25px", "30px"],
-                    width: ["20px", "25px", "30px"],
-                    mr: "5px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 'circle',
+                    height: ['20px', '25px', '30px'],
+                    width: ['20px', '25px', '30px'],
+                    mr: '5px'
                   }}
                 >
                   <Image
@@ -229,11 +229,11 @@ export default function Hackathons({ data, stars }) {
                     alt={`${data.name} logo`}
                     loading="lazy"
                     sx={{
-                      height: "70%",
-                      width: "70%",
-                      objectFit: "contain",
-                      borderRadius: "default",
-                      fontSize: "small",
+                      height: '70%',
+                      width: '70%',
+                      objectFit: 'contain',
+                      borderRadius: 'default',
+                      fontSize: 'small'
                     }}
                   />
                 </Box>
@@ -244,5 +244,5 @@ export default function Hackathons({ data, stars }) {
         </Flex>
       </Flex>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/haxidraw.js b/components/index/cards/haxidraw.js
index 147395cb5..31bf491cd 100644
--- a/components/index/cards/haxidraw.js
+++ b/components/index/cards/haxidraw.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,15 +12,15 @@ export default function Haxidraw() {
       github_link="https://github.com/hackclub/blot/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
-        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`,
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       filter="brightness(0.8)"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Blot
       </Text>
       <Grid columns={[1, 2]}>
@@ -28,7 +28,7 @@ export default function Haxidraw() {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Blot is a W.I.P. open source drawing machine and online editor,
             designed to be a fun and beginner friendly introduction to digital
@@ -36,13 +36,13 @@ export default function Haxidraw() {
           </Text>
         </Box>
         <Box>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               id="51"
               icon="align-left"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Learn more
             </Buttons>
@@ -51,7 +51,7 @@ export default function Haxidraw() {
               icon="code"
               link="https://blot.hackclub.dev"
               primary="rgba(255, 255, 255, 0.9)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Create something in the editor
             </Buttons>
@@ -60,7 +60,7 @@ export default function Haxidraw() {
               icon="slack"
               link="/slack"
               overrideColor="rgba(255, 255, 255, 0.7)"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Share your creations and chat on Slack
             </Buttons>
@@ -68,5 +68,5 @@ export default function Haxidraw() {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/inspect.js b/components/index/cards/inspect.js
index f316dc453..282ae61b8 100644
--- a/components/index/cards/inspect.js
+++ b/components/index/cards/inspect.js
@@ -1,10 +1,10 @@
-import { Text } from "theme-ui";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
+import { Text } from 'theme-ui'
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
 
 export default function Inspect() {
-  const prefersMotion = usePrefersMotion();
+  const prefersMotion = usePrefersMotion()
 
   const cursor = keyframes` 0% {
     cursor: grabbing
@@ -68,7 +68,7 @@ export default function Inspect() {
   }
   100% {
     cursor: ew-resize
-  }`;
+  }`
 
   const animation1 = keyframes`
   0% {
@@ -134,7 +134,7 @@ export default function Inspect() {
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-  `;
+  `
 
   const animation2 = keyframes`
   0% {
@@ -200,7 +200,7 @@ export default function Inspect() {
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-  `;
+  `
 
   const Glitch = styled(Text)`
     color: #000;
@@ -221,7 +221,7 @@ export default function Inspect() {
     &:before,
     &:after {
       color: #000;
-      content: "Hacker? Inspect 🔍 this page to learn more.";
+      content: 'Hacker? Inspect 🔍 this page to learn more.';
       position: absolute;
       // background: #303039;
       width: fit-content;
@@ -241,17 +241,17 @@ export default function Inspect() {
       text-shadow: -1px 0 green;
       animation: ${animation2} 4s infinite linear alternate-reverse;
     }
-  `;
+  `
 
   return (
     <>
       {prefersMotion ? (
         <Glitch>Hacker? Inspect 🔍 this page to learn more.</Glitch>
       ) : (
-        <Text sx={{ display: "absolute", bottom: "50px", left: 0 }}>
+        <Text sx={{ display: 'absolute', bottom: '50px', left: 0 }}>
           Hacker? Inspect 🔍 this page to learn more
         </Text>
       )}
     </>
-  );
+  )
 }
diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 961d969ea..95620e6fe 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -80,10 +80,12 @@ const MailingList = () => {
       >
         <Flex
           sx={{
-            justifyContent: "space-between",
+              placeItems: "center",
+              justifyContent: "center",
             alignItems: ["left", "left", "center"],
-            flexDirection: ["column", "column", "column"],
+            flexDirection: "column",
             gap: "10px",
+              width: "75%",
           }}
         >
           <Box>
@@ -108,7 +110,7 @@ const MailingList = () => {
             >
               We’ll send you an email no more than once a month, when we work on
               something cool for you. Check out{" "}
-              <Link href="#">past issues</Link>.
+              <Link href="/newsletter">past issues</Link>.
             </Text>
           </Box>
           <Grid
@@ -135,7 +137,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </Box>
@@ -151,7 +152,6 @@ const MailingList = () => {
                   width: "100%",
                   textAlign: "center",
                   fontSize: 2,
-                  outline: "none",
                 }}
               />
             </div>
@@ -175,10 +175,11 @@ const MailingList = () => {
         </Flex>
         <Box sx={{
             display: "grid",
-            gridGap: 4
+            gridGap: 4,
+            width: "100%"
         }}>
-            <MailCard subject="Hello, world!" date="26/11/23" body="Reprehenderit quis et culpa anim mollit proident cillum laborum veniam eiusmod. Mollit laborum do magna elit labore et do exercitation duis laboris qui et non enim. Commodo deserunt tempor esse aute aliquip. Cupidatat proident officia consequat et id do dolore labore ad eiusmod labore. Cupidatat nisi tempor duis magna irure duis aliqua nisi occaecat est esse. Ea laboris quis dolore officia voluptate aliqua id aliquip eiusmod irure aliquip ex nisi dolor. Eu tempor pariatur non ipsum culpa ex. Consequat aute aute do laborum Lorem minim adipisicing sint mollit ea."/>
-            <MailCard subject="Hello, again!" date="26/11/23" body="AHHHHH!!"/>
+            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
+            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
         </Box>
       </Card>
         {/*<Box
diff --git a/components/index/cards/outernet.js b/components/index/cards/outernet.js
index 58df5e5e4..f514c06e7 100644
--- a/components/index/cards/outernet.js
+++ b/components/index/cards/outernet.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,40 +10,40 @@ export default function Outernet() {
       github_link="https://github.com/hackclub/outernet/"
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#95C9E5",
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/outernet/outernet-bg.png"
       filter="brightness(0.7)"
     >
-      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Image
           src="/outernet/outernet-text.svg"
           sx={{
-            width: ["200px", "250px", "300px"],
-            mt: ["-10px", "-20px", "-20px"],
-            position: "relative",
+            width: ['200px', '250px', '300px'],
+            mt: ['-10px', '-20px', '-20px'],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Outernet"
         />
         <Box></Box>
 
-        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+        <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
           Outernet is a four day hacker camp in Vermont for high schoolers with
           workshops, mini-hackathons, CTFs, and similar technical events, from
           28th to 31st July, 2023!
         </Text>
         <Flex
           sx={{
-            flexDirection: "column",
+            flexDirection: 'column',
             mt: [3, 3, 4],
-            alignItems: "end",
-            justifyContent: "flex-end",
+            alignItems: 'end',
+            justifyContent: 'flex-end'
           }}
         ></Flex>
 
@@ -56,5 +56,5 @@ export default function Outernet() {
         </Box> */}
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js
index 5cf8335f1..fdd4045c4 100644
--- a/components/index/cards/sinerider.js
+++ b/components/index/cards/sinerider.js
@@ -1,6 +1,6 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -12,39 +12,39 @@ export default function Sinerider({ stars }) {
       stars={stars}
       color="white"
       sx={{
-        backgroundSize: "cover",
+        backgroundSize: 'cover',
         // backgroundImage:
         //   'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
         // backgroundPosition: 'center -60px',
         // backgroundRepeat: 'no-repeat',
-        backgroundColor: "#271932",
+        backgroundColor: '#271932'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       highlight="#271932"
       image="/home/sinerider-bg.webp"
     >
       <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{
-          width: ["200px", "250px", "300px"],
-          mt: ["-10px", "-20px", "-20px"],
-          position: "relative",
+          width: ['200px', '250px', '300px'],
+          mt: ['-10px', '-20px', '-20px'],
+          position: 'relative',
           zIndex: 2,
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sinerider"
       />
-      <Grid columns={[1, 1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
         <Box></Box>
-        <Box sx={{ mt: ["-40px", "-40px", "-150px"] }}>
+        <Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
           <Text as="p" variant="subtitle">
             SineRider is a game about love and graphing, powered by teenage
             hackers of all kinds: artists, musicians, programmers, storytellers…
             so if that’s you, come join us! We can always use help keeping
             everything up to date and running smoothly.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               icon="view"
               href="https://sinerider.com/"
@@ -52,7 +52,7 @@ export default function Sinerider({ stars }) {
               rel="noopener"
               primary="#CAB4D4"
               id="43"
-              sx={{ color: "#271932" }}
+              sx={{ color: '#271932' }}
             >
               Play now
             </Buttons>
@@ -69,5 +69,5 @@ export default function Sinerider({ stars }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js
index f5985e67f..3615bdf19 100644
--- a/components/index/cards/slack.js
+++ b/components/index/cards/slack.js
@@ -1,68 +1,68 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import Event from "../events";
-import Dot from "../../dot";
-import Comma from "../../comma";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import Event from '../events'
+import Dot from '../../dot'
+import Comma from '../../comma'
 /** @jsxImportSource theme-ui */
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
       backgroundImage:
-        "linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))",
+        'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
       opacity: 0.8,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 const Stats = ({ data, subheading, nonMobile = false }) => (
-  <Box sx={{ display: nonMobile ? ["none", "block"] : "block" }}>
+  <Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
     <Heading
       variant="headline"
       as="h4"
-      sx={{ mb: 0, pt: 2, fontSize: ["28px", "36px", "38px"] }}
+      sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
     >
       <Comma>{data}</Comma>
     </Heading>
     <Text
       sx={{
-        color: "muted",
-        fontSize: ["14px", "16px", "18px"],
-        fontWeight: "400",
+        color: 'muted',
+        fontSize: ['14px', '16px', '18px'],
+        fontWeight: '400'
       }}
       as="h5"
     >
       {subheading}
     </Text>
   </Box>
-);
+)
 export default function Slack({ data, slackKey, events }) {
   return (
     <CardModel
       color="white"
       sx={{
-        position: "relative",
-        overflow: "hidden",
-        backgroundImage: (t) => t.util.gx("cyan", "purple"),
-        minHeight: ["500px", "400px"],
-        py: [3, 3, 4],
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: t => t.util.gx('cyan', 'purple'),
+        minHeight: ['500px', '400px'],
+        py: [3, 3, 4]
       }}
     >
       <Image
         src="/home/slack_ama.webp"
         sx={{
-          objectFit: "cover",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          ml: ["-24px", "-32px", "-32px", "-32px"],
-          mt: ["-24px", "-32px", "-32px", "-32px"],
+          objectFit: 'cover',
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          ml: ['-24px', '-32px', '-32px', '-32px'],
+          mt: ['-24px', '-32px', '-32px', '-32px']
         }}
         alt="Slack AMA"
       />
@@ -72,24 +72,24 @@ export default function Slack({ data, slackKey, events }) {
           as="h3"
           variant="title"
           sx={{
-            fontSize: ["36px", 4, 5],
+            fontSize: ['36px', 4, 5],
             zIndex: 2,
-            maxWidth: [null, null, "70%", null],
+            maxWidth: [null, null, '70%', null]
           }}
         >
           Our Online Community
         </Text>
       </Grid>
-      <Grid columns={[1, 1, "1.6fr 1fr", "1.6fr 1fr"]} sx={{ zIndex: 2 }}>
+      <Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
         <Box
           sx={{
-            zIndex: 2,
+            zIndex: 2
           }}
         >
           <Text
             as="p"
             variant="subtitle"
-            sx={{ fontSize: [1, "16px", "24px"] }}
+            sx={{ fontSize: [1, '16px', '24px'] }}
           >
             Coding doesn’t have to be a solitary activity. At Hack&nbsp;Club, we
             make things together and in our Slack, you’ll find awesome people to
@@ -98,16 +98,16 @@ export default function Slack({ data, slackKey, events }) {
           </Text>
           <Text as="p" variant="subtitle">
             Occasionally we invite someone we really want to speak to (like Sal
-            Khan, George Hotz, and Lady Ada) and host an{" "}
+            Khan, George Hotz, and Lady Ada) and host an{' '}
             <Link
               href="/amas"
               target="_blank"
               rel="noopener"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
             >
               AMA
-            </Link>{" "}
-            with them.{" "}
+            </Link>{' '}
+            with them.{' '}
           </Text>
           <Event events={events} />
           <Buttons id="13" link="/slack" icon="slack" primary="purple">
@@ -116,31 +116,31 @@ export default function Slack({ data, slackKey, events }) {
           <Grid
             sx={{
               zIndex: 2,
-              display: data?.chats_channels_count_1d > 0 ? "block" : "none",
+              display: data?.chats_channels_count_1d > 0 ? 'block' : 'none'
             }}
           >
             <Box
               sx={{
-                background: "rgb(0,0,0,0.6)",
-                height: ["130px", "170px", "170px", "100%"],
-                position: ["relative", "relative", "absolute"],
+                background: 'rgb(0,0,0,0.6)',
+                height: ['130px', '170px', '170px', '100%'],
+                position: ['relative', 'relative', 'absolute'],
                 zIndex: 3,
-                width: ["120%", "120%", "260px"],
+                width: ['120%', '120%', '260px'],
                 right: 0,
                 top: [null, null, 0],
                 mt: [3, 3, 0],
-                ml: ["-10%", "-10%", "-5%"],
-                mb: ["-10%", "-10%", "-5%"],
+                ml: ['-10%', '-10%', '-5%'],
+                mb: ['-10%', '-10%', '-5%'],
                 p: 4,
-                py: [3, 3, 2],
+                py: [3, 3, 2]
               }}
             >
               <Flex
                 sx={{
-                  flexDirection: ["row", "row", "column"],
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  textAlign: "center",
+                  flexDirection: ['row', 'row', 'column'],
+                  justifyContent: 'space-between',
+                  flexWrap: 'wrap',
+                  textAlign: 'center'
                 }}
               >
                 <Stats
@@ -166,5 +166,5 @@ export default function Slack({ data, slackKey, events }) {
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js
index 7a8c23a29..3e5455ae2 100644
--- a/components/index/cards/sprig-console.js
+++ b/components/index/cards/sprig-console.js
@@ -1,49 +1,49 @@
-import { Box, Grid, Image, Text } from "theme-ui";
-import Buttons from "./button";
-import CardModel from "./card-model";
-import Tilt from "../../tilt";
+import { Box, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+import CardModel from './card-model'
+import Tilt from '../../tilt'
 
 /** @jsxImportSource theme-ui */
 
 export default function SprigConsole({ stars, consoleCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <CardModel
         github_link="https://github.com/hackclub/sprig-hardware"
         stars={stars}
         color="white"
         sx={{
-          backgroundSize: "cover",
-          backgroundColor: "#1A3C14",
-          backgroundPosition: "center center",
-          backgroundRepeat: "no-repeat",
-          minHeight: ["300px", "400px", "400px"],
+          backgroundSize: 'cover',
+          backgroundColor: '#1A3C14',
+          backgroundPosition: 'center center',
+          backgroundRepeat: 'no-repeat',
+          minHeight: ['300px', '400px', '400px']
         }}
         highlight="#427A43"
       >
         <Image
           src="https://sprig.hackclub.com/pcb.svg"
           sx={{
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "120%",
-            ml: "-24px",
-            opacity: "0.4",
-            mt: "-24px",
-            zIndex: 0,
+            objectFit: 'cover',
+            position: 'absolute',
+            width: '100%',
+            height: '120%',
+            ml: '-24px',
+            opacity: '0.4',
+            mt: '-24px',
+            zIndex: 0
           }}
           alt="Printed circuit board"
         />
         <Image
           src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
           sx={{
-            width: ["90%", "320px", "450px", "500px"],
-            mt: ["42px", 0, 0],
-            position: "relative",
+            width: ['90%', '320px', '450px', '500px'],
+            mt: ['42px', 0, 0],
+            position: 'relative',
             zIndex: 2,
-            fontSize: ["36px", 4, 5],
-            color: "white",
+            fontSize: ['36px', 4, 5],
+            color: 'white'
           }}
           alt="Sprig console"
         />
@@ -53,31 +53,31 @@ export default function SprigConsole({ stars, consoleCount }) {
           sx={{
             px: 2,
             py: 1,
-            width: "fit-content",
-            borderRadius: "extra",
-            color: "white",
-            border: "rgba(255,255,255,0.2) dashed 1px",
+            width: 'fit-content',
+            borderRadius: 'extra',
+            color: 'white',
+            border: 'rgba(255,255,255,0.2) dashed 1px',
             zIndex: 2,
-            position: ["absolute", "relative", "relative"],
-            top: ["24px", 0, "5px"],
+            position: ['absolute', 'relative', 'relative'],
+            top: ['24px', 0, '5px']
           }}
         >
           {420 - consoleCount} consoles left
         </Text>
         <Grid
-          columns={[1, 1, "1.2fr 1fr", "1.2fr 1fr"]}
-          sx={{ zIndex: 2, position: "relative" }}
+          columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
+          sx={{ zIndex: 2, position: 'relative' }}
         >
           <Box>
             <Image
               src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
-                width: ["120%", "", ""],
-                maxWidth: ["120%", "", ""],
-                ml: ["-10%", "", ""],
-                mt: ["-10px", "-30px", "", ""],
-                mb: ["-15px", "-30px", "", ""],
-                display: [null, null, "none", "none"],
+                width: ['120%', '', ''],
+                maxWidth: ['120%', '', ''],
+                ml: ['-10%', '', ''],
+                mt: ['-10px', '-30px', '', ''],
+                mb: ['-15px', '-30px', '', ''],
+                display: [null, null, 'none', 'none']
               }}
               alt="Sprig console"
             />
@@ -85,7 +85,7 @@ export default function SprigConsole({ stars, consoleCount }) {
               Play your own Sprig games on this console, which you can assemble
               and disassemble. Each kit includes parts needed for getting
               started with hardware engineering and embedded systems
-              programming.{" "}
+              programming.{' '}
             </Text>
             <Buttons
               id="6"
@@ -104,19 +104,19 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Image
           src="/home/sprig-console.webp"
           sx={{
-            position: "absolute",
-            right: ["", "-50%", "-35%", "-25%"],
-            top: ["", "15%", "15%", "10%"],
-            width: ["", "100%", "85%", "70%"],
-            display: ["none", "none", "block", "block"],
-            "&:hover": {
-              cursor: "pointer",
+            position: 'absolute',
+            right: ['', '-50%', '-35%', '-25%'],
+            top: ['', '15%', '15%', '10%'],
+            width: ['', '100%', '85%', '70%'],
+            display: ['none', 'none', 'block', 'block'],
+            '&:hover': {
+              cursor: 'pointer'
             },
-            zIndex: 3,
+            zIndex: 3
           }}
           alt="Sprig console"
         />
       </Tilt>
     </Box>
-  );
+  )
 }
diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js
index e7a338b8b..7c441cb58 100644
--- a/components/index/cards/sprig.js
+++ b/components/index/cards/sprig.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Flex, Grid, Image, Link, Text } from "theme-ui";
-import Buttons from "./button";
-import styled from "@emotion/styled";
-import RelativeTime from "react-relative-time";
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
 
 /** @jsxImportSource theme-ui */
 
@@ -11,24 +11,24 @@ function Game({ game, gameImage, gameImage1, ...props }) {
     <Box
       as="div"
       sx={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        width: "14rem",
-        background: "rgba(54, 66, 85, 0.75)",
-        borderStyle: "solid",
-        borderWidth: "4px",
-        boxSizing: "border-box",
-        borderImageRepeat: "stretch",
-        borderImageSlice: "3",
-        borderImageWidth: "3",
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '14rem',
+        background: 'rgba(54, 66, 85, 0.75)',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        boxSizing: 'border-box',
+        borderImageRepeat: 'stretch',
+        borderImageSlice: '3',
+        borderImageWidth: '3',
         borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(118, 118, 143)" /></svg>')`,
-        borderImageOutset: "2",
-        boxShadow: "0 8px 8px rgba(0, 0, 0, 0.2)",
-        "&:hover": {
-          transform: "scale(1.05)",
-          background: "rgba(77, 90, 114, 0.8)",
-        },
+        borderImageOutset: '2',
+        boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          background: 'rgba(77, 90, 114, 0.8)'
+        }
       }}
       {...props}
     >
@@ -38,16 +38,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          borderStyle: "solid",
-          borderWidth: "4px",
-          padding: "0.6rem 0.6rem 0 0.6rem",
-          borderImageRepeat: "stretch",
-          borderImageSlice: "3",
-          borderImageWidth: "3",
+          borderStyle: 'solid',
+          borderWidth: '4px',
+          padding: '0.6rem 0.6rem 0 0.6rem',
+          borderImageRepeat: 'stretch',
+          borderImageSlice: '3',
+          borderImageWidth: '3',
           borderImageSource: `url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(167, 171, 185)" /></svg>')`,
-          borderImageOutset: "2",
-          height: "100%",
-          textDecoration: "none",
+          borderImageOutset: '2',
+          height: '100%',
+          textDecoration: 'none'
         }}
       >
         {/* <Box
@@ -112,21 +112,21 @@ function Game({ game, gameImage, gameImage1, ...props }) {
             }}
           />
         </Box> */}
-        <Box sx={{ display: "flex", flex: "60% 40%", flexWrap: "wrap" }}>
+        <Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
           <Text
             as="h3"
             sx={{
-              textTransform: "lowercase",
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              color: "white",
-              whiteSpace: "nowrap",
-              margin: "0.8rem 0 0.8rem 0",
-              fontSize: "1.4rem",
-              fontWeight: "400",
+              textTransform: 'lowercase',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              color: 'white',
+              whiteSpace: 'nowrap',
+              margin: '0.8rem 0 0.8rem 0',
+              fontSize: '1.4rem',
+              fontWeight: '400',
               my: 0,
-              lineHeight: "1.4rem",
+              lineHeight: '1.4rem'
             }}
           >
             {game?.title}
@@ -134,16 +134,16 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="h4"
             sx={{
-              fontWeight: "300",
-              fontSize: "1.1rem",
-              color: "rgb(151, 166, 187)",
+              fontWeight: '300',
+              fontSize: '1.1rem',
+              color: 'rgb(151, 166, 187)',
               padding: 0,
-              textOverflow: "ellipsis",
-              width: "100%",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
               mt: 0,
-              lineHeight: "1rem",
+              lineHeight: '1rem'
             }}
           >
             by {game?.author}
@@ -151,20 +151,20 @@ function Game({ game, gameImage, gameImage1, ...props }) {
           <Text
             as="span"
             sx={{
-              fontWeight: "300",
-              fontSize: "0.8rem",
-              color: "snow",
+              fontWeight: '300',
+              fontSize: '0.8rem',
+              color: 'snow',
               padding: 0,
               opacity: 0.3,
-              mb: 1,
+              mb: 1
             }}
           >
-            <RelativeTime value={game["added on"]} titleFormat="YYYY-MM-DD" />
+            <RelativeTime value={game['added on']} titleFormat="YYYY-MM-DD" />
           </Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Sprig({ stars, game, gameImage, gameImage1 }) {
@@ -174,17 +174,17 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
       color="white"
       stars={stars}
       highlight="#FFDE4D"
-      sx={{ backgroundColor: "#0C0C16" }}
+      sx={{ backgroundColor: '#0C0C16' }}
       image="/home/sprig-bg.webp"
     >
       <Image
         src="/home/sprig-logo.webp"
         sx={{
-          width: ["150px", "180px", "220px"],
+          width: ['150px', '180px', '220px'],
           zIndex: 3,
-          position: "relative",
-          fontSize: ["36px", 4, 5],
-          color: "white",
+          position: 'relative',
+          fontSize: ['36px', 4, 5],
+          color: 'white'
         }}
         alt="Sprig"
       />
@@ -193,19 +193,19 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
           <Text
             as="p"
             variant="subtitle"
-            sx={{ zIndex: 2, position: "relative" }}
+            sx={{ zIndex: 2, position: 'relative' }}
           >
             Draw, make music, and craft games in our web-based JavaScript game
             editor, which has been used by 7k+ makers around the world.
           </Text>
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
             <Buttons
               content="click here to get started in our editor"
               id="6"
               icon="emoji"
               link="https://editor.sprig.hackclub.com"
               primary="#FFDE4D"
-              sx={{ color: "black" }}
+              sx={{ color: 'black' }}
             >
               Build a Sprig game
             </Buttons>
@@ -229,15 +229,15 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
         <Box sx={{ mt: [0, -4, -4] }}>
           <Text
             sx={{
-              fontStyle: "italic",
-              fontSize: [1, "14px", "16px"],
-              position: "relative",
+              fontStyle: 'italic',
+              fontSize: [1, '14px', '16px'],
+              position: 'relative'
             }}
           >
-            New from{" "}
+            New from{' '}
             <Link
               href="https://sprig.hackclub.com/gallery"
-              sx={{ textDecoration: "none", color: "inherit" }}
+              sx={{ textDecoration: 'none', color: 'inherit' }}
             >
               the gallery
             </Link>
@@ -248,11 +248,11 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             sx={{
               // height: ['250px', '80%', '80%'],
               ml: [0, 4, 0],
-              gap: "20px",
+              gap: '20px',
               mt: [2, 0, 3],
               ml: [1, 0, 0],
               mb: [1, 0, 0],
-              width: ["100%", "90%", "90%"],
+              width: ['100%', '90%', '90%']
             }}
           >
             <Game
@@ -262,21 +262,21 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
             <Game
               game={game[1]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "flex", "flex"] }}
+              sx={{ display: ['none', 'flex', 'flex'] }}
             />
             <Game
               game={game[2]}
               // gameImage={gameImage}
-              sx={{ display: ["none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'flex'] }}
             />
             <Game
               game={game[3]}
               // gameImage1={gameImage1}
-              sx={{ display: ["none", "none", "none", "flex"] }}
+              sx={{ display: ['none', 'none', 'none', 'flex'] }}
             />
           </Grid>
         </Box>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/winter.js b/components/index/cards/winter.js
index c0d7d5da3..4da7a77ab 100644
--- a/components/index/cards/winter.js
+++ b/components/index/cards/winter.js
@@ -1,8 +1,8 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Text } from "theme-ui";
-import Buttons from "./button";
-import Icon from "@hackclub/icons";
-import Dot from "../../dot";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
+import Buttons from './button'
+import Icon from '@hackclub/icons'
+import Dot from '../../dot'
 /** @jsxImportSource theme-ui */
 
 function BreakdownBox({
@@ -13,27 +13,27 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Card
       sx={{
-        color: "white",
-        background: "rgba(54,98,166,0.4)",
-        height: "100%",
-        cursor: `${href ? "pointer" : "default"}`,
-        display: "flex",
-        flexDirection: "column",
+        color: 'white',
+        background: 'rgba(54,98,166,0.4)',
+        height: '100%',
+        cursor: `${href ? 'pointer' : 'default'}`,
+        display: 'flex',
+        flexDirection: 'column',
         zIndex: 2,
-        p: [2, 3, "24px"],
+        p: [2, 3, '24px']
         // justifyContent: 'flex-end'
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: "10px" }}>
-        <Icon glyph={icon} size={32} color={"white"} />
+      <Flex sx={{ alignItems: 'center', gap: '10px' }}>
+        <Icon glyph={icon} size={32} color={'white'} />
         <Heading
           sx={{
-            fontSize: ["16px", "16px", "24px", "26px"],
+            fontSize: ['16px', '16px', '24px', '26px']
           }}
           as="h4"
         >
@@ -43,16 +43,16 @@ function BreakdownBox({
       <Text
         as="p"
         sx={{
-          fontSize: [1, "16px !important", "18px !important"],
+          fontSize: [1, '16px !important', '18px !important'],
           lineHeight: 1.25,
-          display: ["none", "none", "block", "block"],
-          mt: [1, 2, 2],
+          display: ['none', 'none', 'block', 'block'],
+          mt: [1, 2, 2]
         }}
       >
         {description}
       </Text>
     </Card>
-  );
+  )
 }
 
 export default function Winter() {
@@ -60,17 +60,17 @@ export default function Winter() {
     <CardModel
       color="white"
       sx={{
-        backgroundSize: "cover",
-        backgroundColor: "#3561A4",
+        backgroundSize: 'cover',
+        backgroundColor: '#3561A4'
       }}
-      position={[null, "bottom", "bottom"]}
+      position={[null, 'bottom', 'bottom']}
       image="/home/winter-bg.webp"
       badge
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Winter Hardware Wonderland
       </Text>
-      <Text as="p" variant="subtitle" sx={{ maxWidth: "45ch" }}>
+      <Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
         Get $250 to build your own electronics projects alongside hundreds of
         other teenagers in the Hack&nbsp;Club community!
       </Text>
@@ -108,11 +108,11 @@ export default function Winter() {
           link="https://github.com/hackclub/winter"
           icon="freeze"
           primary="white"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           View The Projects
         </Buttons>
       </Box>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js
index c2aed8d8d..b986e4010 100644
--- a/components/index/cards/workshops.js
+++ b/components/index/cards/workshops.js
@@ -1,7 +1,7 @@
-import CardModel from "./card-model";
-import { Box, Card, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import { useState } from "react";
-import Buttons from "./button";
+import CardModel from './card-model'
+import { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import { useState } from 'react'
+import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
@@ -21,22 +21,22 @@ const WorkshopCard = ({
     target="_blank"
     rel="noopener"
     sx={{
-      color: "text",
-      textDecoration: "none",
+      color: 'text',
+      textDecoration: 'none',
       p: [0, 0],
       lineHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      height: "80%",
-      "& span": {
-        lineHeight: 1.25,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '80%',
+      '& span': {
+        lineHeight: 1.25
       },
-      maxWidth: "250px",
-      height: "250px",
+      maxWidth: '250px',
+      height: '250px'
     }}
     {...props}
   >
-    <Box sx={{ p: 3, lineHeight: "body" }}>
+    <Box sx={{ p: 3, lineHeight: 'body' }}>
       <Heading as="h4" sx={{ my: 1 }}>
         {name}
       </Heading>
@@ -44,38 +44,38 @@ const WorkshopCard = ({
     </Box>
     <Box
       sx={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%'
       }}
     >
       <Image
         alt={`${name} demo`}
         src={img}
-        sx={{ width: "100%", height: "auto" }}
+        sx={{ width: '100%', height: 'auto' }}
       />
     </Box>
   </Card>
-);
+)
 
 export default function Workshops({ data, stars }) {
   return (
     <CardModel
       color="white"
       sx={{
-        backgroundColor: "elevated",
+        backgroundColor: 'elevated',
         background:
-          "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-        height: "fit-content",
+          'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+        height: 'fit-content'
       }}
       github_link="https://github.com/hackclub/workshops"
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" as="h3" sx={{ fontSize: ["36px", 4, 5] }}>
+      <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
         Workshops
       </Text>
-      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: "fit-content" }}>
-        <Flex sx={{ flexDirection: "column", height: "fit-content" }}>
+      <Grid columns={[1, 2, 2]} sx={{ gap: 4, height: 'fit-content' }}>
+        <Flex sx={{ flexDirection: 'column', height: 'fit-content' }}>
           <Text as="p" variant="subtitle">
             100+ community-contributed, self-guided coding tutorials and ideas.
             Learn to code by building, one project at a time.
@@ -85,7 +85,7 @@ export default function Workshops({ data, stars }) {
             link="https://workshops.hackclub.com"
             icon="code"
             primary="white"
-            sx={{ color: "blue", mt: [3, 3, 4] }}
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
           >
             Browse The Workshops
           </Buttons>
@@ -98,7 +98,7 @@ export default function Workshops({ data, stars }) {
             Build A Workshop
           </Buttons>
         </Flex>
-        <Grid sx={{ display: ["none", "grid", "grid"] }} columns={[1, 1, 1, 2]}>
+        <Grid sx={{ display: ['none', 'grid', 'grid'] }} columns={[1, 1, 1, 2]}>
           <WorkshopCard
             key="splatter_paint"
             slug="splatter_paint"
@@ -112,10 +112,10 @@ export default function Workshops({ data, stars }) {
             name="Particle Physics"
             description="Create a particle physics simulation and with p5.js"
             img="/home/workshops/particle_physics.png"
-            sx={{ display: ["none", "none", "none", "flex"] }}
+            sx={{ display: ['none', 'none', 'none', 'flex'] }}
           />
         </Grid>
       </Grid>
     </CardModel>
-  );
+  )
 }
diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js
index 16827acbe..2058efde4 100644
--- a/components/index/carousel-cards.js
+++ b/components/index/carousel-cards.js
@@ -1,5 +1,5 @@
-import { Box, Card, Image, Link, Text } from "theme-ui";
-import Icon from "../icon";
+import { Box, Card, Image, Link, Text } from 'theme-ui'
+import Icon from '../icon'
 
 /** @jsxImportSource theme-ui */
 
@@ -10,31 +10,31 @@ export default function CarouselCards({
   title,
   description,
   img,
-  link,
+  link
 }) {
   return (
     <Box
       sx={{
-        position: "relative",
-        display: "inline-block",
-        transition: "transform .125s ease-in-out, box-shadow .125s ease-in-out",
-        "&:hover": { transform: "scale(1.0625)" },
-        ".icon": {
-          transition: "transform 0.25s ease-in-out, opacity 0.43s ease-in-out",
-        },
-        ":hover,:focus": {
-          ".icon": {
-            transform: "translateX(28px) translateY(-28px)",
-            opacity: 0,
-          },
+        position: 'relative',
+        display: 'inline-block',
+        transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+        '&:hover': { transform: 'scale(1.0625)' },
+        '.icon': {
+          transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
         },
+        ':hover,:focus': {
+          '.icon': {
+            transform: 'translateX(28px) translateY(-28px)',
+            opacity: 0
+          }
+        }
       }}
     >
       <Link
         sx={{
-          textDecoration: "none",
-          "&:hover": { cursor: "pointer" },
-          "&:hover svg": { opacity: 0.5 },
+          textDecoration: 'none',
+          '&:hover': { cursor: 'pointer' },
+          '&:hover svg': { opacity: 0.5 }
         }}
         href={link}
         target="_blank"
@@ -44,12 +44,12 @@ export default function CarouselCards({
           src={img}
           alt="carousel card"
           sx={{
-            position: "absolute",
-            top: ["-26px", "-30px", "-35px"],
-            left: ["10px", "12px", "15px"],
+            position: 'absolute',
+            top: ['-26px', '-30px', '-35px'],
+            left: ['10px', '12px', '15px'],
             zIndex: 2,
-            width: ["42px", "50px", "58px"],
-            height: ["42px", "50px", "58px"],
+            width: ['42px', '50px', '58px'],
+            height: ['42px', '50px', '58px']
           }}
         />
         <Card
@@ -57,27 +57,27 @@ export default function CarouselCards({
           sx={{
             mr: 3,
             background,
-            position: "relative",
-            color: "white",
-            width: ["200px", "300px", "300px"],
-            padding: ["12px !important", "16px !important", "20px !important"],
+            position: 'relative',
+            color: 'white',
+            width: ['200px', '300px', '300px'],
+            padding: ['12px !important', '16px !important', '20px !important'],
             paddingTop: [
-              "14px !important",
-              "20px !important",
-              "24px !important",
+              '14px !important',
+              '20px !important',
+              '24px !important'
             ],
-            height: "100%",
+            height: '100%'
           }}
         >
           <Text
             as="h3"
-            sx={{ color: titleColor, fontSize: ["20px", "21px", "22px"] }}
+            sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
           >
             {title}
           </Text>
           <Text
             as="p"
-            sx={{ color: descriptionColor, fontSize: [1, "16px", "20px"] }}
+            sx={{ color: descriptionColor, fontSize: [1, '16px', '20px'] }}
           >
             {description}
           </Text>
@@ -86,16 +86,16 @@ export default function CarouselCards({
             size={32}
             color="#E9E9E9"
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
               opacity: 0.3,
-              fontSize: [1, "16px", "20px"],
+              fontSize: [1, '16px', '20px']
             }}
             className="icon"
           />
         </Card>
       </Link>
     </Box>
-  );
+  )
 }
diff --git a/components/index/carousel.js b/components/index/carousel.js
index 68873e8cf..cd033c406 100644
--- a/components/index/carousel.js
+++ b/components/index/carousel.js
@@ -1,20 +1,20 @@
-import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
-import { keyframes } from "@emotion/react";
-import React, { useEffect, useState } from "react";
-import Ticker from "react-ticker";
-import PageVisibility from "react-page-visibility";
-import { Fade } from "react-reveal";
+import { Box, Text } from 'theme-ui'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
 /** @jsxImportSource theme-ui */
 
 export default function Carousel({ cards }) {
-  let [speed, setSpeed] = useState(5);
+  let [speed, setSpeed] = useState(5)
 
-  const [pageIsVisible, setPageIsVisible] = useState(true);
+  const [pageIsVisible, setPageIsVisible] = useState(true)
 
-  const handleVisibilityChange = (isVisible) => {
-    setPageIsVisible(isVisible);
-  };
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
 
   return (
     <PageVisibility onChange={handleVisibilityChange}>
@@ -24,20 +24,20 @@ export default function Carousel({ cards }) {
             variant="eyebrow"
             as="h4"
             sx={{
-              fontSize: ["22px", 2, 3],
+              fontSize: ['22px', 2, 3],
               mt: [4, 4, 5],
-              maxWidth: "layout",
-              width: "90vw",
-              margin: "auto",
+              maxWidth: 'layout',
+              width: '90vw',
+              margin: 'auto'
             }}
           >
             Here are a few projects you could get involved in:
           </Text>
-          <Ticker speed={speed} sx={{ overflowX: "hidden" }}>
+          <Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
             {() => (
               <Box
                 as="div"
-                sx={{ display: "flex", py: [4, 5, 5] }}
+                sx={{ display: 'flex', py: [4, 5, 5] }}
                 onMouseOver={() => setSpeed(2)}
                 onMouseOut={() => setSpeed(6)}
               >
@@ -50,5 +50,5 @@ export default function Carousel({ cards }) {
         </Box>
       )}
     </PageVisibility>
-  );
+  )
 }
diff --git a/components/index/events.js b/components/index/events.js
index 0a2c36541..36af639ba 100644
--- a/components/index/events.js
+++ b/components/index/events.js
@@ -1,11 +1,11 @@
-import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from "theme-ui";
-import tt from "tinytime";
-import Link from "next/link";
-import { keyframes } from "@emotion/react";
+import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
+import tt from 'tinytime'
+import Link from 'next/link'
+import { keyframes } from '@emotion/react'
 
-const past = (dt) => new Date(dt) < new Date();
+const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
-  new Date() > new Date(start) && new Date() < new Date(end);
+  new Date() > new Date(start) && new Date() < new Date(end)
 
 const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
   <Link
@@ -18,29 +18,29 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
     <Box
       as="a"
       sx={{
-        position: "relative",
-        textDecoration: "none",
-        bg: "elevated",
-        color: "text",
-        p: [3, 3],
+        position: 'relative',
+        textDecoration: 'none',
+        bg: 'elevated',
+        color: 'text',
+        p: [3, 3]
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? "sunken" : "primary",
-          color: past(end) ? "text" : "white",
-          lineHeight: ["subheading", "body"],
+          bg: past(end) ? 'sunken' : 'primary',
+          color: past(end) ? 'text' : 'white',
+          lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ["block", "inline"] },
+          strong: { display: ['block', 'inline'] }
         }}
       >
         <Text>
-          <strong>{tt("{MM} {Do}").render(new Date(start))}</strong>{" "}
-          {tt("{h}:{mm}").render(new Date(start))}–
-          {tt("{h}:{mm} {a}").render(new Date(end))}
+          <strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
+          {tt('{h}:{mm}').render(new Date(start))}–
+          {tt('{h}:{mm} {a}').render(new Date(end))}
         </Text>
       </Box>
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
@@ -48,12 +48,12 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       </Heading>
       <Flex
         sx={{
-          alignItems: "center",
-          color: "muted",
+          alignItems: 'center',
+          color: 'muted'
         }}
       >
         {now(start, end)}
-        {!avatar.includes("emoji") && (
+        {!avatar.includes('emoji') && (
           <Avatar
             src={avatar}
             alt={`${leader} profile picture`}
@@ -78,34 +78,34 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
       )} */}
     </Box>
   </Link>
-);
+)
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".5em",
-        height: ".5em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.5em',
+        height: '.5em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Events({ events }) {
@@ -117,18 +117,18 @@ export default function Events({ events }) {
         columns={[2, 3]}
         gap="1px"
         sx={{
-          bg: "sunken",
-          borderRadius: "extra",
-          overflow: "hidden",
-          boxShadow: "elevated",
+          bg: 'sunken',
+          borderRadius: 'extra',
+          overflow: 'hidden',
+          boxShadow: 'elevated'
         }}
       >
         {events
           .slice(0, 3)
-          .map((event) =>
-            !past(event.end) ? <Event {...event} key={event.id} /> : <></>,
+          .map(event =>
+            !past(event.end) ? <Event {...event} key={event.id} /> : <></>
           )}
       </Grid>
     </Box>
-  );
+  )
 }
diff --git a/components/index/github.js b/components/index/github.js
index 3c89e2926..1c4d62ff0 100644
--- a/components/index/github.js
+++ b/components/index/github.js
@@ -1,5 +1,5 @@
-import { Badge, Flex, Link, Image, Text, Box } from "theme-ui";
-import RelativeTime from "react-relative-time";
+import { Badge, Flex, Link, Image, Text, Box } from 'theme-ui'
+import RelativeTime from 'react-relative-time'
 
 export default function GitHub({
   type,
@@ -21,48 +21,48 @@ export default function GitHub({
       target="_blank"
       rel="noopener"
       sx={{
-        color: "black",
-        textDecoration: "none",
-        fontWeight: "400",
+        color: 'black',
+        textDecoration: 'none',
+        fontWeight: '400',
         zIndex: 4,
-        px: "4px !important",
-        py: "2px !important",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
+        px: '4px !important',
+        py: '2px !important',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
         gap: 2,
-        height: "2rem",
-        width: ["fit-content", null, null, "100%"],
-        maxWidth: "30rem",
+        height: '2rem',
+        width: ['fit-content', null, null, '100%'],
+        maxWidth: '30rem'
       }}
       {...props}
     >
       <Image
         alt="GitHub user avatar"
         src={img}
-        sx={{ borderRadius: "100%", height: "90%", mr: 2, flexShrink: 0 }}
+        sx={{ borderRadius: '100%', height: '90%', mr: 2, flexShrink: 0 }}
       />
       <Text
         sx={{
           mr: 2,
-          textOverflow: "ellipsis",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           flexShrink: 0,
-          display: ["none", "inline-block", "inline-block", "inline-block"],
+          display: ['none', 'inline-block', 'inline-block', 'inline-block']
         }}
       >
         {user}
       </Text>
       <Text
         sx={{
-          textOverflow: "ellipsis",
-          maxWidth: "100%",
-          display: "inline-block",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          flexShrink: 1,
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+          display: 'inline-block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          flexShrink: 1
         }}
       >
         {message}
@@ -70,15 +70,15 @@ export default function GitHub({
       <Text
         as="span"
         sx={{
-          fontSize: ["8px", "8px", "10px"],
-          color: "inherit",
+          fontSize: ['8px', '8px', '10px'],
+          color: 'inherit',
           mx: 2,
           flexShrink: 0,
-          ml: "auto",
+          ml: 'auto'
         }}
       >
         <RelativeTime value={time} titleformat="iso8601" />
       </Text>
     </Badge>
-  );
+  )
 }
diff --git a/components/letterhead.js b/components/letterhead.js
index 5ca297f47..b82ebba0d 100644
--- a/components/letterhead.js
+++ b/components/letterhead.js
@@ -1,48 +1,48 @@
-import { Avatar, Badge, Box, Container, Flex, Heading } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "./nav";
-import Footer from "./footer";
-import ForceTheme from "./force-theme";
+import { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from './nav'
+import Footer from './footer'
+import ForceTheme from './force-theme'
 
 const Authored = ({ name, avatar, url, date, ...props }) => (
   <Flex
     mt={3}
     {...props}
     sx={{
-      flexWrap: "wrap",
-      justifyContent: "center",
-      alignItems: "center",
-      "a, span, time": {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'a, span, time': {
         mt: 0,
         mb: 2,
-        bg: "white",
-        color: "muted",
-        border: "1px solid",
-        borderColor: "background",
-        bg: "sunken",
+        bg: 'white',
+        color: 'muted',
+        border: '1px solid',
+        borderColor: 'background',
+        bg: 'sunken',
         fontSize: 2,
-        fontWeight: "body",
-        lineHeight: "36px",
-        "@media print": {
-          bg: "transparent",
+        fontWeight: 'body',
+        lineHeight: '36px',
+        '@media print': {
+          bg: 'transparent',
           border: 0,
-          fontSize: 1,
-        },
-      },
+          fontSize: 1
+        }
+      }
     }}
   >
     <Badge
       variant="pill"
-      as={url ? "a" : "span"}
+      as={url ? 'a' : 'span'}
       href={url}
       sx={{
         mr: [2, 3],
         pl: 1,
         pr: 3,
-        display: "inline-flex",
-        alignItems: "center",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'center',
+        textDecoration: 'none'
       }}
     >
       <Avatar src={avatar} alt={name} size={36} mr={2} />
@@ -52,12 +52,12 @@ const Authored = ({ name, avatar, url, date, ...props }) => (
       variant="pill"
       as="time"
       px={3}
-      dateTime={date?.startsWith("20") ? date : undefined}
+      dateTime={date?.startsWith('20') ? date : undefined}
     >
       {date}
     </Badge>
   </Flex>
-);
+)
 
 const Letterhead = ({
   title,
@@ -78,18 +78,18 @@ const Letterhead = ({
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, null, 4],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           {title}
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           {desc}
         </Heading>
         {author?.name && <Authored {...author} date={date} />}
@@ -101,17 +101,17 @@ const Letterhead = ({
         py: [3, 4],
         fontSize: [2, 3],
         h1: {
-          textAlign: ["left", "center"],
-          color: "cyan",
+          textAlign: ['left', 'center'],
+          color: 'cyan',
           my: 4,
-          a: { color: "inherit" },
-        },
+          a: { color: 'inherit' }
+        }
       }}
     >
       {children}
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Letterhead;
+export default Letterhead
diff --git a/components/mail-card.js b/components/mail-card.js
index ec3b3e69e..62d3ef5f6 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,8 +1,8 @@
-import {Box, Card, Text} from "theme-ui";
+import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 250 ? mail.body.substring(0, 100) + "..." : mail.body;
+    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
@@ -19,4 +19,4 @@ export default function MailCard(mail) {
             </Card>
         </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mention.js b/components/mention.js
index a80097b01..658e95dd8 100644
--- a/components/mention.js
+++ b/components/mention.js
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { memo } from "react";
+import Link from 'next/link'
+import { memo } from 'react'
 
 const StaticMention = memo(function StaticMention({ avatar, username, link }) {
   return (
@@ -7,9 +7,9 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
       <a
         className={`mention`}
         style={{
-          display: "inline-flex",
-          alignItems: "baseline",
-          textDecoration: "none",
+          display: 'inline-flex',
+          alignItems: 'baseline',
+          textDecoration: 'none'
         }}
       >
         {avatar && (
@@ -19,16 +19,16 @@ const StaticMention = memo(function StaticMention({ avatar, username, link }) {
             width={24}
             className="mention-avatar"
             style={{
-              borderRadius: "50%",
-              marginRight: "4px",
-              alignSelf: "flex-end",
+              borderRadius: '50%',
+              marginRight: '4px',
+              alignSelf: 'flex-end'
             }}
           />
         )}
         @{username}
       </a>
     </Link>
-  );
-});
+  )
+})
 
-export default StaticMention;
+export default StaticMention
diff --git a/components/nav.js b/components/nav.js
index 0165a7330..eee8f9418 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import styled from "@emotion/styled";
-import { css, keyframes } from "@emotion/react";
-import { Box, Container, Flex, Link, Text } from "theme-ui";
-import theme from "../lib/theme";
-import Icon from "./icon";
-import Flag from "./flag";
-import ScrollLock from "react-scrolllock";
-import NextLink from "next/link";
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import theme from '../lib/theme'
+import Icon from './icon'
+import Flag from './flag'
+import ScrollLock from 'react-scrolllock'
+import NextLink from 'next/link'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -14,7 +14,7 @@ const rgbaBgColor = (props, opacity) =>
     ${props.bgColor[1]},
     ${props.bgColor[2]},
     ${opacity}
-  )`;
+  )`
 
 // const bg = (props) =>
 //   props.dark
@@ -26,20 +26,20 @@ const rgbaBgColor = (props, opacity) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
   (props.scrolled || props.toggled || props.fixed) &&
   css`
     background-color: ${rgbaBgColor(props, 0.96875)};
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-        ? "transparent"
+        ? 'transparent'
         : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
     }
-  `;
+  `
 
 const Root = styled(Box)`
   position: fixed;
@@ -50,7 +50,7 @@ const Root = styled(Box)`
   @media print {
     display: none;
   }
-`;
+`
 
 export const Content = styled(Box)`
   display: flex;
@@ -64,27 +64,27 @@ export const Content = styled(Box)`
   @media (min-width: ${theme.breakpoints[2]}em) {
     padding: 0 ${theme.space[4]}px;
   }
-`;
+`
 
-const hoverColor = (name) =>
+const hoverColor = name =>
   ({
-    white: "smoke",
-    smoke: "muted",
-    muted: "slate",
-    slate: "black",
-    black: "slate",
-    primary: "error",
-  })[name] || "black";
+    white: 'smoke',
+    smoke: 'muted',
+    muted: 'slate',
+    slate: 'black',
+    black: 'slate',
+    primary: 'error'
+  })[name] || 'black'
 
 const slide = keyframes({
-  from: { transform: "translateY(-25%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-25%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
-const layout = (props) =>
+const layout = props =>
   props.isMobile
     ? css`
-        display: ${props.toggled ? "flex" : "none"};
+        display: ${props.toggled ? 'flex' : 'none'};
         flex-direction: column;
         overflow-y: auto;
         text-align: left;
@@ -93,7 +93,7 @@ const layout = (props) =>
           animation: ${slide} 0.25s ease-in;
         }
         a {
-          color: ${theme.colors[props.dark ? "white" : "black"]} !important;
+          color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
           margin: 0 auto;
           height: 64px;
           font-weight: bold;
@@ -120,7 +120,7 @@ const layout = (props) =>
             color: ${theme.colors[hoverColor(props.color)]};
           }
         }
-      `;
+      `
 const NavBar = styled(Box)`
   display: none;
   ${layout};
@@ -129,12 +129,12 @@ const NavBar = styled(Box)`
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || props.color};
+      color: ${props => theme.colors[props.color] || props.color};
     }
   }
-`;
+`
 
-const Navigation = (props) => (
+const Navigation = props => (
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -154,7 +154,7 @@ const Navigation = (props) => (
       <Link>OnBoard</Link>
     </NextLink>
   </NavBar>
-);
+)
 
 const ToggleContainer = styled(Flex)`
   align-items: center;
@@ -167,51 +167,51 @@ const ToggleContainer = styled(Flex)`
   @media (min-width: 56em) {
     display: none;
   }
-`;
+`
 
 function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
-  const [scrolled, setScrolled] = useState(false);
-  const [toggled, setToggled] = useState(false);
-  const [mobile, setMobile] = useState(false);
+  const [scrolled, setScrolled] = useState(false)
+  const [toggled, setToggled] = useState(false)
+  const [mobile, setMobile] = useState(false)
 
   const onScroll = () => {
-    const newState = window.scrollY >= 16;
+    const newState = window.scrollY >= 16
 
-    setScrolled(newState);
-  };
+    setScrolled(newState)
+  }
 
   const handleToggleMenu = () => {
-    setToggled((t) => !t);
-  };
+    setToggled(t => !t)
+  }
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       if (!unfixed) {
-        window.addEventListener("scroll", onScroll);
+        window.addEventListener('scroll', onScroll)
       }
 
-      const mobileQuery = window.matchMedia("(max-width: 48em)");
-      mobileQuery.addEventListener("change", () => {
-        setMobile(true);
-        setToggled(false);
-      });
+      const mobileQuery = window.matchMedia('(max-width: 48em)')
+      mobileQuery.addEventListener('change', () => {
+        setMobile(true)
+        setToggled(false)
+      })
     }
 
     return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [unfixed]);
+      window.removeEventListener('scroll', onScroll)
+    }
+  }, [unfixed])
 
   const baseColor = dark
-    ? color || "white"
-    : color === "white" && scrolled
-    ? "black"
-    : color;
+    ? color || 'white'
+    : color === 'white' && scrolled
+    ? 'black'
+    : color
   const toggleColor = dark
-    ? color || "snow"
-    : toggled || (color === "white" && scrolled)
-    ? "slate"
-    : color;
+    ? color || 'snow'
+    : toggled || (color === 'white' && scrolled)
+    ? 'slate'
+    : color
 
   return (
     <Root
@@ -232,7 +232,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           dark={dark}
         />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
-          <Icon glyph={toggled ? "view-close" : "menu"} />
+          <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>
       </Content>
       <Navigation
@@ -245,11 +245,11 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
       />
       {toggled && <ScrollLock />}
     </Root>
-  );
+  )
 }
 
 Header.defaultProps = {
-  color: "white",
-};
+  color: 'white'
+}
 
-export default Header;
+export default Header
diff --git a/components/particles.js b/components/particles.js
index 6f5994838..ade21b6bc 100644
--- a/components/particles.js
+++ b/components/particles.js
@@ -1,5 +1,5 @@
-import Particles from "react-tsparticles";
-import React from "react";
+import Particles from 'react-tsparticles'
+import React from 'react'
 
 const Particle = React.memo(function Particle() {
   return (
@@ -11,75 +11,75 @@ const Particle = React.memo(function Particle() {
           events: {
             onClick: {
               enable: true,
-              mode: "push",
+              mode: 'push'
             },
             onHover: {
               enable: true,
-              mode: "repulse",
+              mode: 'repulse'
             },
-            resize: true,
+            resize: true
           },
           modes: {
             bubble: {
               distance: 200,
               duration: 2,
               opacity: 0.5,
-              size: 40,
+              size: 40
             },
             push: {
-              quantity: 2,
+              quantity: 2
             },
             repulse: {
               distance: 100,
-              duration: 0.5,
-            },
-          },
+              duration: 0.5
+            }
+          }
         },
         particles: {
           color: {
-            value: "#CDAEFB",
-            opacity: 0.2,
+            value: '#CDAEFB',
+            opacity: 0.2
           },
           links: {
-            color: "#82A9F9",
+            color: '#82A9F9',
             distance: 200,
             enable: true,
             opacity: 0.2,
-            width: 1,
+            width: 1
           },
           collisions: {
-            enable: false,
+            enable: false
           },
           move: {
-            direction: "none",
+            direction: 'none',
             enable: true,
-            outMode: "bounce",
+            outMode: 'bounce',
             random: false,
             speed: 1,
-            straight: false,
+            straight: false
           },
           number: {
             density: {
               enable: true,
-              area: 500,
+              area: 500
             },
-            value: 50,
+            value: 50
           },
           opacity: {
-            value: 0.25,
+            value: 0.25
           },
           shape: {
-            type: "circle",
+            type: 'circle'
           },
           size: {
             random: true,
-            value: 1.5,
-          },
+            value: 1.5
+          }
         },
-        detectRetina: true,
+        detectRetina: true
       }}
     />
-  );
-});
+  )
+})
 
-export default Particle;
+export default Particle
diff --git a/components/photo.js b/components/photo.js
index d44dc9f41..c487c6d51 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -1,7 +1,7 @@
-import styled from "@emotion/styled";
-import { Box, Card, Text, useColorMode } from "theme-ui";
-import Image from "next/image";
-import theme from "../lib/theme";
+import styled from '@emotion/styled'
+import { Box, Card, Text, useColorMode } from 'theme-ui'
+import Image from 'next/image'
+import theme from '../lib/theme'
 
 const Caption = styled(Text)`
   display: block;
@@ -14,7 +14,7 @@ const Caption = styled(Text)`
   width: 100%;
   max-width: 100%;
   z-index: 0;
-`;
+`
 
 const Photo = ({
   src,
@@ -26,22 +26,22 @@ const Photo = ({
   loading,
   ...props
 }) => {
-  const [colorMode] = useColorMode();
-  const showCaption = showAlt && alt;
+  const [colorMode] = useColorMode()
+  const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
       sx={{
         p: [0, 0, 0],
-        boxShadow: "elevated",
-        borderRadius: "extra",
-        position: "relative",
-        maxWidth: "100%",
+        boxShadow: 'elevated',
+        borderRadius: 'extra',
+        position: 'relative',
+        maxWidth: '100%',
         lineHeight: 0,
-        height: "fit-content",
+        height: 'fit-content',
         ...props.sx,
-        img: { objectFit: "cover", objectPosition: "center" },
+        img: { objectFit: 'cover', objectPosition: 'center' }
       }}
     >
       <Image
@@ -50,18 +50,18 @@ const Photo = ({
         width={width}
         height={height}
         layout="responsive"
-        loading={loading || "lazy"}
+        loading={loading || 'lazy'}
       />
       {showCaption && (
         <Caption
           as="figcaption"
-          variant={dark ? "cards.translucentDark" : "cards.translucent"}
+          variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
         >
           {alt}
         </Caption>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Photo;
+export default Photo
diff --git a/components/posts/emoji.js b/components/posts/emoji.js
index 366c55f1d..1f7a513a1 100644
--- a/components/posts/emoji.js
+++ b/components/posts/emoji.js
@@ -1,56 +1,56 @@
-import { memo, useState, useEffect } from "react";
-import Image from "next/image";
+import { memo, useState, useEffect } from 'react'
+import Image from 'next/image'
 
-const stripColons = (str) => {
-  const colonIndex = str.indexOf(":");
+const stripColons = str => {
+  const colonIndex = str.indexOf(':')
   if (colonIndex > -1) {
     // :emoji:
     if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
+      str = str.substring(0, colonIndex)
+      return stripColons(str)
     } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
+      str = str.substr(colonIndex + 1)
+      return stripColons(str)
     }
   }
-  return str;
-};
+  return str
+}
 
 export const EmojiImg = ({ name, ...props }) => (
   <Image
-    alt={name + " emoji"}
+    alt={name + ' emoji'}
     loading="lazy"
     className="post-emoji"
     width={20}
     height={20}
     {...props}
   />
-);
+)
 
 const CustomEmoji = memo(function CustomEmoji({ name }) {
-  const emoji = stripColons(name);
-  let [image, setImage] = useState();
+  const emoji = stripColons(name)
+  let [image, setImage] = useState()
 
   useEffect(() => {
-    fetch("https://scrapbook.hackclub.com/api/emoji")
-      .then((r) => r.json())
-      .then((emojis) => {
+    fetch('https://scrapbook.hackclub.com/api/emoji')
+      .then(r => r.json())
+      .then(emojis => {
         if (emojis[emoji]) {
-          setImage(emojis[emoji]);
-          return;
+          setImage(emojis[emoji])
+          return
         }
         setImage(
-          "https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif",
-        );
+          'https://emoji.slack-edge.com/T0266FRGM/parrot/c9f4fddc5e03d762.gif'
+        )
       })
-      .catch(console.error);
-  }, [emoji]);
+      .catch(console.error)
+  }, [emoji])
 
   return image ? (
     <EmojiImg className="post-emoji" src={image} name={emoji} />
   ) : (
     <span>:{emoji}:</span>
-  );
-});
+  )
+})
 
-export default CustomEmoji;
+export default CustomEmoji
diff --git a/components/posts/index.js b/components/posts/index.js
index 560a34059..7eb4b9d56 100644
--- a/components/posts/index.js
+++ b/components/posts/index.js
@@ -1,79 +1,79 @@
-import { Button, Box, Card, Text, Grid, Avatar, Flex } from "theme-ui";
-import { formatDate } from "../../lib/dates";
-import { Fragment, memo } from "react";
-import { last, filter } from "lodash";
-import Masonry from "react-masonry-css";
-import Image from "next/image";
-import Mention from "./mention";
-import Emoji from "./emoji";
+import { Button, Box, Card, Text, Grid, Avatar, Flex } from 'theme-ui'
+import { formatDate } from '../../lib/dates'
+import { Fragment, memo } from 'react'
+import { last, filter } from 'lodash'
+import Masonry from 'react-masonry-css'
+import Image from 'next/image'
+import Mention from './mention'
+import Emoji from './emoji'
 
 const dataDetector =
-  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/;
+  /(<.+?\|?\S+>)|(@\S+)|(`{3}[\S\s]+`{3})|(`[^`]+`)|(_[^_]+_)|(\*[^\*]+\*)|(:[^ .,;`\u2013~!@#$%^&*(){}=\\:"<>?|A-Z]+:)/
 
-export const formatText = (text) =>
+export const formatText = text =>
   text.split(dataDetector).map((chunk, i) => {
-    if (chunk?.startsWith(":") && chunk?.endsWith(":")) {
-      return <Emoji name={chunk} key={i} />;
+    if (chunk?.startsWith(':') && chunk?.endsWith(':')) {
+      return <Emoji name={chunk} key={i} />
     }
-    if (chunk?.startsWith("@") || chunk?.startsWith("<@")) {
-      const punct = /([,!:.'"’”]|’s|'s|\))+$/g;
-      const username = chunk.replace(/[@<>]/g, "").replace(punct, "");
+    if (chunk?.startsWith('@') || chunk?.startsWith('<@')) {
+      const punct = /([,!:.'"’”]|’s|'s|\))+$/g
+      const username = chunk.replace(/[@<>]/g, '').replace(punct, '')
       return (
         <Fragment key={i}>
           <Mention username={username} />
           {chunk.match(punct)}
         </Fragment>
-      );
+      )
     }
-    if (chunk?.startsWith("<")) {
-      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/);
-      const url = parts?.[2] || last(parts);
+    if (chunk?.startsWith('<')) {
+      const parts = chunk.match(/<(([^\|]+)\|)?([^>]+?)>/)
+      const url = parts?.[2] || last(parts)
       const children = last(parts)
-        ?.replace(/https?:\/\//, "")
-        .replace(/\/$/, "");
+        ?.replace(/https?:\/\//, '')
+        .replace(/\/$/, '')
       return (
         <a href={url} target="_blank" rel="noreferrer" key={i}>
           {children}
         </a>
-      );
+      )
     }
-    if (chunk?.startsWith("```")) {
-      return <pre key={i}>{chunk.replace(/```/g, "")}</pre>;
+    if (chunk?.startsWith('```')) {
+      return <pre key={i}>{chunk.replace(/```/g, '')}</pre>
     }
-    if (chunk?.startsWith("`")) {
-      return <code key={i}>{chunk.replace(/`/g, "")}</code>;
+    if (chunk?.startsWith('`')) {
+      return <code key={i}>{chunk.replace(/`/g, '')}</code>
     }
-    if (chunk?.startsWith("*")) {
-      return <strong key={i}>{chunk.replace(/\*/g, "")}</strong>;
+    if (chunk?.startsWith('*')) {
+      return <strong key={i}>{chunk.replace(/\*/g, '')}</strong>
     }
-    if (chunk?.startsWith("_")) {
-      return <i key={i}>{chunk.replace(/_/g, "")}</i>;
+    if (chunk?.startsWith('_')) {
+      return <i key={i}>{chunk.replace(/_/g, '')}</i>
     }
-    return <Fragment key={i}>{chunk?.replace(/&amp;/g, "&")}</Fragment>;
-  });
+    return <Fragment key={i}>{chunk?.replace(/&amp;/g, '&')}</Fragment>
+  })
 
 const Post = ({
   id = new Date().toISOString(),
   profile = false,
   user = {
-    username: "abc",
-    avatar: "",
+    username: 'abc',
+    avatar: '',
     streakDisplay: false,
-    streakCount: 0,
+    streakCount: 0
   },
   text,
   attachments = [],
-  postedAt,
+  postedAt
 }) => (
-  <Card className="post" sx={{ p: [3, 3], width: "100%", bg: "elevated" }}>
+  <Card className="post" sx={{ p: [3, 3], width: '100%', bg: 'elevated' }}>
     <Flex
       as="a"
       href={`https://scrapbook.hackclub.com/${user.username}`}
       sx={{
-        color: "inherit",
-        textDecoration: "none",
-        alignItems: "center",
-        mb: 2,
+        color: 'inherit',
+        textDecoration: 'none',
+        alignItems: 'center',
+        mb: 2
       }}
     >
       <Avatar loading="lazy" src={user.avatar} alt={user.username} mr={2} />
@@ -91,11 +91,11 @@ const Post = ({
       sx={{
         fontSize: 2,
         a: {
-          color: "primary",
-          wordBreak: "break-all",
-          wordWrap: "break-word",
+          color: 'primary',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
         },
-        "> div": { width: 18, height: 18 },
+        '> div': { width: 18, height: 18 }
       }}
     >
       {formatText(text)}
@@ -106,55 +106,55 @@ const Post = ({
           gap={2}
           columns={2}
           sx={{
-            alignItems: "center",
-            textAlign: "center",
+            alignItems: 'center',
+            textAlign: 'center',
             mt: 2,
             div: {
-              maxWidth: "100%",
+              maxWidth: '100%',
               maxHeight: 256,
-              bg: "sunken",
-              gridColumn: attachments.length === 1 ? "span 2" : null,
+              bg: 'sunken',
+              gridColumn: attachments.length === 1 ? 'span 2' : null
             },
-            img: { objectFit: "cover", width: "100%" },
+            img: { objectFit: 'cover', width: '100%' }
           }}
         >
-          {filter(attachments, (a) =>
-            ["jpg", "jpeg", "png"].includes(
-              a.split(".")[a.split(".").length - 1],
-            ),
-          ).map((img) => (
+          {filter(attachments, a =>
+            ['jpg', 'jpeg', 'png'].includes(
+              a.split('.')[a.split('.').length - 1]
+            )
+          ).map(img => (
             <img key={img} alt={img} src={img} />
           ))}
         </Grid>
       </>
     )}
   </Card>
-);
+)
 
 const Posts = ({ data = [] }) => (
-  <Box as="section" sx={{ position: "relative" }}>
+  <Box as="section" sx={{ position: 'relative' }}>
     <Masonry
       breakpointCols={{
         10000: 4,
         1024: 3,
         640: 2,
         480: 1,
-        default: 1,
+        default: 1
       }}
       className="masonry-posts"
       columnClassName="masonry-posts-column"
     >
-      {data.map((post) => (
+      {data.map(post => (
         <Post key={post.id} {...post} />
       ))}
     </Masonry>
     <Box
       sx={{
-        paddingBottom: "30px",
-        textAlign: "center",
+        paddingBottom: '30px',
+        textAlign: 'center'
       }}
     >
-      <Text as="p" variant="headline" sx={{ color: "white", mb: 3 }}>
+      <Text as="p" variant="headline" sx={{ color: 'white', mb: 3 }}>
         These are just a few posts…
       </Text>
       <Button as="a" variant="cta" href="https://scrapbook.hackclub.com/">
@@ -213,6 +213,6 @@ const Posts = ({ data = [] }) => (
 
     `}</style>
   </Box>
-);
+)
 
-export default Posts;
+export default Posts
diff --git a/components/posts/mention.js b/components/posts/mention.js
index b99b46fd5..1aeb839a9 100644
--- a/components/posts/mention.js
+++ b/components/posts/mention.js
@@ -1,24 +1,24 @@
-import { Link, Avatar } from "theme-ui";
-import { memo, useState, useEffect } from "react";
-import { trim } from "lodash";
+import { Link, Avatar } from 'theme-ui'
+import { memo, useState, useEffect } from 'react'
+import { trim } from 'lodash'
 
 const Mention = memo(function Mention({ username }) {
-  const [img, setImg] = useState(null);
+  const [img, setImg] = useState(null)
 
   useEffect(() => {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
-      .then((r) => r.json())
-      .then((profile) => setImg(profile.avatar))
-      .catch(console.error);
-  }, [username]);
+      .then(r => r.json())
+      .then(profile => setImg(profile.avatar))
+      .catch(console.error)
+  }, [username])
 
   return (
     <Link
       href={`https://scrapbook.hackclub.com/${username}`}
       sx={{
-        display: "inline-flex",
-        alignItems: "baseline",
-        textDecoration: "none",
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        textDecoration: 'none'
       }}
     >
       {img && (
@@ -27,12 +27,12 @@ const Mention = memo(function Mention({ username }) {
           alt={username}
           width={24}
           height={24}
-          sx={{ mr: 1, alignSelf: "flex-end" }}
+          sx={{ mr: 1, alignSelf: 'flex-end' }}
         />
       )}
       @{username}
     </Link>
-  );
-});
+  )
+})
 
-export default Mention;
+export default Mention
diff --git a/components/press.mdx b/components/press.mdx
index 92caa211d..34b6f8dbe 100644
--- a/components/press.mdx
+++ b/components/press.mdx
@@ -1,4 +1,4 @@
-import { Grid } from "theme-ui";
+import { Grid } from 'theme-ui'
 
 Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world. Founded in 2014 by 16-year-old Zach Latta, Hack Clubs are now in nearly 400 high schools with 10,000 students each year.
 
diff --git a/components/scroll-hint.js b/components/scroll-hint.js
index 8c09489e5..32dd985ea 100644
--- a/components/scroll-hint.js
+++ b/components/scroll-hint.js
@@ -1,40 +1,40 @@
-import { Box } from "theme-ui";
-import anime from "animejs/lib/anime.es.js";
+import { Box } from 'theme-ui'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scroll = { x: document.scrollingElement.scrollTop };
+  const scroll = { x: document.scrollingElement.scrollTop }
 
   anime({
     targets: scroll,
     x: window.innerHeight,
-    easing: "easeOutExpo",
+    easing: 'easeOutExpo',
     duration: 800,
     update: () => {
-      document.scrollingElement.scrollTop = scroll.x;
-    },
-  });
-};
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
+}
 const ScrollHint = ({ ...props }) => (
   <Box
     sx={{
-      display: "block",
-      position: "relative",
-      height: "32px",
-      width: "32px",
-      margin: "0 auto",
-      borderBottom: "2px solid #fff",
-      borderRight: "2px solid #fff",
-      transform: "rotate(45deg)",
-      opacity: ".6",
-      cursor: "pointer",
-      transition: "transform .3s",
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
 
-      "&:hover": { transform: "translateY(4px) rotate(45deg)" },
-      "&:active": { transform: " translateY(6px) rotate(45deg)" },
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
     }}
     onClick={handleClick}
     {...props}
   ></Box>
-);
+)
 
-export default ScrollHint;
+export default ScrollHint
diff --git a/components/secret.js b/components/secret.js
index 2360db5a5..bb19dc03f 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -1,137 +1,135 @@
-import { Box, Text } from "theme-ui";
-import { useState, useEffect } from "react";
+import { Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
 
 export default function Secret({ reveal, ...props }) {
-  const [img, setImage] = useState("");
+  const [img, setImage] = useState('')
 
   useEffect(() => {
-    setImage(
-      "https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png",
-    );
-  }, []);
+    setImage('https://github.com/hackclub/dinosaurs/raw/main/club_dinosaur.png')
+  }, [])
 
   return (
     <Box
       sx={{
-        position: "fixed",
+        position: 'fixed',
         right: 5,
         bottom: 0,
-        transform: `${reveal ? "translateY(0)" : "translateY(100%)"}`,
-        transition: "1s",
-        zIndex: 3,
+        transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
+        transition: '1s',
+        zIndex: 3
       }}
       {...props}
     >
       <Box
         as="div"
         sx={{
-          height: "200px",
-          width: "300px",
-          backgroundColor: "black",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
+          height: '200px',
+          width: '300px',
+          backgroundColor: 'black',
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
           zIndex: 0,
-          "&:hover > .lid-one": {
-            transform: "rotateX(90deg)",
-            transitionDelay: "0s",
+          '&:hover > .lid-one': {
+            transform: 'rotateX(90deg)',
+            transitionDelay: '0s'
           },
-          "&:hover > .lid-two": {
-            transform: "rotateX(180deg)",
-            transitionDelay: "0.25s",
-          },
-          "&:hover > .letter": {
-            transform: "translateY(-50px)",
-            transitionDelay: "0.5s",
+          '&:hover > .lid-two': {
+            transform: 'rotateX(180deg)',
+            transitionDelay: '0.25s'
           },
+          '&:hover > .letter': {
+            transform: 'translateY(-50px)',
+            transitionDelay: '0.5s'
+          }
         }}
       >
         <Box
           as="div"
           className="lid-one"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(0deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(0deg)',
             zIndex: 3,
-            transitionDelay: "0.75s",
+            transitionDelay: '0.75s'
           }}
         ></Box>
         <Box
           as="div"
           className="lid-two"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderRight: "150px solid transparent",
-            borderBottom: "100px solid transparent",
-            borderLeft: "150px solid transparent",
-            transformOrigin: "top",
-            transition: "transform 0.25s linear",
-            borderTop: "100px solid #8492a6",
-            transform: "rotateX(90deg)",
+            borderRight: '150px solid transparent',
+            borderBottom: '100px solid transparent',
+            borderLeft: '150px solid transparent',
+            transformOrigin: 'top',
+            transition: 'transform 0.25s linear',
+            borderTop: '100px solid #8492a6',
+            transform: 'rotateX(90deg)',
             zIndex: 1,
-            transitionDelay: "0.5s",
+            transitionDelay: '0.5s'
           }}
         ></Box>
         <Box
           as="div"
           className="envelope"
           sx={{
-            position: "absolute",
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
             top: 0,
             left: 0,
-            borderTop: "100px solid transparent",
-            borderRight: "150px solid #f9fafc",
-            borderBottom: "150px solid #f9fafc",
-            borderLeft: "150px solid #f9fafc",
-            zIndex: 3,
+            borderTop: '100px solid transparent',
+            borderRight: '150px solid #f9fafc',
+            borderBottom: '150px solid #f9fafc',
+            borderLeft: '150px solid #f9fafc',
+            zIndex: 3
           }}
         ></Box>
         <Box
           as="div"
           className="letter"
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
-            width: "80%",
-            height: "80%",
-            backgroundColor: "white",
-            borderRadius: "5px",
-            border: "3px solid #e0e6ed",
+            width: '80%',
+            height: '80%',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            border: '3px solid #e0e6ed',
             zIndex: 2,
-            transition: "0.5s",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            mt: 3,
+            transition: '0.5s',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            mt: 3
           }}
         >
           <img
             src={img}
             width="30%"
-            sx={{ margin: "auto" }}
+            sx={{ margin: 'auto' }}
             alt="a secret dino!"
           />
           <Text>print kc</Text>
         </Box>
       </Box>
     </Box>
-  );
+  )
 }
 
 // credits: https://codepen.io/Coding-Star/pen/WNpbvwB
diff --git a/components/ship/why.mdx b/components/ship/why.mdx
index 65b8ff2b8..ff924ecb9 100644
--- a/components/ship/why.mdx
+++ b/components/ship/why.mdx
@@ -1,4 +1,4 @@
-import { Card } from "theme-ui";
+import { Card } from 'theme-ui'
 
 <Card>
 
diff --git a/components/signature.js b/components/signature.js
index be7237754..f998ebf52 100644
--- a/components/signature.js
+++ b/components/signature.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signature = ({ fname, lname, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fname}_${lname}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fname} ${lname}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signature;
+export default Signature
diff --git a/components/signatures.js b/components/signatures.js
index 20dad0fd0..1505fbddc 100644
--- a/components/signatures.js
+++ b/components/signatures.js
@@ -1,17 +1,17 @@
-import { Image, useColorMode } from "theme-ui";
+import { Image, useColorMode } from 'theme-ui'
 
 const Signatures = ({ fileName, width }) => {
   // enforce a sane color mode (typescript should do this in the future)
-  let [colorMode] = useColorMode();
-  colorMode = colorMode === "dark" ? "light" : "dark";
+  let [colorMode] = useColorMode()
+  colorMode = colorMode === 'dark' ? 'light' : 'dark'
   return (
     <Image
       src={`/signatures/${fileName}-${colorMode}.png`.toLowerCase()}
       width={width || 96}
       alt={`${fileName}'s signature`}
-      sx={{ "+ p": { mt: 0 } }}
+      sx={{ '+ p': { mt: 0 } }}
     />
-  );
-};
+  )
+}
 
-export default Signatures;
+export default Signatures
diff --git a/components/slack.js b/components/slack.js
index 77a1f034a..74721c322 100644
--- a/components/slack.js
+++ b/components/slack.js
@@ -1,9 +1,9 @@
-import { Button, Box, Container, Heading, Flex, Grid, Text } from "theme-ui";
-import styled from "@emotion/styled";
-import usePrefersMotion from "../lib/use-prefers-motion";
-import useHasMounted from "../lib/use-has-mounted";
-import { formatted } from "../lib/members";
-import Link from "next/link";
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import styled from '@emotion/styled'
+import usePrefersMotion from '../lib/use-prefers-motion'
+import useHasMounted from '../lib/use-has-mounted'
+import { formatted } from '../lib/members'
+import Link from 'next/link'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -14,35 +14,35 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Content = () => (
   <Container
     sx={{
-      textAlign: "center",
+      textAlign: 'center',
       zIndex: 999,
       py: 6,
-      color: "white",
-      "h2,p": { textShadow: "text" },
-      textAlign: [null, "center"],
-      position: "relative",
-      overflow: "hidden",
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
     }}
   >
-    <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+    <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
       ~ The Hack Club Slack ~
     </Text>
     <Heading as="h2" variant="title">
       Come for the skills, <br /> stay for the people.
     </Heading>
-    <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+    <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
       Communication and planning for our open source projects happen in the
       Slack. Coding is often seen as an isolating activity. Plenty of groups
       exist for kids who are interested in sports, theater, or chess, but the
-      stereotype of a programmer is a person who sits alone in a dark room.{" "}
+      stereotype of a programmer is a person who sits alone in a dark room.{' '}
       <strong>It doesn't have to be this way</strong>—in the Hack Club Slack
-      (Discord-style online groupchat), you'll find a group of {formatted}+{" "}
+      (Discord-style online groupchat), you'll find a group of {formatted}+{' '}
       <Highlight>fabulous people</Highlight> to talk to, active at all hours.
     </Text>
     <Link href="/slack" passHref>
@@ -50,58 +50,58 @@ const Content = () => (
         as="a"
         variant="ctaLg"
         sx={{
-          background: "linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)",
+          background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
         }}
       >
         Join our Slack →
       </Button>
     </Link>
   </Container>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.825,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -112,15 +112,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -139,10 +139,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/header.js b/components/slack/header.js
index 764a54123..93e540243 100644
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -1,88 +1,88 @@
-import { Box, Heading, Grid } from "theme-ui";
-import SlideUp from "../slide-up";
-import JoinForm from "./join-form";
-import usePrefersMotion from "../../lib/use-prefers-motion";
-import useHasMounted from "../../lib/use-has-mounted";
+import { Box, Heading, Grid } from 'theme-ui'
+import SlideUp from '../slide-up'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
 
 const Content = () => (
-  <Grid gap={3} pt={[5, "100px"]} pb={[3, 4]}>
+  <Grid gap={3} pt={[5, '100px']} pb={[3, 4]}>
     <Box
       sx={{
-        position: "relative",
+        position: 'relative',
         zIndex: 1,
-        textShadow: "text",
-        textAlign: ["center", "center"],
+        textShadow: 'text',
+        textAlign: ['center', 'center']
       }}
     >
       <Heading
         as="h1"
         variant="title"
         sx={{
-          color: "white",
+          color: 'white',
           fontSize: [5, 6, 7],
-          lineHeight: "limit",
-          mb: [2, 3],
+          lineHeight: 'limit',
+          mb: [2, 3]
         }}
       >
         Hack Club Slack
       </Heading>
     </Box>
-    <SlideUp sx={{ zIndex: 5, display: "flex", alignItems: "center" }}>
+    <SlideUp sx={{ zIndex: 5, display: 'flex', alignItems: 'center' }}>
       <JoinForm
         sx={{
-          variant: "cards.translucent",
-          position: "relative",
+          variant: 'cards.translucent',
+          position: 'relative',
           zIndex: 3,
-          maxWidth: "null",
+          maxWidth: 'null'
         }}
       />
     </SlideUp>
   </Grid>
-);
+)
 
 const Cover = () => (
   <Box
     sx={{
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
       top: 0,
       left: 0,
       right: 0,
-      backgroundImage: (t) => t.util.gx("cyan", "purple"),
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
       opacity: 0.625,
-      zIndex: 1,
+      zIndex: 1
     }}
   />
-);
+)
 
 const Static = ({
-  img = "https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png",
+  img = 'https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
   // img="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/12020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
 }) => (
   <Box
     as="section"
     id="slack"
     sx={{
-      position: "relative",
-      overflow: "hidden",
+      position: 'relative',
+      overflow: 'hidden',
       backgroundImage: `url(${img})`,
-      backgroundSize: "cover",
+      backgroundSize: 'cover'
     }}
   >
     <Cover />
     <Content />
   </Box>
-);
+)
 
 const Slack = () => {
-  const hasMounted = useHasMounted();
-  const prefersMotion = usePrefersMotion();
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
   if (hasMounted && prefersMotion) {
     return (
       <Box
         as="section"
         id="slack"
-        sx={{ overflow: "hidden", position: "relative" }}
+        sx={{ overflow: 'hidden', position: 'relative' }}
       >
         <Box
           as="video"
@@ -93,15 +93,15 @@ const Slack = () => {
           poster="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/02020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
           duration={2000}
           sx={{
-            position: "absolute",
+            position: 'absolute',
             bottom: 0,
             top: 0,
             left: 0,
             right: 0,
-            height: "100%",
+            height: '100%',
             zIndex: -1,
-            width: "100vw",
-            objectFit: "cover",
+            width: '100vw',
+            objectFit: 'cover'
           }}
         >
           <source
@@ -120,10 +120,10 @@ const Slack = () => {
         <Cover />
         <Content />
       </Box>
-    );
+    )
   } else {
-    return <Static />;
+    return <Static />
   }
-};
+}
 
-export default Slack;
+export default Slack
diff --git a/components/slack/join-form.js b/components/slack/join-form.js
index 0a531f38e..ecf1ab7d5 100644
--- a/components/slack/join-form.js
+++ b/components/slack/join-form.js
@@ -7,47 +7,47 @@ import {
   Grid,
   Text,
   Link,
-  Box,
-} from "theme-ui";
-import { useRouter } from "next/router";
-import useForm from "../../lib/use-form";
-import Submit from "../submit";
-import { getCookie, hasCookie } from "cookies-next";
+  Box
+} from 'theme-ui'
+import { useRouter } from 'next/router'
+import useForm from '../../lib/use-form'
+import Submit from '../submit'
+import { getCookie, hasCookie } from 'cookies-next'
 
 const JoinForm = ({ sx = {} }) => {
-  const router = useRouter();
-  const { status, formProps, useField } = useForm("/api/join/", null, {
+  const router = useRouter()
+  const { status, formProps, useField } = useForm('/api/join/', null, {
     clearOnSubmit: 5000,
-    method: "POST",
-    initData: hasCookie("continent")
+    method: 'POST',
+    initData: hasCookie('continent')
       ? {
-          continent: getCookie("continent"),
+          continent: getCookie('continent'),
           reason: router.query.reason,
-          event: router.query.event,
+          event: router.query.event
         }
-      : { reason: router.query.reason, event: router.query.event },
-  });
+      : { reason: router.query.reason, event: router.query.event }
+  })
 
-  const eventReferrer = useField("event").value;
-  const isAdult = useField("educationLevel").value === "tertiary";
-  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== "true";
+  const eventReferrer = useField('event').value
+  const isAdult = useField('educationLevel').value === 'tertiary'
+  const useWaitlist = process.env.NEXT_PUBLIC_OPEN !== 'true'
 
   return (
-    <Card sx={{ maxWidth: "narrow", mx: "auto", label: { mb: 3 }, ...sx }}>
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
         {eventReferrer && (
           <Box
             sx={{
-              bg: "purple",
-              color: "white",
+              bg: 'purple',
+              color: 'white',
               p: 2,
               mb: 3,
               borderRadius: 5,
-              textAlign: "center",
+              textAlign: 'center'
             }}
           >
             <Text variant="headline" sx={{ fontSize: 3 }}>
-              {eventReferrer === "onboard"
+              {eventReferrer === 'onboard'
                 ? "We can't wait to see your PCB!"
                 : `We can't wait to see you at ${eventReferrer}!`}
             </Text>
@@ -62,7 +62,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Full name
             <Input
-              {...useField("name")}
+              {...useField('name')}
               placeholder="Fiona Hackworth"
               required
             />
@@ -70,7 +70,7 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Email address
             <Input
-              {...useField("email")}
+              {...useField('email')}
               placeholder="fiona@hackclub.com"
               required
             />
@@ -78,9 +78,9 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Your home continent
             <Select
-              {...useField("continent")}
+              {...useField('continent')}
               required
-              sx={{ color: useField("continent").value === "" ? "muted" : "" }}
+              sx={{ color: useField('continent').value === '' ? 'muted' : '' }}
             >
               <option value="" selected disabled hidden>
                 Select a continent...
@@ -96,10 +96,10 @@ const JoinForm = ({ sx = {} }) => {
           <Label>
             Current education level
             <Select
-              {...useField("educationLevel")}
+              {...useField('educationLevel')}
               required
               sx={{
-                color: useField("educationLevel").value === "" ? "muted" : "",
+                color: useField('educationLevel').value === '' ? 'muted' : ''
               }}
             >
               <option value="" selected disabled hidden>
@@ -116,7 +116,7 @@ const JoinForm = ({ sx = {} }) => {
         <Label>
           Why do you want to join the Hack Club Slack?
           <Textarea
-            {...useField("reason")}
+            {...useField('reason')}
             placeholder="Write a few sentences."
             required
           />
@@ -127,13 +127,13 @@ const JoinForm = ({ sx = {} }) => {
             variant="caption"
             color="secondary"
             as="div"
-            sx={{ maxWidth: "600px", textAlign: "center", mb: 2 }}
+            sx={{ maxWidth: '600px', textAlign: 'center', mb: 2 }}
           >
             Hold your horses! <b>Our Slack community is for minors</b>! To find
-            out more about what all we do, check out our{" "}
+            out more about what all we do, check out our{' '}
             <Link href="https://github.com/hackclub"> Github </Link>. If you're
             a parent or educator & want to talk to a member of our team, send us
-            a email at{" "}
+            a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
         )}
@@ -141,19 +141,19 @@ const JoinForm = ({ sx = {} }) => {
         {!isAdult && (
           <Submit
             status={status}
-            mt={"0px!important"}
+            mt={'0px!important'}
             labels={{
-              default: useWaitlist ? "Join Waitlist" : "Get Invite",
-              error: "Something went wrong",
+              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+              error: 'Something went wrong',
               success: useWaitlist
                 ? "We'll be in touch soon!"
-                : "Email coming soon!",
+                : 'Email coming soon!'
             }}
           />
         )}
       </form>
     </Card>
-  );
-};
+  )
+}
 
-export default JoinForm;
+export default JoinForm
diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js
index 6333f8075..9d811ccd0 100644
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -1,113 +1,113 @@
-import { sample, take } from "lodash";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Slide } from "react-reveal";
-import useWebSocket from "react-use-websocket";
-import { Box, Text } from "theme-ui";
+import { sample, take } from 'lodash'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
+import useWebSocket from 'react-use-websocket'
+import { Box, Text } from 'theme-ui'
 
-const colors = ["red", "orange", "yellow", "green", "cyan", "blue", "#8067c3"];
+const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
 const Channel = ({ color, channel }) => (
   <Text as="strong" color={color}>
     {channel}
   </Text>
-);
+)
 
 const whitelistedChannels = new Set(
   `epoch-tx epoch-ba epoch-vt epoch-satellites lounge counttoamillion code scrapbook hq epoch ship welcome confessions lobby question-of-the-day hack-night announcements assemble community leaders bank hcb college-apps cdn present sprig hackathons 8-ball hackathon-organizers zrl-land design ishan-ded apple out-of-context amas batcave matthews-brain-dump memes epoch-bts poll-of-the-day pasture music too-much-information corgi-states-of-hugo gamedev denio-den india linux neighbourhood packages politics sarthaks-dreams fayd-lives-here bayarea reesericdotci celesticide minecraft cabin -코트니- neon replit-embassy the-democratic-peoples-republic-of-yishun scrapbook-dev speedy-diffusion 10-days-in-public orpheus-legion hq-surroundings annοuncements productivity hackathon-grants secret-santa ian-things-ᴛᴍ emojibot hardware-party koggy-woggy surroundings honest-impressions charlie confessions-meta carot-dev wordle pranavs-lair crypto adventofcode cake one-north mayhaps epoch-food-n-fun toby-shenanigans seattle math fishhead lgbtq chars-corner github-embassy project-ideas rant-about-high-school orpheus-show shoutout rust alumni slack-themes 3d-printing art hacktoberfest newsletter india swim`
     .split(/\s+/gi)
-    .filter((i) => i.length > 0),
-);
+    .filter(i => i.length > 0)
+)
 
 const SlackEvents = ({ sx, color, textColor, ...props }) => {
-  const didUnmount = useRef(false);
-  const [events, setEvents] = useState([]);
+  const didUnmount = useRef(false)
+  const [events, setEvents] = useState([])
 
   const STATIC_OPTIONS = useMemo(
     () => ({
       shouldReconnect: () => !didUnmount.current,
-      reconnectInterval: 3000,
+      reconnectInterval: 3000
     }),
-    [],
-  );
+    []
+  )
 
   const { lastJsonMessage } = useWebSocket(
-    "wss://joebunyan.haas.hackclub.com/stream",
-    STATIC_OPTIONS,
-  );
+    'wss://joebunyan.haas.hackclub.com/stream',
+    STATIC_OPTIONS
+  )
 
   useEffect(() => {
     try {
       async function resolveEvent() {
         if (
           !lastJsonMessage ||
-          !lastJsonMessage.type === "message" ||
+          !lastJsonMessage.type === 'message' ||
           !lastJsonMessage.channel
         ) {
-          return false;
+          return false
         }
 
         const { name } = await fetch(
-          `/api/channels/resolve/?id=${lastJsonMessage.channel}`,
+          `/api/channels/resolve/?id=${lastJsonMessage.channel}`
         )
-          .then((r) => r.json())
-          .catch((err) => console.error(err));
+          .then(r => r.json())
+          .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
           //this check should happen before the web req, to save on net resources
-          setEvents((prev) => [
+          setEvents(prev => [
             {
               type: lastJsonMessage.type,
               channel: `#${name}`,
-              color: sample(colors),
+              color: sample(colors)
             },
-            ...prev,
-          ]);
+            ...prev
+          ])
         }
       }
 
-      resolveEvent();
+      resolveEvent()
     } catch (err) {
-      true;
+      true
     }
-  }, [lastJsonMessage]);
+  }, [lastJsonMessage])
 
   useEffect(() => {
     return () => {
-      didUnmount.current = true;
-    };
-  });
+      didUnmount.current = true
+    }
+  })
 
   return (
     <Box
       as="ol"
       sx={{
-        height: "100%",
-        minHeight: "4em",
+        height: '100%',
+        minHeight: '4em',
         maxHeight: [128, 256],
-        overflow: "hidden",
-        listStyle: "none",
-        lineHeight: "heading",
+        overflow: 'hidden',
+        listStyle: 'none',
+        lineHeight: 'heading',
         pl: 0,
-        color: textColor || "black",
+        color: textColor || 'black',
         fontSize: 2,
-        overflowY: "hidden",
-        position: "relative",
-        ":after": {
+        overflowY: 'hidden',
+        position: 'relative',
+        ':after': {
           content: '""',
-          position: "absolute",
+          position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
-          display: "block",
-          height: "2em",
-          backgroundImage: (theme) =>
+          display: 'block',
+          height: '2em',
+          backgroundImage: theme =>
             `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
-            })`,
+            })`
         },
         div: { mb: [1, 2] },
-        "circle:last-of-type": { animationDuration: "1s" },
-        ...sx,
+        'circle:last-of-type': { animationDuration: '1s' },
+        ...sx
       }}
       aria-hidden="true"
       {...props}
@@ -115,7 +115,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       {take(events, 7).map(({ type, channel, color }) => (
         <Slide top duration={256} key={type + channel + color}>
           <>
-            {type === "message" && (
+            {type === 'message' && (
               <>
                 Message in <Channel channel={channel} color={color} />
               </>
@@ -124,7 +124,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
         </Slide>
       ))}
     </Box>
-  );
-};
+  )
+}
 
-export default SlackEvents;
+export default SlackEvents
diff --git a/components/slide-down.js b/components/slide-down.js
index e0a4c836b..cf37c3a5b 100644
--- a/components/slide-down.js
+++ b/components/slide-down.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
-  from: { transform: "translateY(-100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(-100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideDown};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideDown = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideDown;
+export default SlideDown
diff --git a/components/slide-up.js b/components/slide-up.js
index 67f5ff6cb..87a19bcda 100644
--- a/components/slide-up.js
+++ b/components/slide-up.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Box } from "theme-ui";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import React from 'react'
+import { Box } from 'theme-ui'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
-  from: { transform: "translateY(100%)", opacity: 0 },
-  to: { transform: "translateY(0)", opacity: 1 },
-});
+  from: { transform: 'translateY(100%)', opacity: 0 },
+  to: { transform: 'translateY(0)', opacity: 1 }
+})
 
 const Wrapper = styled(Box)`
   @media (prefers-reduced-motion: no-preference) {
     animation-name: ${slideUp};
     animation-fill-mode: backwards;
   }
-`;
+`
 
 const SlideUp = ({ duration = 500, delay = 0, ...props }) => (
   <Wrapper
     {...props}
     style={{
       ...(props.style || {}),
-      animationDuration: duration + "ms",
-      animationDelay: delay + "ms",
+      animationDuration: duration + 'ms',
+      animationDelay: delay + 'ms'
     }}
   />
-);
+)
 
-export default SlideUp;
+export default SlideUp
diff --git a/components/sparkles/index.js b/components/sparkles/index.js
index 0d6f8e4e4..fdcf53913 100644
--- a/components/sparkles/index.js
+++ b/components/sparkles/index.js
@@ -1,58 +1,58 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 20),
     style: {
-      top: random(0, 100) + "%",
-      left: random(0, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(0, 100) + '%',
+      left: random(0, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const Sparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 50,
-    prefersReducedMotion ? null : 450,
-  );
+    prefersReducedMotion ? null : 450
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -64,20 +64,20 @@ const Sparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style }) => {
   const path =
-    "M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z";
+    'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg width={size} height={size} viewBox="0 0 68 68" fill="none">
         <path d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -89,7 +89,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -97,28 +97,28 @@ const spin = keyframes`
   100% {
     transform: rotate(180deg);
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 1250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default Sparkles;
+export default Sparkles
diff --git a/components/sparkles/money.js b/components/sparkles/money.js
index e20419142..46404316f 100644
--- a/components/sparkles/money.js
+++ b/components/sparkles/money.js
@@ -1,29 +1,29 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { range, sample, random } from "lodash";
-import { Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import useRandomInterval from "../../lib/use-random-interval";
-import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { range, sample, random } from 'lodash'
+import { Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import useRandomInterval from '../../lib/use-random-interval'
+import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 
-const generateSparkle = (color) => {
+const generateSparkle = color => {
   const sparkle = {
     id: String(random(10000, 99999)),
     createdAt: Date.now(),
     color,
     size: random(10, 25),
     style: {
-      top: random(-10, 100) + "%",
-      left: random(-10, 100) + "%",
-    },
-  };
-  return sparkle;
-};
+      top: random(-10, 100) + '%',
+      left: random(-10, 100) + '%'
+    }
+  }
+  return sparkle
+}
 
 const MSparkles = ({
-  colors = ["orange", "yellow", "green"],
+  colors = ['orange', 'yellow', 'green'],
   children,
   sx,
   path,
@@ -31,30 +31,30 @@ const MSparkles = ({
   props,
   ...delegated
 }) => {
-  const allColors = colors.map((n) => theme.colors[n]);
-  const getColor = () => sample(allColors);
+  const allColors = colors.map(n => theme.colors[n])
+  const getColor = () => sample(allColors)
   const [sparkles, setSparkles] = useState(() => {
-    return range(3).map(() => generateSparkle(getColor()));
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
+    return range(3).map(() => generateSparkle(getColor()))
+  })
+  const prefersReducedMotion = usePrefersReducedMotion()
   useRandomInterval(
     () => {
-      const sparkle = generateSparkle(getColor());
-      const now = Date.now();
-      const nextSparkles = sparkles.filter((sp) => {
-        const delta = now - sp.createdAt;
-        return delta < 750;
-      });
-      nextSparkles.push(sparkle);
-      setSparkles(nextSparkles);
+      const sparkle = generateSparkle(getColor())
+      const now = Date.now()
+      const nextSparkles = sparkles.filter(sp => {
+        const delta = now - sp.createdAt
+        return delta < 750
+      })
+      nextSparkles.push(sparkle)
+      setSparkles(nextSparkles)
     },
     prefersReducedMotion ? null : 250,
-    prefersReducedMotion ? null : 150,
-  );
+    prefersReducedMotion ? null : 150
+  )
 
   return (
     <Wrapper {...delegated}>
-      {sparkles.map((sparkle) => (
+      {sparkles.map(sparkle => (
         <Sparkle
           key={sparkle.id}
           color={sparkle.color}
@@ -68,26 +68,26 @@ const MSparkles = ({
         {children}
       </ChildWrapper>
     </Wrapper>
-  );
-};
+  )
+}
 
 const Sparkle = ({ size, color, style, path, viewBox }) => {
   if (!path)
     path =
-      "M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z";
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
       <SparkleSvg
         width={size}
         height={size}
-        viewBox={viewBox || "0 0 82 82"}
+        viewBox={viewBox || '0 0 82 82'}
         fill="none"
       >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>
-  );
-};
+  )
+}
 
 const comeInOut = keyframes`
   0% {
@@ -99,7 +99,7 @@ const comeInOut = keyframes`
   100% {
     transform: scale(0);
   }
-`;
+`
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -110,28 +110,28 @@ const spin = keyframes`
   100% {
     transform: rotate(0deg)
   }
-`;
+`
 const Wrapper = styled.span`
   display: inline-block;
   position: relative;
-`;
+`
 const SparkleWrapper = styled.span`
   position: absolute;
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${comeInOut} 1000ms forwards;
   }
-`;
+`
 const SparkleSvg = styled.svg`
   display: block;
   @media (prefers-reduced-motion: no-preference) {
     animation: ${spin} 2250ms linear;
   }
-`;
+`
 const ChildWrapper = styled(Text)`
   position: relative;
   z-index: 1;
   font-weight: bold;
-`;
+`
 
-export default MSparkles;
+export default MSparkles
diff --git a/components/stage.js b/components/stage.js
index 2dda84ddf..67c8383a8 100644
--- a/components/stage.js
+++ b/components/stage.js
@@ -1,5 +1,5 @@
-import { Box, Heading, Text } from "theme-ui";
-import Icon from "../components/icon";
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
 
 const Stage = ({ icon, color, name, desc, children, ...props }) => (
   <Box {...props}>
@@ -7,17 +7,17 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -30,12 +30,12 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
-export default Stage;
+export default Stage
diff --git a/components/stat.js b/components/stat.js
index c7f2cfd27..f858a098c 100644
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,11 +1,11 @@
-import { Flex, Text } from "theme-ui";
-import { isEmpty } from "lodash";
+import { Flex, Text } from 'theme-ui'
+import { isEmpty } from 'lodash'
 
 const Stat = ({
   value,
   label,
-  unit = "",
-  color = "text",
+  unit = '',
+  color = 'text',
   of,
   center = false,
   reversed = false,
@@ -17,17 +17,17 @@ const Stat = ({
   <Flex
     {...props}
     sx={{
-      fontFamily: "heading",
-      flexDirection: reversed ? "column-reverse" : "column",
+      fontFamily: 'heading',
+      flexDirection: reversed ? 'column-reverse' : 'column',
       lineHeight: 1,
-      ...props.sx,
+      ...props.sx
     }}
   >
     <Flex
       sx={{
-        alignItems: "center",
-        justifyContent: center ? "center" : "start",
-        position: "relative",
+        alignItems: 'center',
+        justifyContent: center ? 'center' : 'start',
+        position: 'relative'
       }}
     >
       <Text
@@ -35,22 +35,22 @@ const Stat = ({
         sx={{
           color,
           fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [4, 5, 6],
-          fontWeight: "heading",
-          letterSpacing: "title",
-          my: 0,
+          fontWeight: 'heading',
+          letterSpacing: 'title',
+          my: 0
         }}
       >
-        {value || "—"}
+        {value || '—'}
       </Text>
       {!isEmpty(unit) && (
         <Text
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
-            color: color === "text" ? "secondary" : color,
-            ml: [null, unit === "%" ? 1 : null],
+            color: color === 'text' ? 'secondary' : color,
+            ml: [null, unit === '%' ? 1 : null],
             mr: [null, 1],
-            pt: [null, 1],
+            pt: [null, 1]
           }}
         >
           {unit}
@@ -61,12 +61,12 @@ const Stat = ({
           as="sup"
           sx={{
             fontSize: lg ? [2, 3] : [1, 2],
-            color: "muted",
+            color: 'muted',
             ml: [null, 1],
             pt: [null, 1],
-            "::before": {
-              content: '"/"',
-            },
+            '::before': {
+              content: '"/"'
+            }
           }}
         >
           {of}
@@ -79,14 +79,14 @@ const Stat = ({
         variant="caption"
         sx={{
           fontSize: lg ? [1, 2, 3] : [0, 1],
-          letterSpacing: "headline",
-          textTransform: "uppercase",
+          letterSpacing: 'headline',
+          textTransform: 'uppercase'
         }}
       >
         {label}
       </Text>
     )}
   </Flex>
-);
+)
 
-export default Stat;
+export default Stat
diff --git a/components/stickers/request-form.js b/components/stickers/request-form.js
index 29b789846..01efcf822 100644
--- a/components/stickers/request-form.js
+++ b/components/stickers/request-form.js
@@ -1,10 +1,10 @@
-import { Grid, Card, Label, Input, Select } from "theme-ui";
-import useForm from "../../lib/use-form";
-import countries from "../../lib/countries";
-import Submit from "../submit";
+import { Grid, Card, Label, Input, Select } from 'theme-ui'
+import useForm from '../../lib/use-form'
+import countries from '../../lib/countries'
+import Submit from '../submit'
 
 const RequestForm = () => {
-  const { status, formProps, useField } = useForm("/api/stickers");
+  const { status, formProps, useField } = useForm('/api/stickers')
 
   return (
     <Grid
@@ -13,19 +13,19 @@ const RequestForm = () => {
       gap={3}
       {...formProps}
       sx={{
-        label: { gridColumn: ["span 2", "auto"] },
-        button: { gridColumn: "span 2", maxWidth: "75%", mx: "auto" },
-        "input, select": { bg: "dark" },
+        label: { gridColumn: ['span 2', 'auto'] },
+        button: { gridColumn: 'span 2', maxWidth: '75%', mx: 'auto' },
+        'input, select': { bg: 'dark' }
       }}
     >
       <Label>
         Full name
-        <Input {...useField("name")} placeholder="Fiona Hackworth" required />
+        <Input {...useField('name')} placeholder="Fiona Hackworth" required />
       </Label>
       <Label>
         Email address (for tracking)
         <Input
-          {...useField("email")}
+          {...useField('email')}
           placeholder="fiona@hackclub.com"
           required
         />
@@ -33,7 +33,7 @@ const RequestForm = () => {
       <Label>
         Address (first line)
         <Input
-          {...useField("addressFirst")}
+          {...useField('addressFirst')}
           placeholder="8605 Santa Monica Blvd"
           autoComplete="address-line1"
           required
@@ -42,30 +42,30 @@ const RequestForm = () => {
       <Label>
         Address (second line) (optional)
         <Input
-          {...useField("addressSecond")}
+          {...useField('addressSecond')}
           autoComplete="address-line2"
           placeholder="#86294"
         />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         City
-        <Input {...useField("city")} placeholder="West Hollywood" required />
+        <Input {...useField('city')} placeholder="West Hollywood" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         State/Province
-        <Input {...useField("state")} placeholder="CA" required />
+        <Input {...useField('state')} placeholder="CA" required />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Zip Code
-        <Input {...useField("zipCode")} placeholder="90069" />
+        <Input {...useField('zipCode')} placeholder="90069" />
       </Label>
-      <Label sx={{ gridColumn: "span 1 !important" }}>
+      <Label sx={{ gridColumn: 'span 1 !important' }}>
         Country
-        <Select {...useField("country")} defaultValue="Choose a country">
+        <Select {...useField('country')} defaultValue="Choose a country">
           <option value="" selected disabled>
             Choose a country
           </option>
-          {countries.countries.map((country) => (
+          {countries.countries.map(country => (
             <option value={country} key={country}>
               {country}
             </option>
@@ -75,13 +75,13 @@ const RequestForm = () => {
       <Submit
         status={status}
         labels={{
-          default: "Request stickers",
-          error: "Something went wrong",
-          success: "Coming your way!",
+          default: 'Request stickers',
+          error: 'Something went wrong',
+          success: 'Coming your way!'
         }}
       />
     </Grid>
-  );
-};
+  )
+}
 
-export default RequestForm;
+export default RequestForm
diff --git a/components/submit.js b/components/submit.js
index 5aa6a7219..dff96e2f6 100644
--- a/components/submit.js
+++ b/components/submit.js
@@ -1,41 +1,41 @@
-import { Button } from "theme-ui";
-import theme from "../lib/theme";
+import { Button } from 'theme-ui'
+import theme from '../lib/theme'
 
 const bg = {
   default: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   submitting: {
-    bg: "blue",
-    backgroundImage: theme.util.gx("cyan", "blue"),
+    bg: 'blue',
+    backgroundImage: theme.util.gx('cyan', 'blue')
   },
   success: {
-    bg: "green",
-    backgroundImage: theme.util.gx("yellow", "green"),
+    bg: 'green',
+    backgroundImage: theme.util.gx('yellow', 'green')
   },
   error: {
-    bg: "orange",
-    backgroundImage: theme.util.gx("orange", "red"),
-    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`,
-  },
-};
+    bg: 'orange',
+    backgroundImage: theme.util.gx('orange', 'red'),
+    boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  }
+}
 
 const submitting = {
   ...bg.default,
   opacity: 0.5,
-  pointerEvents: "none",
-  cursor: "not-allowed",
-};
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
 
 const Submit = ({
   status,
   labels = {
-    default: "Submit",
-    error: "Error!",
-    success: "Check your email!",
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Check your email!'
   },
-  width = "100%",
+  width = '100%',
   sx,
   ...props
 }) => (
@@ -48,14 +48,14 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === "submitting" ? submitting : bg[status]),
-      ...sx,
+      ...(status === 'submitting' ? submitting : bg[status]),
+      ...sx
     }}
-    disabled={status === "submitting"}
+    disabled={status === 'submitting'}
     {...props}
   >
-    {status === "submitting" ? "Submitting…" : labels[status]}
+    {status === 'submitting' ? 'Submitting…' : labels[status]}
   </Button>
-);
+)
 
-export default Submit;
+export default Submit
diff --git a/components/tilt.js b/components/tilt.js
index 79581a1b4..30862a745 100644
--- a/components/tilt.js
+++ b/components/tilt.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt";
+import React, { useEffect, useRef } from 'react'
+import VanillaTilt from 'vanilla-tilt'
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {
-  const root = useRef(null);
+  const root = useRef(null)
 
   useEffect(() => {
     VanillaTilt.init(root.current, {
@@ -11,13 +11,13 @@ const Tilt = ({ options = {}, children, ...props }) => {
       scale: 1.05,
       speed: 400,
       glare: true,
-      "max-glare": 0.25,
+      'max-glare': 0.25,
       gyroscope: false,
-      ...options,
-    });
-  }, [options]);
+      ...options
+    })
+  }, [options])
 
-  return React.cloneElement(children, { ref: root });
-};
+  return React.cloneElement(children, { ref: root })
+}
 
-export default Tilt;
+export default Tilt
diff --git a/components/winter/breakdown-box.js b/components/winter/breakdown-box.js
index ab7f81bf9..8fff25ad4 100644
--- a/components/winter/breakdown-box.js
+++ b/components/winter/breakdown-box.js
@@ -6,10 +6,10 @@ import {
   Heading,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
-import Icon from "@hackclub/icons";
+  Link
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
+import Icon from '@hackclub/icons'
 
 function BreakdownBox({
   subtitle,
@@ -19,29 +19,29 @@ function BreakdownBox({
   delay,
   href,
   color,
-  bg,
+  bg
 }) {
   return (
     <Zoom delay={delay}>
       <Card
         sx={{
-          color: "white",
-          background: "rgba(225,225,225,0.2)",
-          height: "100%",
-          cursor: `${href ? "pointer" : "default"}`,
-          display: "flex",
-          flexDirection: "column",
+          color: 'white',
+          background: 'rgba(225,225,225,0.2)',
+          height: '100%',
+          cursor: `${href ? 'pointer' : 'default'}`,
+          display: 'flex',
+          flexDirection: 'column'
           // justifyContent: 'flex-end'
         }}
         variant="interactive"
-        as={href ? "a" : "div"}
+        as={href ? 'a' : 'div'}
         href={href}
       >
         {subtitle ? (
           <Text
             as="h1"
             sx={{
-              fontSize: [2, 3, 4],
+              fontSize: [2, 3, 4]
             }}
           >
             {subtitle}
@@ -50,25 +50,25 @@ function BreakdownBox({
           <Box
             as="span"
             sx={{
-              width: "fit-content",
-              bg: bg || "white",
+              width: 'fit-content',
+              bg: bg || 'white',
               borderRadius: 18,
               lineHeight: 0,
               p: 2,
               mb: 1,
-              display: "inline-block",
-              transform: ["scale(0.75)", "none"],
-              transformOrigin: "bottom left",
+              display: 'inline-block',
+              transform: ['scale(0.75)', 'none'],
+              transformOrigin: 'bottom left',
               boxShadow:
-                "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
             }}
           >
-            <Icon glyph={icon} size={48} color={color || "white"} />
+            <Icon glyph={icon} size={48} color={color || 'white'} />
           </Box>
         )}
         <Heading
           sx={{
-            fontSize: [3, 4, 5],
+            fontSize: [3, 4, 5]
           }}
         >
           {text}
@@ -76,14 +76,14 @@ function BreakdownBox({
         <Text
           as="p"
           sx={{
-            fontSize: [2, 3],
+            fontSize: [2, 3]
           }}
         >
           {description}
         </Text>
       </Card>
     </Zoom>
-  );
+  )
 }
 
-export default BreakdownBox;
+export default BreakdownBox
diff --git a/components/winter/breakdown.js b/components/winter/breakdown.js
index 5ed8a45fe..ba70ef043 100644
--- a/components/winter/breakdown.js
+++ b/components/winter/breakdown.js
@@ -6,10 +6,10 @@ import {
   Grid,
   Text,
   Badge,
-  Link,
-} from "theme-ui";
-import { Fade, Slide } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
+  Link
+} from 'theme-ui'
+import { Fade, Slide } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
 
 function Breakdown() {
   return (
@@ -18,7 +18,7 @@ function Breakdown() {
         sx={{
           pt: 3,
           pb: 5,
-          background: "linear-gradient(180deg, #579AC9 0%, #338EDA 100%)",
+          background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
         }}
       >
         <Container>
@@ -26,9 +26,9 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
-                fontStyle: "italic",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
+                fontStyle: 'italic'
               }}
             >
               <Fade>Dear high school hacker, we have a challenge for you:</Fade>
@@ -36,11 +36,11 @@ function Breakdown() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [4, 5, 6],
                 pb: 4,
-                mt: 0,
+                mt: 0
               }}
             >
               <Fade>What will you make this winter?</Fade>
@@ -51,12 +51,12 @@ function Breakdown() {
               variant="headline"
               sx={{
                 // textShadow: '0px 0px 21px #E1F1FF',
-                color: "#338eda",
-                background: "white",
+                color: '#338eda',
+                background: 'white',
                 px: 3,
                 py: 2,
-                borderRadius: "10px",
-                width: "fit-content",
+                borderRadius: '10px',
+                width: 'fit-content'
               }}
             >
               Join Hack Clubbers in a winter of making with
@@ -96,7 +96,7 @@ function Breakdown() {
         </Container>
       </Box>
     </>
-  );
+  )
 }
 
-export default Breakdown;
+export default Breakdown
diff --git a/components/winter/footer.js b/components/winter/footer.js
index 395d19a6e..6e44dca49 100644
--- a/components/winter/footer.js
+++ b/components/winter/footer.js
@@ -1,27 +1,27 @@
-import { Box, Heading, Text, Link } from "theme-ui";
-import Footer from "../footer";
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
 
 const Description = () => (
-  <Box sx={{ a: { color: "blue" }, pb: 4 }}>
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
     <Heading as="h3" variant="subheadline" mb={2}>
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
-    <Text as="p" variant="caption" mb={3} sx={{ width: ["85%", "75%", "60%"] }}>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a
       network of 20k+ technical high schoolers. We believe you learn best by
       building so we're removing barriers to hardware access so any teenager can
-      explore. In the past few years, we've{" "}
+      explore. In the past few years, we've{' '}
       <Link href="https://summer.hackclub.com" target="_blank">
         partnered with GitHub to give away $50k of hardware
       </Link>
-      ,{" "}
+      ,{' '}
       <Link
         href="https://github.com/hackclub/the-hacker-zephyr"
         target="_blank"
       >
         hosted the world's longest hackathon on land
       </Link>
-      , and{" "}
+      , and{' '}
       <Link href="https://github.com/hackclub/assemble" target="_blank">
         brought 183 teenagers to SF for a hackathon
       </Link>
@@ -31,14 +31,14 @@ const Description = () => (
       Illustrations by Ripley.
     </Text>
   </Box>
-);
+)
 
 const WinterFooter = () => {
   return (
     <Footer>
       <Description />
     </Footer>
-  );
-};
+  )
+}
 
-export default WinterFooter;
+export default WinterFooter
diff --git a/components/winter/form.js b/components/winter/form.js
index 1fe20e187..09d411f5d 100644
--- a/components/winter/form.js
+++ b/components/winter/form.js
@@ -1,25 +1,25 @@
-import { Box, Input, Label, Button, Select, Text, Grid } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import theme from "@hackclub/theme";
-import Icon from "../icon";
-import { keyframes } from "@emotion/react";
-import debounce from "lodash/debounce";
+import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import theme from '@hackclub/theme'
+import Icon from '../icon'
+import { keyframes } from '@emotion/react'
+import debounce from 'lodash/debounce'
 
 const hideAnimation = keyframes({
-  from: { display: "flex" },
-  to: { display: "none", opacity: 0, padding: 0, position: "absolute" },
-});
+  from: { display: 'flex' },
+  to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
+})
 
 const spinAnimation = keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
 
 function Base({ children, action, target, method, onSubmit, id }) {
   return (
     <Box
       as="form"
-      sx={{ display: "grid", gridTemplateColumns: "1fr" }}
+      sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
       id={id}
       action={action}
       target={target}
@@ -28,7 +28,7 @@ function Base({ children, action, target, method, onSubmit, id }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({
@@ -39,26 +39,26 @@ function Field({
   value,
   onChange,
   required = true,
-  loading = false,
+  loading = false
 }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
-      <Box sx={{ position: "relative" }}>
+      <Box sx={{ position: 'relative' }}>
         {loading && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 10,
               right: 10,
               width: 20,
               height: 20,
-              border: "1px solid white",
-              borderRightStyle: "none",
+              border: '1px solid white',
+              borderRightStyle: 'none',
               animation: `${spinAnimation} 1s linear infinite`,
-              borderRadius: "50%",
+              borderRadius: '50%'
             }}
           ></Box>
         )}
@@ -68,7 +68,7 @@ function Field({
           name={name}
           type={type}
           sx={{
-            bg: "light",
+            bg: 'light'
           }}
           onChange={onChange}
           value={value}
@@ -76,33 +76,33 @@ function Field({
         />
       </Box>
     </Box>
-  );
+  )
 }
 
 export default function Signup() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
 
-  const [eventName, setEventName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
+  const [eventName, setEventName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async e => {
+    e.preventDefault()
 
-    await fetch("/api/hcb/demo", {
-      method: "POST",
+    await fetch('/api/hcb/demo', {
+      method: 'POST',
       body: JSON.stringify({
         eventName,
         userEmail,
-        eventCategory: "hardware grant",
-      }),
-    });
+        eventCategory: 'hardware grant'
+      })
+    })
 
-    setSubmitted(true);
+    setSubmitted(true)
 
     // clear form
-    setEventName("");
-    setUserEmail("");
-  };
+    setEventName('')
+    setUserEmail('')
+  }
 
   return (
     <>
@@ -117,7 +117,7 @@ export default function Signup() {
           name="eventName"
           placeholder="Fiona's Hardware Fund"
           value={eventName}
-          onChange={(e) => setEventName(e.target.value)}
+          onChange={e => setEventName(e.target.value)}
         />
         <Field
           label="Email address"
@@ -125,13 +125,13 @@ export default function Signup() {
           placeholder="fiona@hackclub.com"
           type="email"
           value={userEmail}
-          onChange={(e) => setUserEmail(e.target.value)}
+          onChange={e => setUserEmail(e.target.value)}
         />
         <Button
           sx={{
-            backgroundImage: theme.util.gx("green", "blue"),
+            backgroundImage: theme.util.gx('green', 'blue'),
             mt: [2, 3],
-            py: 2,
+            py: 2
           }}
           type="submit"
         >
@@ -144,14 +144,14 @@ export default function Signup() {
             mt: 2,
             px: 2,
             py: 2,
-            borderRadius: "default",
-            color: "white",
-            bg: "green",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "start",
+            borderRadius: 'default',
+            color: 'white',
+            bg: 'green',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'start',
             animation: `${hideAnimation} 0s ease-in 15s`,
-            animationFillMode: "forwards",
+            animationFillMode: 'forwards'
           }}
         >
           <Icon glyph="send" size={24} />
@@ -159,5 +159,5 @@ export default function Signup() {
         </Box>
       )}
     </>
-  );
+  )
 }
diff --git a/components/winter/info.js b/components/winter/info.js
index 043b09dd3..09d17e439 100644
--- a/components/winter/info.js
+++ b/components/winter/info.js
@@ -7,33 +7,33 @@ import {
   Heading,
   Text,
   Flex,
-  Avatar,
-} from "theme-ui";
-import Icon from "../icon";
-import Tilt from "../tilt";
-import { Zoom } from "react-reveal";
+  Avatar
+} from 'theme-ui'
+import Icon from '../icon'
+import Tilt from '../tilt'
+import { Zoom } from 'react-reveal'
 
 export default function InfoGrid() {
   return (
     <Container py={4}>
       <Grid
         sx={{
-          gridTemplateColumns: ["1fr", "1fr", "1fr 1fr", "1fr 1fr 1fr"],
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: 3,
-          h: "fit-content",
+          h: 'fit-content'
         }}
       >
         <Zoom delay={100}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: ["100%"],
+              display: 'flex',
+              flexDirection: 'column',
+              height: ['100%']
             }}
           >
             <Card
               variant="translucent"
-              sx={{ borderRadius: "default", px: 4, py: [2, 3, 5] }}
+              sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
             >
               {/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
               <Text variant="lead" as="p">
@@ -51,19 +51,19 @@ export default function InfoGrid() {
         </Zoom>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={300}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">To qualify:</Heading>
@@ -76,7 +76,7 @@ export default function InfoGrid() {
               {/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
               Share a plan for what you want to build and how much you need (up to $250)
             </BulletItem> */}
-              <Text sx={{ color: "muted" }}>
+              <Text sx={{ color: 'muted' }}>
                 If you qualify, share your idea! We're giving out as many grants
                 as possible!
               </Text>
@@ -86,12 +86,12 @@ export default function InfoGrid() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 4,
-                display: "flex",
-                flexDirection: "column",
-                height: "fit-content",
+                display: 'flex',
+                flexDirection: 'column',
+                height: 'fit-content'
               }}
             >
               <Heading variant="headline">
@@ -126,19 +126,19 @@ export default function InfoGrid() {
         </Box>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%'
           }}
         >
           <Zoom delay={600}>
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 4,
                 py: 3,
-                mb: 3,
+                mb: 3
               }}
             >
               <Heading variant="headline">
@@ -160,14 +160,14 @@ export default function InfoGrid() {
               <Card
                 as="div"
                 sx={{
-                  backgroundColor: "transparent",
+                  backgroundColor: 'transparent',
                   backgroundImage:
                     'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-                  height: ["300px", "500px", "100%", "230px"],
-                  backgroundSize: "100%",
-                  backgroundRepeat: "no-repeat",
-                  boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-                  display: ["block", "block", "none", "block"],
+                  height: ['300px', '500px', '100%', '230px'],
+                  backgroundSize: '100%',
+                  backgroundRepeat: 'no-repeat',
+                  boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+                  display: ['block', 'block', 'none', 'block']
                 }}
               />
             </Tilt>
@@ -177,43 +177,43 @@ export default function InfoGrid() {
           <Card
             as="div"
             sx={{
-              backgroundColor: "transparent",
+              backgroundColor: 'transparent',
               backgroundImage:
                 'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
-              height: ["300px", "500px", "100%", "230px"],
-              backgroundSize: "100%",
-              backgroundRepeat: "no-repeat",
-              boxShadow: "0 8px 32px rgba(255, 255, 255, 0.0625)",
-              display: ["none", "none", "block", "none"],
+              height: ['300px', '500px', '100%', '230px'],
+              backgroundSize: '100%',
+              backgroundRepeat: 'no-repeat',
+              boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
+              display: ['none', 'none', 'block', 'none']
             }}
           />
         </Tilt>
       </Grid>
     </Container>
-  );
+  )
 }
 
 function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
   return (
     <Flex
       sx={{
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignItems: "center",
-        my: 2,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        alignItems: 'center',
+        my: 2
       }}
     >
       <Icon
         glyph={iconGlyph}
         size={iconSize || 36}
-        color={iconColor || "text"}
+        color={iconColor || 'text'}
         sx={{
-          flexShrink: "0",
+          flexShrink: '0'
         }}
       />
       <Text sx={{ ml: 1 }}>{children}</Text>
     </Flex>
-  );
+  )
 }
 
 function UserMention({ user }) {
@@ -221,10 +221,10 @@ function UserMention({ user }) {
     <Box
       as="span"
       sx={{
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}
     >
       <Text as="a" href={`https://github.com/${user}`}>
@@ -234,8 +234,8 @@ function UserMention({ user }) {
         src={`https://github.com/${user}.png`}
         height="24px"
         width="24px"
-        sx={{ backgroundColor: "white", ml: 2 }}
+        sx={{ backgroundColor: 'white', ml: 2 }}
       />
     </Box>
-  );
+  )
 }
diff --git a/components/winter/landing.js b/components/winter/landing.js
index 2415f220a..95a9c1d15 100644
--- a/components/winter/landing.js
+++ b/components/winter/landing.js
@@ -1,69 +1,69 @@
-import { Box, Heading, Button, Link, Text, Container } from "theme-ui";
-import Snowfall from "react-snowfall";
-import { Fade } from "react-reveal";
-import Rsvp from "./rsvp";
-import { keyframes } from "@emotion/react";
+import { Box, Heading, Button, Link, Text, Container } from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import { Fade } from 'react-reveal'
+import Rsvp from './rsvp'
+import { keyframes } from '@emotion/react'
 
 const flashing = keyframes({
   from: { opacity: 0 },
-  "50%": { opacity: 1 },
-  to: { opacity: 0 },
-});
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
 
 function Dot() {
   return (
     <Text
       sx={{
-        bg: "green",
-        color: "white",
-        borderRadius: "circle",
-        display: "inline-block",
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
         lineHeight: 0,
-        width: ".4em",
-        height: ".4em",
-        marginRight: ".4em",
-        marginBottom: ".12em",
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
         animationName: `${flashing}`,
-        animationDuration: "3s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
       }}
     />
-  );
+  )
 }
 
 export default function Landing({ rsvpCount }) {
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: 'relative' }}>
       <Box
         sx={{
           background:
-            "url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)",
-          backgroundPosition: "bottom center",
-          backgroundSize: ["200%", "150%", "100%"],
-          backgroundRepeat: "no-repeat",
-          height: "85vh",
-          minHeight: [null, "750px"],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          zIndex: 2,
+            'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
+          backgroundPosition: 'bottom center',
+          backgroundSize: ['200%', '150%', '100%'],
+          backgroundRepeat: 'no-repeat',
+          height: '85vh',
+          minHeight: [null, '750px'],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 2
         }}
       >
         <Snowfall />
         <Container>
           <Box
             sx={{
-              backdropFilter: "blur(1.5px)",
-              maxWidth: "container",
+              backdropFilter: 'blur(1.5px)',
+              maxWidth: 'container'
             }}
           >
             <Fade left cascade>
               <Heading
                 variant="eyebrow"
                 sx={{
-                  color: "sunken",
+                  color: 'sunken'
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
@@ -75,8 +75,8 @@ export default function Landing({ rsvpCount }) {
                 as="h1"
                 variant="ultratitle"
                 sx={{
-                  color: "white",
-                  textShadow: "0 0 16px rgba(0, 0, 0, 0.2)",
+                  color: 'white',
+                  textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
                 }}
                 id="rsvp"
               >
@@ -88,22 +88,22 @@ export default function Landing({ rsvpCount }) {
               variant="subtitle"
               as="p"
               sx={{
-                color: "white",
-                textShadow: "2px 2px 10px rgba(0, 0, 0, 1)",
+                color: 'white',
+                textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
                 pt: 2,
-                maxWidth: "50ch",
-                margin: "auto",
-                my: 3,
+                maxWidth: '50ch',
+                margin: 'auto',
+                my: 3
               }}
             >
               RSVPs have closed and hundreds of projects will soon be built
-              together in the{" "}
+              together in the{' '}
               <Link
                 href="/slack"
                 target="_blank"
                 sx={{
-                  color: "blue",
-                  textShadow: "2px 2px 10px rgba(255, 255, 255, 1)",
+                  color: 'blue',
+                  textShadow: '2px 2px 10px rgba(255, 255, 255, 1)'
                 }}
               >
                 Hack Club Slack
@@ -116,16 +116,16 @@ export default function Landing({ rsvpCount }) {
               href="https://github.com/hackclub/winter"
               sx={{
                 background:
-                  "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                mt: 2,
+                  'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                mt: 2
               }}
             >
-              {" "}
+              {' '}
               View the projects
             </Button>
           </Box>
         </Container>
       </Box>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/projects.js b/components/winter/projects.js
index 5b6203501..ae113f6c3 100644
--- a/components/winter/projects.js
+++ b/components/winter/projects.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -11,47 +11,47 @@ import {
   Link as A,
   Text,
   Avatar,
-  Image,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import NextImage from "next/image";
-import Marquee from "react-marquee-slider";
-import Photo1 from "../../public/winter/1.jpeg";
-import Photo2 from "../../public/winter/2.png";
-import Photo3 from "../../public/winter/3.jpeg";
-import Photo4 from "../../public/winter/4.jpeg";
-import Photo5 from "../../public/winter/5.jpeg";
-import Photo6 from "../../public/winter/6.jpeg";
-import Photo7 from "../../public/winter/7.jpeg";
-import Photo8 from "../../public/winter/8.jpeg";
-import Photo9 from "../../public/winter/9.jpeg";
-import Photo10 from "../../public/winter/10.jpeg";
-import Photo12 from "../../public/winter/12.jpeg";
-import Photo13 from "../../public/winter/13.jpeg";
-import Photo14 from "../../public/winter/14.jpeg";
-import Photo15 from "../../public/winter/15.jpeg";
-import Photo16 from "../../public/winter/16.jpeg";
-import Photo17 from "../../public/winter/17.jpeg";
-import Photo18 from "../../public/winter/18.jpeg";
-import Photo19 from "../../public/winter/19.jpeg";
-import Photo20 from "../../public/winter/20.jpeg";
-import Photo21 from "../../public/winter/21.jpeg";
-import Photo22 from "../../public/winter/22.jpeg";
-import Photo23 from "../../public/winter/23.jpeg";
-import Photo24 from "../../public/winter/24.jpeg";
-import Photo25 from "../../public/winter/25.jpeg";
-import Photo26 from "../../public/winter/26.jpeg";
-import Photo27 from "../../public/winter/27.jpeg";
-import Photo28 from "../../public/winter/28.jpeg";
-import Photo29 from "../../public/winter/29.jpeg";
-import Photo30 from "../../public/winter/30.jpeg";
-import Photo31 from "../../public/winter/31.png";
+  Image
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import NextImage from 'next/image'
+import Marquee from 'react-marquee-slider'
+import Photo1 from '../../public/winter/1.jpeg'
+import Photo2 from '../../public/winter/2.png'
+import Photo3 from '../../public/winter/3.jpeg'
+import Photo4 from '../../public/winter/4.jpeg'
+import Photo5 from '../../public/winter/5.jpeg'
+import Photo6 from '../../public/winter/6.jpeg'
+import Photo7 from '../../public/winter/7.jpeg'
+import Photo8 from '../../public/winter/8.jpeg'
+import Photo9 from '../../public/winter/9.jpeg'
+import Photo10 from '../../public/winter/10.jpeg'
+import Photo12 from '../../public/winter/12.jpeg'
+import Photo13 from '../../public/winter/13.jpeg'
+import Photo14 from '../../public/winter/14.jpeg'
+import Photo15 from '../../public/winter/15.jpeg'
+import Photo16 from '../../public/winter/16.jpeg'
+import Photo17 from '../../public/winter/17.jpeg'
+import Photo18 from '../../public/winter/18.jpeg'
+import Photo19 from '../../public/winter/19.jpeg'
+import Photo20 from '../../public/winter/20.jpeg'
+import Photo21 from '../../public/winter/21.jpeg'
+import Photo22 from '../../public/winter/22.jpeg'
+import Photo23 from '../../public/winter/23.jpeg'
+import Photo24 from '../../public/winter/24.jpeg'
+import Photo25 from '../../public/winter/25.jpeg'
+import Photo26 from '../../public/winter/26.jpeg'
+import Photo27 from '../../public/winter/27.jpeg'
+import Photo28 from '../../public/winter/28.jpeg'
+import Photo29 from '../../public/winter/29.jpeg'
+import Photo30 from '../../public/winter/30.jpeg'
+import Photo31 from '../../public/winter/31.png'
 
 /** @jsxImportSource theme-ui */
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -59,28 +59,28 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -91,12 +91,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <NextImage
@@ -106,33 +106,33 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const Cards = ({ avatar, username, description, image }) => {
   return (
     <Card
       className="post"
-      sx={{ p: [3, 3], width: "100%", background: "rgba(225,225,225,0.9)" }}
+      sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
     >
       <Flex
         as="a"
         href={
-          username !== "cjmika110"
+          username !== 'cjmika110'
             ? `https://scrapbook.hackclub.com/${username}`
-            : "https://scrapbook.hackclub.com"
+            : 'https://scrapbook.hackclub.com'
         }
         sx={{
-          color: "inherit",
-          textDecoration: "none",
-          alignItems: "center",
-          mb: 2,
+          color: 'inherit',
+          textDecoration: 'none',
+          alignItems: 'center',
+          mb: 2
         }}
       >
         <Avatar loading="lazy" src={avatar} alt="" mr={2} />
@@ -146,124 +146,124 @@ const Cards = ({ avatar, username, description, image }) => {
         as="p"
         sx={{
           fontSize: 1,
-          textAlign: "left",
+          textAlign: 'left',
           mb: 2,
           a: {
-            color: "primary",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
+            color: 'primary',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
           },
-          "> div": { width: 18, height: 18 },
+          '> div': { width: 18, height: 18 }
         }}
       >
         {description}
       </Text>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          height: "200px",
-          overflow: "hidden",
+          position: 'relative',
+          width: '100%',
+          height: '200px',
+          overflow: 'hidden',
           backgroundImage: `url('${image}')`,
-          backgroundSize: "100%",
-          backgroundPosition: "bottom center",
-          backgroundRepeat: "no-repeat",
+          backgroundSize: '100%',
+          backgroundPosition: 'bottom center',
+          backgroundRepeat: 'no-repeat'
         }}
       >
         {/* <img src={image} sx={{ width: '100%' }} /> */}
       </Box>
     </Card>
-  );
-};
+  )
+}
 
 export default function Projects() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   let list = [
-    "drawing robot",
-    "drone",
-    "CNC machine",
-    "pixel art display",
-    "camera",
-    "3D printer",
-  ];
+    'drawing robot',
+    'drone',
+    'CNC machine',
+    'pixel art display',
+    'camera',
+    '3D printer'
+  ]
 
   if (count === list.length - 1) {
-    setCount(0);
+    setCount(0)
   }
 
-  let project_idea = list[count];
+  let project_idea = list[count]
 
   return (
     <Box>
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: ["auto", "800px", "800px"],
+            position: 'relative',
+            color: 'white!important',
+            height: ['auto', '800px', '800px']
           }}
-          pt={[5, 5, "50px"]}
+          pt={[5, 5, '50px']}
           pb={[5, 0, 0]}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 variant="title"
                 sx={{
-                  textShadow: "0px 0px 21px #E1F1FF",
-                  color: "white",
+                  textShadow: '0px 0px 21px #E1F1FF',
+                  color: 'white',
                   fontSize: [4, 5, 6],
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1
                 }}
               >
                 <Text>You could be building a</Text>
                 <Text
                   sx={{
-                    backgroundColor: "#406BAB",
+                    backgroundColor: '#406BAB',
                     py: 2,
                     px: 3,
                     borderRadius: 10,
-                    position: "relative",
-                    width: "fit-content",
-                    height: "min-content",
-                    cursor: "pointer",
-                    userSelect: "none",
+                    position: 'relative',
+                    width: 'fit-content',
+                    height: 'min-content',
+                    cursor: 'pointer',
+                    userSelect: 'none'
                   }}
                   onClick={() => setCount(count + 1)}
                 >
-                  <Box as="span" sx={{ whiteSpace: "nowrap" }}>
+                  <Box as="span" sx={{ whiteSpace: 'nowrap' }}>
                     {project_idea}
                   </Box>
                   <Image
                     src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
                     alt="click me"
                     sx={{
-                      position: "absolute",
+                      position: 'absolute',
                       top: [null, -3, -3],
                       bottom: [-3, null, null],
-                      right: [0, "-40px", "-40px"],
-                      transform: "rotate(-12deg)",
+                      right: [0, '-40px', '-40px'],
+                      transform: 'rotate(-12deg)'
                     }}
                   />
                 </Text>
               </Heading>
-              <Grid columns={[1, 3, 3]} mt={4} mx={["5vw", "auto", "auto"]}>
+              <Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
                 <Cards
                   avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
                   username="sampoder"
@@ -289,8 +289,8 @@ export default function Projects() {
                 href="https://scrapbook.hackclub.com/"
                 sx={{
                   background:
-                    "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-                  mt: 2,
+                    'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+                  mt: 2
                 }}
               >
                 Keep exploring →
@@ -300,11 +300,11 @@ export default function Projects() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: ["none", "block", "block"],
+            width: '100%',
+            display: ['none', 'block', 'block']
           }}
         >
           <PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
@@ -314,5 +314,5 @@ export default function Projects() {
         </Box>
       </Header>
     </Box>
-  );
+  )
 }
diff --git a/components/winter/recap.js b/components/winter/recap.js
index 5d5a9edfa..000ff15e8 100644
--- a/components/winter/recap.js
+++ b/components/winter/recap.js
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Heading, Grid, Card, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import { Slide, Zoom } from "react-reveal";
-import BreakdownBox from "./breakdown-box";
-import Signup from "./form";
+import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import { Slide, Zoom } from 'react-reveal'
+import BreakdownBox from './breakdown-box'
+import Signup from './form'
 
 function Recap() {
   return (
@@ -12,15 +12,15 @@ function Recap() {
           <Heading
             variant="headline"
             sx={{
-              textShadow: "0px 0px 21px #E1F1FF",
-              color: "white",
+              textShadow: '0px 0px 21px #E1F1FF',
+              color: 'white',
               fontSize: [3, 4, 5],
               pb: 4,
-              maxWidth: "90%",
+              maxWidth: '90%'
             }}
           >
             Make your ideas real this winter, with electronics and Hack Club
-            friends.{" "}
+            friends.{' '}
           </Heading>
         </Slide>
         <Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
@@ -42,20 +42,20 @@ function Recap() {
             <Card
               variant="translucent"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 3,
                 pb: 4,
                 pt: 2,
-                display: "flex",
-                flexDirection: "column",
+                display: 'flex',
+                flexDirection: 'column'
               }}
             >
               <Text
                 variant="subtitle"
                 sx={{
-                  fontWeight: "bold",
-                  color: "blue",
-                  textShadow: "0px 0px 21px #ffffff",
+                  fontWeight: 'bold',
+                  color: 'blue',
+                  textShadow: '0px 0px 21px #ffffff'
                 }}
               >
                 Open a Demo Account
@@ -95,16 +95,16 @@ function Recap() {
           as="a"
           href="#rsvp"
           style={{
-            zIndex: "100",
-            textAlign: "center",
-            backgroundImage: theme.util.gx("green", "blue"),
+            zIndex: '100',
+            textAlign: 'center',
+            backgroundImage: theme.util.gx('green', 'blue')
           }}
         >
           RSVP
         </Button>
       </Container>
     </>
-  );
+  )
 }
 
-export default Recap;
+export default Recap
diff --git a/components/winter/rsvp.js b/components/winter/rsvp.js
index ed158d2fb..3b02839e2 100644
--- a/components/winter/rsvp.js
+++ b/components/winter/rsvp.js
@@ -1,5 +1,5 @@
-import Icon from "@hackclub/icons";
-import { useRef, useState } from "react";
+import Icon from '@hackclub/icons'
+import { useRef, useState } from 'react'
 import {
   Box,
   Label,
@@ -11,73 +11,73 @@ import {
   Heading,
   Grid,
   Flex,
-  Checkbox,
-} from "theme-ui";
-import { Zoom } from "react-reveal";
+  Checkbox
+} from 'theme-ui'
+import { Zoom } from 'react-reveal'
 
 const Loading = () => (
   <Box
     sx={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "100%",
-      width: "100%",
-      border: "2px solid #f3f3f3",
-      borderTop: "2px solid #ec3750",
-      borderRadius: "50%",
-      width: "10px",
-      height: "10px",
-      animation: "spin 2s linear infinite",
-      "@keyframes spin": {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
-      },
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: '100%',
+      border: '2px solid #f3f3f3',
+      borderTop: '2px solid #ec3750',
+      borderRadius: '50%',
+      width: '10px',
+      height: '10px',
+      animation: 'spin 2s linear infinite',
+      '@keyframes spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
+      }
     }}
   ></Box>
-);
+)
 
 const Rsvp = () => {
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const formRef = useRef(null);
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const handleSubmit = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    await fetch("/api/winter-rsvp", {
-      method: "POST",
+    await fetch('/api/winter-rsvp', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         Name: e.target.name.value,
         Email: e.target.email.value,
-        Age: e.target.age.checked,
-      }),
-    });
+        Age: e.target.age.checked
+      })
+    })
 
-    formRef.current.reset();
-    setSubmitting(false);
+    formRef.current.reset()
+    setSubmitting(false)
 
-    setSubmitted(true);
-  };
+    setSubmitted(true)
+  }
 
   return (
     <Card
       sx={{
-        maxWidth: "narrowPlus",
-        mx: "auto",
+        maxWidth: 'narrowPlus',
+        mx: 'auto',
         mt: [3, 4],
-        background: "rgb(255,255,255, 0.45)",
-        backdropFilter: "blur(8px)",
+        background: 'rgb(255,255,255, 0.45)',
+        backdropFilter: 'blur(8px)'
       }}
     >
       <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
         Get up to $250 to build a hardware project this winter.
       </Heading>
-      <Text sx={{ color: "muted" }}>RSVP to join the event.</Text>
+      <Text sx={{ color: 'muted' }}>RSVP to join the event.</Text>
       <Box
         as="form"
         ref={formRef}
@@ -85,12 +85,12 @@ const Rsvp = () => {
         gap={[2, 3]}
         sx={{
           mt: [null, 3],
-          textAlign: "left",
-          alignItems: "end",
-          input: { bg: "sunken" },
+          textAlign: 'left',
+          alignItems: 'end',
+          input: { bg: 'sunken' }
         }}
       >
-        <Grid sx={{ gridTemplateColumns: "1fr 1fr" }}>
+        <Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
           <div>
             <Label htmlFor="location">Name</Label>
             <Input
@@ -115,7 +115,7 @@ const Rsvp = () => {
           </div>
         </Grid>
 
-        <Flex sx={{ flexDirection: "column" }}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
             <Checkbox name="age" defaultChecked={false} />I am a current high
             school student (or younger).
@@ -129,20 +129,20 @@ const Rsvp = () => {
                 &nbsp;RSVP
               </>
             ) : (
-              "RSVP"
+              'RSVP'
             )}
           </Button>
         </Flex>
       </Box>
 
       {submitted && (
-        <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
+        <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
           <Icon glyph="send" />
           <Text sx={{ ml: 2 }}>Signed up!</Text>
         </Alert>
       )}
     </Card>
-  );
-};
+  )
+}
 
-export default Rsvp;
+export default Rsvp
diff --git a/components/winter/timeline.js b/components/winter/timeline.js
index cfa86fc6d..30fa27bc1 100644
--- a/components/winter/timeline.js
+++ b/components/winter/timeline.js
@@ -1,38 +1,38 @@
-import { Box, Flex, Container, Text, Badge, Link } from "theme-ui";
-import { Slide } from "react-reveal";
-import Icon from "../icon";
+import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
+import { Slide } from 'react-reveal'
+import Icon from '../icon'
 
 function TimelineStep({ children }) {
   return (
     <Flex
       sx={{
         paddingY: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        "&:before": {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '&:before': {
           content: '""',
-          background: "snow",
-          height: ["420px", "320px", "320px"],
-          width: "4px",
+          background: 'snow',
+          height: ['420px', '320px', '320px'],
+          width: '4px',
           marginLeft: 36,
-          position: "absolute",
-          zIndex: 0,
+          position: 'absolute',
+          zIndex: 0
         },
-        "&:first-of-type:before": {
-          top: [0, null, "auto"],
+        '&:first-of-type:before': {
+          top: [0, null, 'auto'],
           width: [0, null, 0],
-          left: [0, null, 0],
+          left: [0, null, 0]
         },
-        "&:last-of-type:before": {
-          bottom: [0, null, "auto"],
+        '&:last-of-type:before': {
+          bottom: [0, null, 'auto'],
           left: [0, null, 0],
-          width: [0, null, 0],
-        },
+          width: [0, null, 0]
+        }
       }}
     >
       {children}
     </Flex>
-  );
+  )
 }
 
 function Circle({ children }) {
@@ -40,21 +40,21 @@ function Circle({ children }) {
     <Box
       sx={{
         p: 14,
-        background: "red",
+        background: 'red',
 
-        color: "white",
+        color: 'white',
         backgroundImage:
-          "radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)",
-        borderRadius: "100%",
-        display: "inline-block",
+          'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
+        borderRadius: '100%',
+        display: 'inline-block',
         lineHeight: 0,
-        position: "relative",
-        zIndex: 999,
+        position: 'relative',
+        zIndex: 999
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Step({ icon, name, duration, href }) {
@@ -63,7 +63,7 @@ function Step({ icon, name, duration, href }) {
       <Slide left>
         <Circle>
           {href ? (
-            <Link href={href} sx={{ cursor: "pointer", zIndex: 999 }}>
+            <Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
               <Icon glyph={icon} size={48} color="white" />
             </Link>
           ) : (
@@ -73,31 +73,31 @@ function Step({ icon, name, duration, href }) {
         <Container
           sx={{
             mt: 0,
-            display: "flex",
-            justifyContent: "left",
-            flexDirection: "column",
-            textAlign: "left",
+            display: 'flex',
+            justifyContent: 'left',
+            flexDirection: 'column',
+            textAlign: 'left'
           }}
         >
           <Badge
             variant="pill"
             sx={{
-              bg: "smoke",
-              color: "darker",
-              fontWeight: "normal",
-              textTransform: "uppercase",
-              width: "fit-content",
+              bg: 'smoke',
+              color: 'darker',
+              fontWeight: 'normal',
+              textTransform: 'uppercase',
+              width: 'fit-content',
               fontSize: 18,
-              px: 3,
+              px: 3
             }}
           >
             {duration}
           </Badge>
           <Text
             sx={{
-              color: "white",
+              color: 'white',
               fontSize: [2, 3],
-              maxWidth: [300, null, 550],
+              maxWidth: [300, null, 550]
             }}
           >
             {name}
@@ -105,20 +105,20 @@ function Step({ icon, name, duration, href }) {
         </Container>
       </Slide>
     </TimelineStep>
-  );
+  )
 }
 
 export default function RealTimeline() {
   return (
-    <Flex sx={{ flexDirection: "column", justifyContent: "center", pb: 4 }}>
+    <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
         name={
           <>
-            RSVPs are closed. Have a question? Here are the{" "}
+            RSVPs are closed. Have a question? Here are the{' '}
             <Link
               target="_blank"
-              sx={{ color: "inherit" }}
+              sx={{ color: 'inherit' }}
               href="https://github.com/hackclub/winter/blob/main/docs/faq.md"
             >
               FAQs
@@ -139,5 +139,5 @@ export default function RealTimeline() {
         duration="Build"
       />
     </Flex>
-  );
+  )
 }
diff --git a/lib/dates.js b/lib/dates.js
index 8f6a02da3..7a0d3a075 100644
--- a/lib/dates.js
+++ b/lib/dates.js
@@ -1,109 +1,108 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date().toISOString(),
+  current = new Date().toISOString()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const future = new Date(previous) - new Date(current);
-  const past = new Date(current) - new Date(previous);
-  const elapsed = [future, past].sort()[1];
+  const future = new Date(previous) - new Date(current)
+  const past = new Date(current) - new Date(previous)
+  const elapsed = [future, past].sort()[1]
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hours` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} weeks` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} weeks` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} months` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} months` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
diff --git a/lib/fetcher.js b/lib/fetcher.js
index ee0f4363c..b3ccdcb4b 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.js
@@ -4,6 +4,6 @@
  */
 
 export default async function fetcher(...args) {
-  const res = await fetch(...args);
-  return await res.json();
+  const res = await fetch(...args)
+  return await res.json()
 }
diff --git a/lib/hcb/apply/address-validation.js b/lib/hcb/apply/address-validation.js
index 05c4784a0..7ef7027ec 100644
--- a/lib/hcb/apply/address-validation.js
+++ b/lib/hcb/apply/address-validation.js
@@ -1,83 +1,83 @@
 async function getOrRefreshToken() {
   // Get the token from localStorage
-  const token = JSON.parse(localStorage.getItem("mapkit-token"));
+  const token = JSON.parse(localStorage.getItem('mapkit-token'))
   if (token) {
     // If the token is still valid, return it
-    if (Date.now() < token.refreshBefore) return token.accessToken;
+    if (Date.now() < token.refreshBefore) return token.accessToken
   } else {
     // The token is invalid or doesn't exist, so get a new one
 
     // This is a MapKit master token, restricted to https://hackclub.com
     const master =
-      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg";
+      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkNSQkg2S1VLTEIifQ.eyJpc3MiOiJQNlBWMlI5NDQzIiwiaWF0IjoxNjc5NjY3NjIyLCJleHAiOjE3MTEyMzg0MDB9.E6g9QPdbEWLgF6tdcL0YfX8NescYnwKhQpXdiyRitNm7-Oot-3VH0ze9xUd8xkOzuS_-7KeWy4bfYTD-2yX7Sg'
 
     // Get a MapKit server token
-    const res = await fetch("https://maps-api.apple.com/v1/token", {
-      headers: { Authorization: `Bearer ${master}` },
-    });
-    const resJson = await res.json();
+    const res = await fetch('https://maps-api.apple.com/v1/token', {
+      headers: { Authorization: `Bearer ${master}` }
+    })
+    const resJson = await res.json()
 
     // Set the token's expiration time to 10 seconds before the actual expiration time
     resJson.refreshBefore =
-      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000;
+      Date.now() + resJson.expiresInSeconds * 1_000 - 10_000
 
     // Save the token to localStorage
-    localStorage.setItem("mapkit-token", JSON.stringify(resJson));
+    localStorage.setItem('mapkit-token', JSON.stringify(resJson))
 
-    return resJson.accessToken;
+    return resJson.accessToken
   }
 }
 
 //TODO: Limit the number of retries
 
 export async function search(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/search?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return search(query);
+      console.warn('MapKit token expired, refreshing')
+      return search(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
 
 export async function geocode(query) {
-  if (!query || !query.trim()) return;
+  if (!query || !query.trim()) return
 
-  const token = await getOrRefreshToken();
+  const token = await getOrRefreshToken()
 
   const res = await fetch(`https://maps-api.apple.com/v1/geocode?q=${query}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  const resJson = await res.json();
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  const resJson = await res.json()
 
   if (resJson.error) {
-    if (resJson.error.message === "Not Authorized") {
+    if (resJson.error.message === 'Not Authorized') {
       // The token is invalid, so remove it from localStorage
-      localStorage.removeItem("mapkit-token");
+      localStorage.removeItem('mapkit-token')
 
       // Try again
-      console.warn("MapKit token expired, refreshing");
-      return geocode(query);
+      console.warn('MapKit token expired, refreshing')
+      return geocode(query)
     } else {
-      throw new Error(resJson.error.message);
+      throw new Error(resJson.error.message)
     }
   }
 
-  return resJson;
+  return resJson
 }
diff --git a/lib/helpers.js b/lib/helpers.js
index 0af5d70cf..85262fe10 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,190 +1,189 @@
-export const dt = (d) => new Date(d).toLocaleDateString();
+export const dt = d => new Date(d).toLocaleDateString()
 
-const year = new Date().getFullYear();
-export const tinyDt = (d) =>
-  dt(d).replace(`/${year}`, "").replace(`${year}-`, "");
+const year = new Date().getFullYear()
+export const tinyDt = d => dt(d).replace(`/${year}`, '').replace(`${year}-`, '')
 
 export const formatAddress = (city, stateCode, country, countryCode) => {
-  const firstHalf = city;
-  const secondHalf = countryCode === "US" ? stateCode : country;
+  const firstHalf = city
+  const secondHalf = countryCode === 'US' ? stateCode : country
 
   // Handle case where city or country is null
-  const final = [firstHalf, secondHalf].filter((e) => e).join(", ");
+  const final = [firstHalf, secondHalf].filter(e => e).join(', ')
 
   // Handle case where an event's location is outside the US and is so long that
   // it overflows the card when rendering. If the total length of the location
   // is over 16 characters and outside the US, then just show the country name.
-  if (countryCode !== "US" && final.length > 16) {
-    return country;
+  if (countryCode !== 'US' && final.length > 16) {
+    return country
   } else {
-    return final;
+    return final
   }
-};
+}
 
-const humanizedMonth = (date) =>
-  date.toLocaleString("en", { month: "long", timeZone: "UTC" });
+const humanizedMonth = date =>
+  date.toLocaleString('en', { month: 'long', timeZone: 'UTC' })
 
 export const humanizedDateRange = (start, end) => {
-  let result = "";
+  let result = ''
   // the substrings make sure that the dates aren't affected by dumb time zone bs
-  const startDate = new Date(start.substr(0, 10));
-  const endDate = new Date(end.substr(0, 10));
+  const startDate = new Date(start.substr(0, 10))
+  const endDate = new Date(end.substr(0, 10))
   if (startDate.getUTCMonth() === endDate.getUTCMonth()) {
     if (startDate.getUTCDate() === endDate.getUTCDate()) {
       // Same day and month means we can return the date
-      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`;
+      result = `${humanizedMonth(startDate)} ${startDate.getUTCDate()}`
     } else {
       result = `${humanizedMonth(
-        startDate,
-      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`;
+        startDate
+      )} ${startDate.getUTCDate()}–${endDate.getUTCDate()}`
     }
   } else {
     result = `${shortHumanizedMonth(
-      startDate,
+      startDate
     )} ${startDate.getUTCDate()}–${shortHumanizedMonth(
-      endDate,
-    )} ${endDate.getUTCDate()}`;
+      endDate
+    )} ${endDate.getUTCDate()}`
   }
   if (new Date().getUTCFullYear() !== startDate.getUTCFullYear()) {
-    result += `, ${startDate.getUTCFullYear()}`;
+    result += `, ${startDate.getUTCFullYear()}`
   }
-  return result;
-};
+  return result
+}
 
 // based on https://github.com/withspectrum/spectrum/blob/alpha/src/helpers/utils.js#L146
 export const timeSince = (
   previous,
   absoluteDuration = false,
   longForm = false,
-  current = new Date(),
+  current = new Date()
 ) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 24;
-  const msPerWeek = msPerDay * 7;
-  const msPerMonth = msPerDay * 30 * 2;
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 24
+  const msPerWeek = msPerDay * 7
+  const msPerMonth = msPerDay * 30 * 2
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(current) - new Date(previous);
+  const elapsed = new Date(current) - new Date(previous)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} minute${now > 1 ? "s" : ""}` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} minute${now > 1 ? 's' : ''}` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} hour${now > 1 ? "s" : ""}` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} hour${now > 1 ? 's' : ''}` : `${now}h`
   } else if (elapsed < msPerWeek) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} day${now > 1 ? "s" : ""}` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} day${now > 1 ? 's' : ''}` : `${now}d`
   } else if (elapsed < msPerMonth) {
-    const now = Math.round(elapsed / msPerWeek);
-    humanizedTime = longForm ? `${now} week${now > 1 ? "s" : ""}` : `${now}w`;
+    const now = Math.round(elapsed / msPerWeek)
+    humanizedTime = longForm ? `${now} week${now > 1 ? 's' : ''}` : `${now}w`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerMonth);
-    humanizedTime = longForm ? `${now} month${now > 1 ? "s" : ""}` : `${now}mo`;
+    const now = Math.round(elapsed / msPerMonth)
+    humanizedTime = longForm ? `${now} month${now > 1 ? 's' : ''}` : `${now}mo`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} year${now > 1 ? "s" : ""}` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} year${now > 1 ? 's' : ''}` : `${now}y`
   }
 
   if (absoluteDuration) {
-    return humanizedTime;
+    return humanizedTime
   } else {
-    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`;
+    return elapsed > 0 ? `${humanizedTime} ago` : `in ${humanizedTime}`
   }
-};
+}
 
 // NOTE(@lachlanjc): I know this is bad, I’m trying to get it out the door okay???
 export const timeTo = (time, current = new Date(), longForm = true) => {
-  const msPerMinute = 60 * 1000;
-  const msPerHour = msPerMinute * 60;
-  const msPerDay = msPerHour * 64; // getting close to a day
-  const msPerYear = msPerDay * 365;
+  const msPerMinute = 60 * 1000
+  const msPerHour = msPerMinute * 60
+  const msPerDay = msPerHour * 64 // getting close to a day
+  const msPerYear = msPerDay * 365
 
-  const elapsed = new Date(time) - new Date(current);
+  const elapsed = new Date(time) - new Date(current)
 
-  let humanizedTime;
+  let humanizedTime
   if (elapsed < msPerMinute) {
-    humanizedTime = "< 1m";
+    humanizedTime = '< 1m'
   } else if (elapsed < msPerHour) {
-    const now = Math.round(elapsed / msPerMinute);
-    humanizedTime = longForm ? `${now} more minutes` : `${now}m`;
+    const now = Math.round(elapsed / msPerMinute)
+    humanizedTime = longForm ? `${now} more minutes` : `${now}m`
   } else if (elapsed < msPerDay) {
-    const now = Math.round(elapsed / msPerHour);
-    humanizedTime = longForm ? `${now} more hours` : `${now}h`;
+    const now = Math.round(elapsed / msPerHour)
+    humanizedTime = longForm ? `${now} more hours` : `${now}h`
   } else if (elapsed < msPerYear) {
-    const now = Math.round(elapsed / msPerDay);
-    humanizedTime = longForm ? `${now} days` : `${now}d`;
+    const now = Math.round(elapsed / msPerDay)
+    humanizedTime = longForm ? `${now} days` : `${now}d`
   } else {
-    const now = Math.round(elapsed / msPerYear);
-    humanizedTime = longForm ? `${now} years` : `${now}y`;
+    const now = Math.round(elapsed / msPerYear)
+    humanizedTime = longForm ? `${now} years` : `${now}y`
   }
 
-  return humanizedTime;
-};
+  return humanizedTime
+}
 
 function formatChunk(type, date) {
   const days = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
   const months = [
-    "January",
-    "Febuary",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
+    'January',
+    'Febuary',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
   switch (type) {
-    case "dddd":
-      return days[date.getDay()];
-    case "ddd":
-      return formatChunk("dddd", date).slice(0, 3);
-    case "dd":
-      return ("00" + formatChunk("d", date)).slice(-2);
-    case "d":
-      return date.getDate();
-    case "mmmm":
-      return months[date.getMonth()];
-    case "mmm":
-      return formatChunk("mmmm", date).slice(0, 3);
-    case "mm":
-      return ("00" + formatChunk("m", date)).slice(-2);
-    case "m":
-      return (date.getMonth() + 1).toString();
-    case "yyyy":
-      return date.getFullYear().toString();
-    case "yy":
-      return formatChunk("yyyy", date).slice(-2);
+    case 'dddd':
+      return days[date.getDay()]
+    case 'ddd':
+      return formatChunk('dddd', date).slice(0, 3)
+    case 'dd':
+      return ('00' + formatChunk('d', date)).slice(-2)
+    case 'd':
+      return date.getDate()
+    case 'mmmm':
+      return months[date.getMonth()]
+    case 'mmm':
+      return formatChunk('mmmm', date).slice(0, 3)
+    case 'mm':
+      return ('00' + formatChunk('m', date)).slice(-2)
+    case 'm':
+      return (date.getMonth() + 1).toString()
+    case 'yyyy':
+      return date.getFullYear().toString()
+    case 'yy':
+      return formatChunk('yyyy', date).slice(-2)
     default:
-      return null;
+      return null
   }
 }
-export const formatDate = (format, date, divider = " ") => {
+export const formatDate = (format, date, divider = ' ') => {
   return format
     .split(divider)
-    .map((chunk) => formatChunk(chunk, new Date(date)))
-    .join(divider);
-};
+    .map(chunk => formatChunk(chunk, new Date(date)))
+    .join(divider)
+}
 
-export const normalizeGitHubCommitUrl = (url) => {
+export const normalizeGitHubCommitUrl = url => {
   return url
-    .replace("api.", "")
-    .replace("/repos", "")
-    .replace("commits", "commit");
-};
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}
diff --git a/lib/members.js b/lib/members.js
index b5b4abc3a..ad6420d5e 100644
--- a/lib/members.js
+++ b/lib/members.js
@@ -1,3 +1,3 @@
-export const count = 27253;
-export const formatted = count.toLocaleString("en-US");
-export const thousands = Math.round(count / 1000);
+export const count = 27253
+export const formatted = count.toLocaleString('en-US')
+export const thousands = Math.round(count / 1000)
diff --git a/lib/sitemap.js b/lib/sitemap.js
index 8bec8ec55..76fdef72c 100644
--- a/lib/sitemap.js
+++ b/lib/sitemap.js
@@ -1,38 +1,38 @@
-const fs = require("fs");
-const globby = require("globby");
+const fs = require('fs')
+const globby = require('globby')
 
 function addPage(page) {
-  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
-  const route = path === "/index" ? "" : path;
+  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
+  const route = path === '/index' ? '' : path
 
   return `  <url>
      <loc>${`https://hackclub.com${route}/`}</loc>
      <changefreq>hourly</changefreq>
-   </url>`;
+   </url>`
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes
   const pages = await globby([
-    "pages/**/*{.js,.mdx}",
-    "!pages/_*.js",
-    "!pages/api",
-  ]);
+    'pages/**/*{.js,.mdx}',
+    '!pages/_*.js',
+    '!pages/api'
+  ])
   const rewrites = [
-    "/hcb",
-    "/team",
-    "/map",
-    "/vip-newsletters",
-    "/conduct",
-    "/sponsorship",
-    "/banner",
-  ];
-  rewrites.map((path) => pages.push(path));
+    '/hcb',
+    '/team',
+    '/map',
+    '/vip-newsletters',
+    '/conduct',
+    '/sponsorship',
+    '/banner'
+  ]
+  rewrites.map(path => pages.push(path))
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- ${pages.sort().map(addPage).join("\n")}
- </urlset>`;
+ ${pages.sort().map(addPage).join('\n')}
+ </urlset>`
 
-  fs.writeFileSync("public/sitemap.xml", sitemap);
+  fs.writeFileSync('public/sitemap.xml', sitemap)
 }
 
-generateSitemap();
+generateSitemap()
diff --git a/lib/theme.js b/lib/theme.js
index e59f8a577..392f4dad6 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -1,16 +1,16 @@
-import base from "@hackclub/theme";
-import { merge } from "lodash";
+import base from '@hackclub/theme'
+import { merge } from 'lodash'
 
-const theme = base;
+const theme = base
 
-theme.useColorSchemeMediaQuery = false;
+theme.useColorSchemeMediaQuery = false
 
 theme.buttons.primary = merge(theme.buttons.primary, {
-  textTransform: "uppercase",
-});
+  textTransform: 'uppercase'
+})
 
-theme.layout.copy.maxWidth = [null, null, "copyPlus"];
+theme.layout.copy.maxWidth = [null, null, 'copyPlus']
 
-theme.text.title.fontSize = [5, 6];
+theme.text.title.fontSize = [5, 6]
 
-export default theme;
+export default theme
diff --git a/lib/use-form.js b/lib/use-form.js
index 8e6445cc7..0840c1528 100644
--- a/lib/use-form.js
+++ b/lib/use-form.js
@@ -1,74 +1,74 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 const useForm = (
-  submitURL = "/",
+  submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: "POST", initData: {} },
+  options = { clearOnSubmit: 5000, method: 'POST', initData: {} }
 ) => {
-  const [status, setStatus] = useState("default");
-  const [data, setData] = useState({ ...options.initData });
-  const [touched, setTouched] = useState({});
+  const [status, setStatus] = useState('default')
+  const [data, setData] = useState({ ...options.initData })
+  const [touched, setTouched] = useState({})
 
   const onFieldChange = (e, name, type) => {
-    e.persist();
-    const value = e.target[type === "checkbox" ? "checked" : "value"];
-    setData((data) => ({ ...options.initData, ...data, [name]: value }));
-  };
+    e.persist()
+    const value = e.target[type === 'checkbox' ? 'checked' : 'value']
+    setData(data => ({ ...options.initData, ...data, [name]: value }))
+  }
 
   useEffect(() => {
-    setTouched(Object.keys(data));
-  }, [data]);
+    setTouched(Object.keys(data))
+  }, [data])
 
-  const useField = (name, type = "text", ...props) => {
-    const checkbox = type === "checkbox";
-    const empty = checkbox ? false : "";
-    const onChange = (e) => onFieldChange(e, name, type);
-    const value = data[name] || options.initData[name];
+  const useField = (name, type = 'text', ...props) => {
+    const checkbox = type === 'checkbox'
+    const empty = checkbox ? false : ''
+    const onChange = e => onFieldChange(e, name, type)
+    const value = data[name] || options.initData[name]
     return {
       name,
-      type: name === "email" ? "email" : type,
-      [checkbox ? "checked" : "value"]: value || empty,
+      type: name === 'email' ? 'email' : type,
+      [checkbox ? 'checked' : 'value']: value || empty,
       onChange,
-      ...props,
-    };
-  };
+      ...props
+    }
+  }
 
-  const { method = "POST" } = options;
-  const action = submitURL;
+  const { method = 'POST' } = options
+  const action = submitURL
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-    setStatus("submitting");
+  const onSubmit = e => {
+    e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
     })
-      .then(async (r) => {
-        const response = await r.json();
+      .then(async r => {
+        const response = await r.json()
         if (r.ok) {
-          setStatus("success");
-          if (callback) callback(r);
-          setTimeout(() => setStatus("default"), 3500);
+          setStatus('success')
+          if (callback) callback(r)
+          setTimeout(() => setStatus('default'), 3500)
           if (options.clearOnSubmit)
-            setTimeout(() => setData({}), options.clearOnSubmit);
+            setTimeout(() => setData({}), options.clearOnSubmit)
         } else {
-          setStatus("error");
-          console.error(response);
+          setStatus('error')
+          console.error(response)
         }
       })
-      .catch((e) => {
-        console.error(e);
-        setStatus("error");
-      });
-  };
+      .catch(e => {
+        console.error(e)
+        setStatus('error')
+      })
+  }
 
-  const formProps = { onSubmit };
+  const formProps = { onSubmit }
 
-  return { status, data, touched, useField, formProps };
-};
+  return { status, data, touched, useField, formProps }
+}
 
-export default useForm;
+export default useForm
diff --git a/lib/use-has-mounted.js b/lib/use-has-mounted.js
index 0670d7c49..45abad1d7 100644
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -1,12 +1,12 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
-import React from "react";
+import React from 'react'
 
 function useHasMounted() {
-  const [hasMounted, setHasMounted] = React.useState(false);
+  const [hasMounted, setHasMounted] = React.useState(false)
   React.useEffect(() => {
-    setHasMounted(true);
-  }, []);
-  return hasMounted;
+    setHasMounted(true)
+  }, [])
+  return hasMounted
 }
 
-export default useHasMounted;
+export default useHasMounted
diff --git a/lib/use-prefers-motion.js b/lib/use-prefers-motion.js
index 80eb69020..2fb158815 100644
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -1,30 +1,30 @@
 // Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? false : window.matchMedia(QUERY).matches
+}
 
 function usePrefersMotion() {
-  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState);
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
 }
 
-export default usePrefersMotion;
+export default usePrefersMotion
diff --git a/lib/use-prefers-reduced-motion.js b/lib/use-prefers-reduced-motion.js
index 48956c519..1e763e50a 100644
--- a/lib/use-prefers-reduced-motion.js
+++ b/lib/use-prefers-reduced-motion.js
@@ -1,31 +1,31 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
-import React from "react";
+import React from 'react'
 
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
+const QUERY = '(prefers-reduced-motion: no-preference)'
+const isRenderingOnServer = typeof window === 'undefined'
 
 const getInitialState = () => {
   // For our initial server render, we won't know if the user
   // prefers reduced motion, but it doesn't matter. This value
   // will be overwritten on the client, before any animations
   // occur.
-  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+}
 
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] =
-    React.useState(getInitialState);
+    React.useState(getInitialState)
   React.useEffect(() => {
-    const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event) => {
-      setPrefersReducedMotion(!event.matches);
-    };
-    mediaQueryList.addListener(listener);
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersReducedMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
     return () => {
-      mediaQueryList.removeListener(listener);
-    };
-  }, []);
-  return prefersReducedMotion;
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersReducedMotion
 }
 
-export default usePrefersReducedMotion;
+export default usePrefersReducedMotion
diff --git a/lib/use-random-interval.js b/lib/use-random-interval.js
index 4c5135467..8da57106f 100644
--- a/lib/use-random-interval.js
+++ b/lib/use-random-interval.js
@@ -1,34 +1,33 @@
 // Full credit to https://joshwcomeau.com/snippets/react-hooks/use-random-interval
-import React from "react";
+import React from 'react'
 
 // Utility helper for random number generation
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
 
 const useRandomInterval = (callback, minDelay, maxDelay) => {
-  const timeoutId = React.useRef(null);
-  const savedCallback = React.useRef(callback);
+  const timeoutId = React.useRef(null)
+  const savedCallback = React.useRef(callback)
   React.useEffect(() => {
-    savedCallback.current = callback;
-  });
+    savedCallback.current = callback
+  })
   React.useEffect(() => {
-    let isEnabled =
-      typeof minDelay === "number" && typeof maxDelay === "number";
+    let isEnabled = typeof minDelay === 'number' && typeof maxDelay === 'number'
     if (isEnabled) {
       const handleTick = () => {
-        const nextTickAt = random(minDelay, maxDelay);
+        const nextTickAt = random(minDelay, maxDelay)
         timeoutId.current = window.setTimeout(() => {
-          savedCallback.current();
-          handleTick();
-        }, nextTickAt);
-      };
-      handleTick();
+          savedCallback.current()
+          handleTick()
+        }, nextTickAt)
+      }
+      handleTick()
     }
-    return () => window.clearTimeout(timeoutId.current);
-  }, [minDelay, maxDelay]);
+    return () => window.clearTimeout(timeoutId.current)
+  }, [minDelay, maxDelay])
   const cancel = React.useCallback(function () {
-    window.clearTimeout(timeoutId.current);
-  }, []);
-  return cancel;
-};
+    window.clearTimeout(timeoutId.current)
+  }, [])
+  return cancel
+}
 
-export default useRandomInterval;
+export default useRandomInterval
diff --git a/middleware.js b/middleware.js
index b065dc282..094651bfd 100644
--- a/middleware.js
+++ b/middleware.js
@@ -1,15 +1,15 @@
-import { NextResponse } from "next/server";
-import country from "country-list-js";
-const partners = ["gb_help_desk"];
+import { NextResponse } from 'next/server'
+import country from 'country-list-js'
+const partners = ['gb_help_desk']
 
 export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith("/slack")) {
-    let continent = country.findByIso2(request.geo.country || "AU").continent;
-    if (continent === "Oceania") {
-      continent = "Australia";
+  if (request.nextUrl.pathname.startsWith('/slack')) {
+    let continent = country.findByIso2(request.geo.country || 'AU').continent
+    if (continent === 'Oceania') {
+      continent = 'Australia'
     }
-    const response = NextResponse.next();
-    response.cookies.set("continent", continent || "");
-    return response;
+    const response = NextResponse.next()
+    response.cookies.set('continent', continent || '')
+    return response
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 5fa0239d6..f8c8ef1ef 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,294 +2,294 @@
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
-    ignoreDuringBuilds: true,
+    ignoreDuringBuilds: true
   },
   trailingSlash: true,
-  pageExtensions: ["js", "jsx", "mdx"],
+  pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
     domains: [
-      "hackclub.com",
-      "dl.airtable.com",
-      "emoji.slack-edge.com",
-      "cdn.glitch.com",
-      "scrapbook.hackclub.com",
-      "assets.hackclub.com",
-      "v5.airtableusercontent.com",
-      "",
+      'hackclub.com',
+      'dl.airtable.com',
+      'emoji.slack-edge.com',
+      'cdn.glitch.com',
+      'scrapbook.hackclub.com',
+      'assets.hackclub.com',
+      'v5.airtableusercontent.com',
+      ''
     ],
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "cloud-*-hack-club-bot.vercel.app",
-      },
-    ],
+        protocol: 'https',
+        hostname: 'cloud-*-hack-club-bot.vercel.app'
+      }
+    ]
   },
   webpack: (config, { isServer }) => {
-    return config;
+    return config
   },
   async redirects() {
     return [
       {
-        source: "/bank/:path*",
-        destination: "/hcb/:path*",
-        permanent: true,
+        source: '/bank/:path*',
+        destination: '/hcb/:path*',
+        permanent: true
       },
-      { source: "/grant/", destination: "/hackathons/grant", permanent: false },
+      { source: '/grant/', destination: '/hackathons/grant', permanent: false },
       {
-        source: "/sprig/",
-        destination: "https://sprig.hackclub.com",
-        permanent: true,
+        source: '/sprig/',
+        destination: 'https://sprig.hackclub.com',
+        permanent: true
       },
-      { source: "/start/", destination: "/", permanent: false },
-      { source: "/repl/", destination: "/", permanent: true },
-      { source: "/c9/", destination: "/deprecated/cloud9/", permanent: true },
+      { source: '/start/', destination: '/', permanent: false },
+      { source: '/repl/', destination: '/', permanent: true },
+      { source: '/c9/', destination: '/deprecated/cloud9/', permanent: true },
       {
-        source: "/cloud9_setup/",
-        destination: "/deprecated/cloud9/",
-        permanent: true,
+        source: '/cloud9_setup/',
+        destination: '/deprecated/cloud9/',
+        permanent: true
       },
       {
-        source: "/redeem_tech_domain/",
-        destination: "/deprecated/tech_domains/",
-        permanent: true,
+        source: '/redeem_tech_domain/',
+        destination: '/deprecated/tech_domains/',
+        permanent: true
       },
       {
-        source: "/challenge/",
-        destination: "/deprecated/challenge/",
-        permanent: true,
+        source: '/challenge/',
+        destination: '/deprecated/challenge/',
+        permanent: true
       },
-      { source: "/slack_invite/", destination: "/slack/", permanent: true },
+      { source: '/slack_invite/', destination: '/slack/', permanent: true },
       {
-        source: "/jobs/bank-tech-lead/",
-        destination: "/jobs/lead-hacker/",
-        permanent: true,
+        source: '/jobs/bank-tech-lead/',
+        destination: '/jobs/lead-hacker/',
+        permanent: true
       },
       {
-        source: "/first/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/first/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/frc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/frc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/ftc/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/ftc/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/bank/fll/",
-        destination: "/bank/first/",
-        permanent: false,
+        source: '/bank/fll/',
+        destination: '/bank/first/',
+        permanent: false
       },
       {
-        source: "/wom/",
-        destination: "/winter/",
-        permanent: false,
+        source: '/wom/',
+        destination: '/winter/',
+        permanent: false
       },
-      { source: "/workshops/slack/", destination: "/slack/", permanent: true },
-      { source: "/community/", destination: "/slack/", permanent: true },
-      { source: "/hack_camp/", destination: "/camp/", permanent: true },
-      { source: "/branding/", destination: "/brand/", permanent: true },
-      { source: "/ama/", destination: "/amas/", permanent: false },
-      { source: "/geohot", destination: "/amas/geohot/", permanent: false },
-      { source: "/sal", destination: "/amas/sal/", permanent: false },
-      { source: "/vitalik", destination: "/amas/vitalik/", permanent: false },
+      { source: '/workshops/slack/', destination: '/slack/', permanent: true },
+      { source: '/community/', destination: '/slack/', permanent: true },
+      { source: '/hack_camp/', destination: '/camp/', permanent: true },
+      { source: '/branding/', destination: '/brand/', permanent: true },
+      { source: '/ama/', destination: '/amas/', permanent: false },
+      { source: '/geohot', destination: '/amas/geohot/', permanent: false },
+      { source: '/sal', destination: '/amas/sal/', permanent: false },
+      { source: '/vitalik', destination: '/amas/vitalik/', permanent: false },
       {
-        source: "/open-source/",
-        destination: "/opensource/",
-        permanent: false,
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
       },
-      { source: "/coc/", destination: "/conduct/", permanent: true },
+      { source: '/coc/', destination: '/conduct/', permanent: true },
       {
-        source: "/code_of_conduct/",
-        destination: "/conduct/",
-        permanent: true,
+        source: '/code_of_conduct/',
+        destination: '/conduct/',
+        permanent: true
       },
       {
-        source: "/finder/",
-        destination: "https://finder.hackclub.com",
-        permanent: true,
+        source: '/finder/',
+        destination: 'https://finder.hackclub.com',
+        permanent: true
       },
       {
-        source: "/camp/",
-        destination: "https://camp.hackclub.com",
-        permanent: true,
+        source: '/camp/',
+        destination: 'https://camp.hackclub.com',
+        permanent: true
       },
       {
-        source: "/apply/",
-        destination: "https://apply.hackclub.com",
-        permanent: true,
+        source: '/apply/',
+        destination: 'https://apply.hackclub.com',
+        permanent: true
       },
       {
-        source: "/icons/",
-        destination: "https://icons.hackclub.com",
-        permanent: true,
+        source: '/icons/',
+        destination: 'https://icons.hackclub.com',
+        permanent: true
       },
       {
-        source: "/updates/",
+        source: '/updates/',
         destination:
-          "https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds",
-        permanent: false,
+          'https://www.youtube.com/playlist?list=PLbNbddgD-XxEC5-_KQTye6nFPBLtI_mds',
+        permanent: false
       },
       {
-        source: "/admin/",
+        source: '/admin/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/admin/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/admin/',
+        permanent: false
       },
       {
-        source: "/checkup/",
+        source: '/checkup/',
         destination:
-          "https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/",
-        permanent: false,
+          'https://5c8804a629a378000833619c--hackclub.netlify.com/checkup/',
+        permanent: false
       },
       {
-        source: "/workshops/",
-        destination: "https://workshops.hackclub.com/",
-        permanent: false,
+        source: '/workshops/',
+        destination: 'https://workshops.hackclub.com/',
+        permanent: false
       },
       {
-        source: "/workshops/([a-z_]+)/",
-        destination: "https://workshops.hackclub.com/$1/",
-        permanent: true,
+        source: '/workshops/([a-z_]+)/',
+        destination: 'https://workshops.hackclub.com/$1/',
+        permanent: true
       },
       {
-        source: "/jobs/creative-director/",
-        destination: "/jobs/brand-director/",
-        permanent: false,
+        source: '/jobs/creative-director/',
+        destination: '/jobs/brand-director/',
+        permanent: false
       },
       {
-        source: "/jobs/bank-ops-assistant/",
-        destination: "/jobs/bank-ops-associate/",
-        permanent: false,
+        source: '/jobs/bank-ops-assistant/',
+        destination: '/jobs/bank-ops-associate/',
+        permanent: false
       },
       {
-        source: "/jobs/vp-DonorEngagement/",
-        destination: "/jobs/vp-donor-engagement/",
-        permanent: false,
+        source: '/jobs/vp-DonorEngagement/',
+        destination: '/jobs/vp-donor-engagement/',
+        permanent: false
       },
       {
-        source: "/daysofservice/",
-        destination: "https://daysofservice.hackclub.com",
-        permanent: true,
-      },
-    ];
+        source: '/daysofservice/',
+        destination: 'https://daysofservice.hackclub.com',
+        permanent: true
+      }
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/v3/_next/:path*",
-        destination: "/_next/:path*",
+        source: '/v3/_next/:path*',
+        destination: '/_next/:path*'
       },
       {
-        source: "/workshops/_next/:path*",
-        destination: "https://workshops.hackclub.com/_next/:path*",
+        source: '/workshops/_next/:path*',
+        destination: 'https://workshops.hackclub.com/_next/:path*'
       },
       {
-        source: "/summer/_next/:path*",
-        destination: "https://summer.hackclub.com/_next/:path*",
+        source: '/summer/_next/:path*',
+        destination: 'https://summer.hackclub.com/_next/:path*'
       },
       {
-        source: "/sponsorship/",
-        destination: "/content/sponsorship/",
+        source: '/sponsorship/',
+        destination: '/content/sponsorship/'
       },
       {
-        source: "/covid19/",
-        destination: "/content/covid19/",
+        source: '/covid19/',
+        destination: '/content/covid19/'
       },
       {
-        source: "/it-admins/",
-        destination: "/content/it-admins/",
+        source: '/it-admins/',
+        destination: '/content/it-admins/'
       },
       {
-        source: "/sunsetting-som/",
-        destination: "/content/sunsetting-som/",
+        source: '/sunsetting-som/',
+        destination: '/content/sunsetting-som/'
       },
       {
-        source: "/banner/",
-        destination: "https://workshops.hackclub.com/banner/",
+        source: '/banner/',
+        destination: 'https://workshops.hackclub.com/banner/'
       },
       {
-        source: "/conduct/",
-        destination: "https://workshops.hackclub.com/conduct/",
+        source: '/conduct/',
+        destination: 'https://workshops.hackclub.com/conduct/'
       },
       {
-        source: "/workshop-bounty/",
-        destination: "https://workshops.hackclub.com/workshop-bounty/",
+        source: '/workshop-bounty/',
+        destination: 'https://workshops.hackclub.com/workshop-bounty/'
       },
       {
-        source: "/vip-newsletters/",
-        destination: "https://workshops.hackclub.com/vip-newsletters/",
+        source: '/vip-newsletters/',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/'
       },
       {
-        source: "/vip-newsletters/(.*)",
-        destination: "https://workshops.hackclub.com/vip-newsletters/$1",
+        source: '/vip-newsletters/(.*)',
+        destination: 'https://workshops.hackclub.com/vip-newsletters/$1'
       },
       {
-        source: "/newsletter/",
-        destination: "https://workshops.hackclub.com/newsletter/",
+        source: '/newsletter/',
+        destination: 'https://workshops.hackclub.com/newsletter/'
       },
       {
-        source: "/newsletter/(.*)",
-        destination: "https://workshops.hackclub.com/newsletter/$1",
+        source: '/newsletter/(.*)',
+        destination: 'https://workshops.hackclub.com/newsletter/$1'
       },
       {
-        source: "/transparency/may-2020/",
-        destination: "/content/transparency/may-2020/",
+        source: '/transparency/may-2020/',
+        destination: '/content/transparency/may-2020/'
       },
       {
-        source: "/map/",
-        destination: "https://map.hackclub.dev/",
+        source: '/map/',
+        destination: 'https://map.hackclub.dev/'
       },
       {
-        source: "/map/(.*)",
-        destination: "https://map.hackclub.dev/$1",
+        source: '/map/(.*)',
+        destination: 'https://map.hackclub.dev/$1'
       },
       {
-        source: "/how-to-organize-a-hackathon",
-        destination: "https://expandables.hackclub.dev/organizing.html",
+        source: '/how-to-organize-a-hackathon',
+        destination: 'https://expandables.hackclub.dev/organizing.html'
       },
       {
-        source: "/how-to-organize-a-hackathon/style.css",
-        destination: "https://expandables.hackclub.dev/style.css",
-      },
-    ];
+        source: '/how-to-organize-a-hackathon/style.css',
+        destination: 'https://expandables.hackclub.dev/style.css'
+      }
+    ]
   },
   async headers() {
     return [
       {
-        source: "/banners/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/banners/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/fonts/(.*)",
-        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+        source: '/fonts/(.*)',
+        headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }]
       },
       {
-        source: "/api/(.+)",
+        source: '/api/(.+)',
         headers: [
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET, POST, OPTIONS",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
           },
-          { key: "Access-Control-Allow-Headers", value: "Content-Type" },
-        ],
-      },
-    ];
-  },
-};
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
+}
 
-import million from "million/compiler";
-import withMDX from "@next/mdx";
-import withTM from "next-transpile-modules";
+import million from 'million/compiler'
+import withMDX from '@next/mdx'
+import withTM from 'next-transpile-modules'
 
-const withMDXConfig = withMDX({ extension: /\.mdx?$/ });
-const withAnimeJS = withTM(["animejs"]);
+const withMDXConfig = withMDX({ extension: /\.mdx?$/ })
+const withAnimeJS = withTM(['animejs'])
 
 export default million.next(withAnimeJS(withMDXConfig(nextConfig)), {
-  auto: true,
-});
+  auto: true
+})
diff --git a/pages/404.js b/pages/404.js
index 3c5beb44d..76bb77707 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,15 +1,15 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-import { Heading, Container, Button, Text, Image } from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import theme from "../lib/theme";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+import { Heading, Container, Button, Text, Image } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 // Credit for animation from https://codepen.io/igli/pen/mPMqGz?html-preprocessor=none
 const animation1 = keyframes`
@@ -76,7 +76,7 @@ const animation1 = keyframes`
   100% {
     clip: rect(95px, 9999px, 47px, 0);
   }
-`;
+`
 const animation2 = keyframes`
   0% {
     clip: rect(57px, 9999px, 7px, 0);
@@ -141,7 +141,7 @@ const animation2 = keyframes`
   100% {
     clip: rect(75px, 9999px, 13px, 0);
   }
-`;
+`
 
 const Blinking = styled(Heading)`
   position: relative;
@@ -149,7 +149,7 @@ const Blinking = styled(Heading)`
   line-height: 1;
   &:before,
   &:after {
-    content: "${(props) => props.children}";
+    content: '${props => props.children}';
     position: absolute;
     top: 0;
     color: ${theme.colors.smoke};
@@ -167,7 +167,7 @@ const Blinking = styled(Heading)`
     text-shadow: -2px 0 ${theme.colors.cyan};
     animation: ${animation2} 4s infinite linear alternate-reverse;
   }
-`;
+`
 
 const Spinning = styled(Image)`
   @keyframes spin {
@@ -184,16 +184,16 @@ const Spinning = styled(Image)`
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   aspect-ratio: 1;
-`;
+`
 
 const NotFoundPage = () => (
   <>
     <Meta as={Head} title="404" />
     <ForceTheme theme="dark" />
     <Nav color="primary" dark />
-    <Container variant="narrow" sx={{ py: [5, 6], textAlign: "center" }}>
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
       <Spinning
-        sx={{ fontSize: [128, 256], textAlign: "center", height: "1lh" }}
+        sx={{ fontSize: [128, 256], textAlign: 'center', height: '1lh' }}
         src="/404/dinobox.svg"
       ></Spinning>
       <br />
@@ -205,7 +205,7 @@ const NotFoundPage = () => (
         mb={4}
         color="muted"
         variant="lead"
-        sx={{ display: "block" }}
+        sx={{ display: 'block' }}
       >
         We&nbsp;couldn’t&nbsp;find&nbsp;that&nbsp;page.
       </Text>
@@ -218,6 +218,6 @@ const NotFoundPage = () => (
     </Container>
     <Footer dark />
   </>
-);
+)
 
-export default NotFoundPage;
+export default NotFoundPage
diff --git a/pages/_app.js b/pages/_app.js
index df22f2f22..366fa6b54 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,13 @@
-import React from "react";
-import Head from "next/head";
+import React from 'react'
+import Head from 'next/head'
 
-import Analytics from "../components/analytics.js";
+import Analytics from '../components/analytics.js'
 
-import Meta from "@hackclub/meta";
-import "@hackclub/theme/fonts/reg-bold.css";
-import theme from "../lib/theme";
-import { ThemeProvider } from "theme-ui";
-import { Provider as BalancerProvider } from "react-wrap-balancer";
+import Meta from '@hackclub/meta'
+import '@hackclub/theme/fonts/reg-bold.css'
+import theme from '../lib/theme'
+import { ThemeProvider } from 'theme-ui'
+import { Provider as BalancerProvider } from 'react-wrap-balancer'
 
 const App = ({ Component, pageProps }) => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = ({ Component, pageProps }) => (
     </BalancerProvider>
     <Analytics />
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App
diff --git a/pages/_document.js b/pages/_document.js
index 8f3797ea3..0004750b1 100755
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,33 +1,33 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 // import { InitializeColorMode } from 'theme-ui'
 
 const org = {
-  "@context": "http://schema.org",
-  "@type": "Organization",
-  name: "Hack Club",
-  url: "https://hackclub.com/",
-  logo: "https://hackclub.com/social.png",
+  '@context': 'http://schema.org',
+  '@type': 'Organization',
+  name: 'Hack Club',
+  url: 'https://hackclub.com/',
+  logo: 'https://hackclub.com/social.png',
   sameAs: [
-    "https://twitter.com/hackclub",
-    "https://github.com/hackclub",
-    "https://www.instagram.com/starthackclub",
-    "https://www.facebook.com/Hack-Club-741805665870458",
-    "https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w",
+    'https://twitter.com/hackclub',
+    'https://github.com/hackclub',
+    'https://www.instagram.com/starthackclub',
+    'https://www.facebook.com/Hack-Club-741805665870458',
+    'https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w'
   ],
   contactPoint: [
     {
-      "@type": "ContactPoint",
-      email: "team@hackclub.com",
-      contactType: "customer support",
-      url: "https://hackclub.com/",
-    },
-  ],
-};
+      '@type': 'ContactPoint',
+      email: 'team@hackclub.com',
+      contactType: 'customer support',
+      url: 'https://hackclub.com/'
+    }
+  ]
+}
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
@@ -46,8 +46,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/pages/amas/geohot.js b/pages/amas/geohot.js
index 5ff0170f9..bfc103d35 100644
--- a/pages/amas/geohot.js
+++ b/pages/amas/geohot.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Geohot() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-11-11T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#00FF15", "#00FF15"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#00FF15", "#00FF15"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#00FF15', '#00FF15'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#00FF15', '#00FF15'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#00FF15", "#00FF15"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#00FF15', '#00FF15'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,12 +143,12 @@ export default function Geohot() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#0f0f0f",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#0f0f0f',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -157,38 +157,38 @@ export default function Geohot() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Hackclub flag green"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-11-11T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-11-11T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#00FF15", "#00FF15"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#00FF15', '#00FF15'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -197,27 +197,27 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/geohotName.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="George Hotz"
           />
           <Image
             src={`/ama/geohotNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="George Hotz"
           />
 
@@ -226,12 +226,12 @@ export default function Geohot() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -239,20 +239,20 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#00FF15 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#00FF15 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#00FF15", "#00FF15"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#00FF15', '#00FF15'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to George Hotz and everyone for
@@ -263,11 +263,11 @@ export default function Geohot() {
                   as="a"
                   href="https://hack.af/geohot-livestream"
                   sx={{
-                    background: "#00FF15",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#00FF15',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -278,26 +278,26 @@ export default function Geohot() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -307,26 +307,26 @@ export default function Geohot() {
           ) : (
             <Box
               sx={{
-                color: "#f9fafc",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#f9fafc',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -337,12 +337,12 @@ export default function Geohot() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
-            zIndex: "-30",
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw'],
+            zIndex: '-30'
           }}
         >
           {timer.length ? (
@@ -350,7 +350,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
               <Image
@@ -358,7 +358,7 @@ export default function Geohot() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -367,7 +367,7 @@ export default function Geohot() {
               <Image
                 src={`/ama/geohot.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of George Hotz"
               />
             </>
@@ -379,13 +379,13 @@ export default function Geohot() {
           width={1500}
           height={750}
           sx={{
-            position: "absolute",
-            bottom: "5vw",
-            left: ["10vw", "20vw"],
-            zIndex: "-2000",
+            position: 'absolute',
+            bottom: '5vw',
+            left: ['10vw', '20vw'],
+            zIndex: '-2000'
           }}
         />
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/index.js b/pages/amas/index.js
index 2c60c939a..b670700f9 100644
--- a/pages/amas/index.js
+++ b/pages/amas/index.js
@@ -1,15 +1,15 @@
-import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import BGImg from "../../components/background-image";
-import NextLink from "next/link";
-import Image from "next/image";
-import Nav from "../../components/nav";
-import SlideDown from "../../components/slide-down";
-import Footer from "../../components/footer";
-import { dt } from "../../lib/dates";
-import Sal from "../../public/ama/sal.png";
+import { Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import BGImg from '../../components/background-image'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import Nav from '../../components/nav'
+import SlideDown from '../../components/slide-down'
+import Footer from '../../components/footer'
+import { dt } from '../../lib/dates'
+import Sal from '../../public/ama/sal.png'
 
 const Page = ({ upcoming, past }) => (
   <>
@@ -24,10 +24,10 @@ const Page = ({ upcoming, past }) => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -40,23 +40,23 @@ const Page = ({ upcoming, past }) => (
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ py: [5, 6], color: "white", textShadow: "text" }}
+        sx={{ py: [5, 6], color: 'white', textShadow: 'text' }}
       >
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           Lights, webcam…
         </Text>
         <Heading
           as="h1"
           variant="title"
-          sx={{ fontSize: [6, 8, 9], lineHeight: "limit" }}
+          sx={{ fontSize: [6, 8, 9], lineHeight: 'limit' }}
         >
           AMAs
         </Heading>
-        <Text as="p" variant="subtitle" sx={{ a: { color: "inherit" } }}>
+        <Text as="p" variant="subtitle" sx={{ a: { color: 'inherit' } }}>
           We call someone we’ve always wanted to talk to—and the entire
           Hack&nbsp;Club Slack community is invited to ask questions & chat with
           the guest live. No vetting questions. No endorsements. Conversations
-          are streamed live publicly on{" "}
+          are streamed live publicly on{' '}
           <Link href="https://www.youtube.com/c/HackClubHQ">YouTube</Link>.
         </Text>
         <Button
@@ -64,7 +64,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="/slack"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "black", bg: "white" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'black', bg: 'white' }}
         >
           Join Slack
         </Button>
@@ -73,7 +73,7 @@ const Page = ({ upcoming, past }) => (
           as="a"
           href="https://www.youtube.com/watch?v=O1J1pwGPQXY"
           target="_blank"
-          sx={{ mt: [3, 4], mx: [1, 2], color: "white", bg: "rgba(0,0,0,0.5)" }}
+          sx={{ mt: [3, 4], mx: [1, 2], color: 'white', bg: 'rgba(0,0,0,0.5)' }}
         >
           Watch our highlights
         </Button>
@@ -81,7 +81,7 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Box
       as="section"
-      sx={{ py: 5, bg: "dark", color: "white", textAlign: "center" }}
+      sx={{ py: 5, bg: 'dark', color: 'white', textAlign: 'center' }}
     >
       {upcoming.length > 0 && (
         <>
@@ -92,17 +92,15 @@ const Page = ({ upcoming, past }) => (
             variant="layout.container"
             sx={{
               py: 4,
-              flexWrap: "wrap",
-              placeContent: "center",
+              flexWrap: 'wrap',
+              placeContent: 'center'
             }}
           >
             {upcoming
               .sort((x, y) => {
-                return (
-                  new Date(y.start).getTime() - new Date(x.start).getTime()
-                );
+                return new Date(y.start).getTime() - new Date(x.start).getTime()
               })
-              .map((event) => (
+              .map(event => (
                 <Card
                   as="a"
                   href={`https://events.hackclub.com/${event.slug}`}
@@ -112,8 +110,8 @@ const Page = ({ upcoming, past }) => (
                     img: {
                       width: [96, 128],
                       height: [96, 128],
-                      borderRadius: "circle",
-                    },
+                      borderRadius: 'circle'
+                    }
                   }}
                   key={event.id}
                 >
@@ -124,7 +122,7 @@ const Page = ({ upcoming, past }) => (
                     alt={event.title}
                   />
                   <Heading as="h3" variant="subheadline" my={2}>
-                    {event.title.replace("AMA with ", "")}
+                    {event.title.replace('AMA with ', '')}
                   </Heading>
                   <Text as="p" variant="caption" mb={3}>
                     {dt(event.start)}
@@ -139,12 +137,12 @@ const Page = ({ upcoming, past }) => (
       )}
       <Link
         href="https://events.hackclub.com/"
-        sx={{ display: "block", px: 3, fontSize: [2, 3] }}
+        sx={{ display: 'block', px: 3, fontSize: [2, 3] }}
       >
         See all upcoming events »
       </Link>
     </Box>
-    <Box as="section" sx={{ py: 5, bg: "darker", textAlign: "center" }}>
+    <Box as="section" sx={{ py: 5, bg: 'darker', textAlign: 'center' }}>
       <Heading as="h2" variant="title" px={3} id="past-amas">
         Past AMAs
       </Heading>
@@ -152,22 +150,22 @@ const Page = ({ upcoming, past }) => (
         columns={[null, 2, 3]}
         gap={[3, 4]}
         variant="layout.container"
-        sx={{ pt: 4, textAlign: "left" }}
+        sx={{ pt: 4, textAlign: 'left' }}
       >
         {past
           .sort((x, y) => {
-            return new Date(y.start).getTime() - new Date(x.start).getTime();
+            return new Date(y.start).getTime() - new Date(x.start).getTime()
           })
-          .map((event) => (
+          .map(event => (
             <Card
-              as={event.youtube ? "a" : "section"}
+              as={event.youtube ? 'a' : 'section'}
               href={event.youtube}
               variant="interactive"
               sx={{
-                display: "flex",
-                alignItems: "center",
+                display: 'flex',
+                alignItems: 'center',
                 p: [0, 0],
-                img: { borderRadius: "extra" },
+                img: { borderRadius: 'extra' }
               }}
               key={event.id}
             >
@@ -179,7 +177,7 @@ const Page = ({ upcoming, past }) => (
               />
               <Box ml={3}>
                 <Heading as="h3" variant="subheadline" mb={1}>
-                  {event.title.replace("AMA with ", "")}
+                  {event.title.replace('AMA with ', '')}
                 </Heading>
                 <Text as="p" variant="caption" mb={2}>
                   {dt(event.start)}
@@ -196,22 +194,22 @@ const Page = ({ upcoming, past }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = async () => {
-  const { filter } = require("lodash");
-  let upcoming = [];
-  let past = [];
-  const d = (dt) => new Date(new Date(dt).toISOString().substring(0, 10));
-  const today = d(new Date());
-  await fetch("https://events.hackclub.com/api/amas")
-    .then((r) => r.json())
-    .then((events) => {
-      upcoming = filter(events, (e) => d(e.start) >= today);
-      past = filter(events, (e) => d(e.start) < today);
+  const { filter } = require('lodash')
+  let upcoming = []
+  let past = []
+  const d = dt => new Date(new Date(dt).toISOString().substring(0, 10))
+  const today = d(new Date())
+  await fetch('https://events.hackclub.com/api/amas')
+    .then(r => r.json())
+    .then(events => {
+      upcoming = filter(events, e => d(e.start) >= today)
+      past = filter(events, e => d(e.start) < today)
     })
-    .catch((e) => console.error(e, "Failed to fetch AMAs"));
-  return { props: { upcoming, past }, revalidate: 10 };
-};
+    .catch(e => console.error(e, 'Failed to fetch AMAs'))
+  return { props: { upcoming, past }, revalidate: 10 }
+}
diff --git a/pages/amas/sal.js b/pages/amas/sal.js
index b5171469b..699a31c38 100644
--- a/pages/amas/sal.js
+++ b/pages/amas/sal.js
@@ -1,133 +1,133 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import { thousands } from '../../lib/members'
 
 export default function Sal() {
-  let minutes = 1;
-  let milliseconds = minutes * 60000;
+  let minutes = 1
+  let milliseconds = minutes * 60000
 
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     setTimeout(function () {
-      window.location.reload();
-    }, milliseconds);
+      window.location.reload()
+    }, milliseconds)
   }
 
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-10-28T23:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#ffffff", "#ffffff"),
-          position: "relative",
-          width: "100%",
-          height: ["125%", "125%", "150%"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#14BF96", "#14BF96"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#ffffff', '#ffffff'),
+          position: 'relative',
+          width: '100%',
+          height: ['125%', '125%', '150%'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#14BF96', '#14BF96'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#14BF96", "#14BF96"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#14BF96', '#14BF96'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -143,57 +143,57 @@ export default function Sal() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
+          minHeight: '100vh',
+          width: '100vw',
           backgroundImage:
-            "url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
-          display: "flex",
-          alignItems: ["flex-start", "flex-start", "center"],
+            'url(https://cloud-72izs50b1-hack-club-bot.vercel.app/0sal_ama__4_.png)',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: ['flex-start', 'flex-start', 'center']
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
           <Image
             src={
-              "https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png"
+              'https://cloud-2pnucywiu-hack-club-bot.vercel.app/0group__8_.png'
             }
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Green Hack Club Flag"
           />
         </Link>
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid #14BF96",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid #14BF96',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-10-28T23:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-10-28T23:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#14BF96", "#14BF96"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#14BF96', '#14BF96'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -202,27 +202,27 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Sal Khan"
           />
           <Image
             src={`https://cloud-cvi8ihfcw-hack-club-bot.vercel.app/0vector__4_.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Sal Khan"
           />
 
@@ -231,13 +231,13 @@ export default function Sal() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -245,20 +245,20 @@ export default function Sal() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#FFFFFF 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#FFFFFF 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#ffffff", "#ffffff"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#ffffff', '#ffffff'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The livestream has ended. Thank you to everyone for joining us!
@@ -268,11 +268,11 @@ export default function Sal() {
                   as="a"
                   href="https://hack.af/sal-livestream"
                   sx={{
-                    background: "#14BF96",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#14BF96',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch recording
@@ -282,21 +282,21 @@ export default function Sal() {
           )}
           <Box
             sx={{
-              color: "#ffffff",
-              width: ["70vw", "60vw", "60vw"],
-              py: ["20px", "100px", "120px"],
-              zIndex: "2",
-              fontSize: ["12px", 1, 2],
-              "@media screen and (min-width: 768px) and (max-width: 1200px)": {
-                fontSize: "15px",
-              },
+              color: '#ffffff',
+              width: ['70vw', '60vw', '60vw'],
+              py: ['20px', '100px', '120px'],
+              zIndex: '2',
+              fontSize: ['12px', 1, 2],
+              '@media screen and (min-width: 768px) and (max-width: 1200px)': {
+                fontSize: '15px'
+              }
             }}
           >
             <Text>
-              <strong>Teenager? New here? Welcome!</strong>{" "}
+              <strong>Teenager? New here? Welcome!</strong>{' '}
               <Link href="https://hackclub.com" target="_blank" color="inherit">
                 Hack Club
-              </Link>{" "}
+              </Link>{' '}
               is a global community of high school makers & student-led coding
               clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+ teenagers
               learning to code & building amazing projects, & you’ll fit right
@@ -306,10 +306,10 @@ export default function Sal() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            width: ["100vw", "80vw", "70vw", "60vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            width: ['100vw', '80vw', '70vw', '60vw']
           }}
         >
           {timer.length ? (
@@ -318,7 +318,7 @@ export default function Sal() {
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 alt="Image of Sal Khan"
                 fill="object-positon"
-                sx={{ position: "absolute", bottom: 0 }}
+                sx={{ position: 'absolute', bottom: 0 }}
               />
             </>
           ) : (
@@ -326,7 +326,7 @@ export default function Sal() {
               <Image
                 src={`https://cloud-oik8els6y-hack-club-bot.vercel.app/0frame_54__1_.png`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Sal Khan"
               />
             </>
@@ -334,5 +334,5 @@ export default function Sal() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/amas/vitalik.js b/pages/amas/vitalik.js
index 22f639f2a..a69dc03b3 100644
--- a/pages/amas/vitalik.js
+++ b/pages/amas/vitalik.js
@@ -1,125 +1,125 @@
-import { Box, Button, Image, Grid, Text, Link } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import React, { useEffect, useState } from "react";
-import tt from "tinytime";
-import Particle from "../../components/particles";
-import { thousands } from "../../lib/members";
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../../components/particles'
+import { thousands } from '../../lib/members'
 
 export default function Vitalik() {
   const calculateTimeLeft = () => {
-    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date();
+    const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
 
-    let timeLeft = {};
+    let timeLeft = {}
 
     if (difference > 0) {
       timeLeft = {
         days: Math.floor(difference / (1000 * 60 * 60 * 24)),
         hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
         min: Math.floor((difference / 1000 / 60) % 60),
-        sec: Math.floor((difference / 1000) % 60),
-      };
+        sec: Math.floor((difference / 1000) % 60)
+      }
     }
 
-    return timeLeft;
-  };
+    return timeLeft
+  }
 
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  });
+    return () => clearTimeout(timer)
+  })
 
-  const timer = [];
+  const timer = []
 
-  Object.keys(timeLeft).forEach((e) => {
+  Object.keys(timeLeft).forEach(e => {
     if (!timeLeft[e]) {
-      if (e === "days") {
-        return;
-      } else if (e === "hours") {
-        if (!timeLeft["days"]) {
-          return;
+      if (e === 'days') {
+        return
+      } else if (e === 'hours') {
+        if (!timeLeft['days']) {
+          return
         }
-      } else if (e === "min") {
-        if (!timeLeft["days"] && !timeLeft["hours"]) {
-          return;
+      } else if (e === 'min') {
+        if (!timeLeft['days'] && !timeLeft['hours']) {
+          return
         }
       } else {
-        if (!timeLeft["days"] && !timeLeft["hours"] && !timeLeft["min"]) {
-          return;
+        if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+          return
         }
       }
     }
 
-    var name = "";
+    var name = ''
 
-    if (e === "days") {
+    if (e === 'days') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "day";
+        name = 'day'
       } else {
-        name = "days";
+        name = 'days'
       }
-    } else if (e === "hours") {
+    } else if (e === 'hours') {
       if (timeLeft[e] === 1 || timeLeft[e] === 0) {
-        name = "hour";
+        name = 'hour'
       } else {
-        name = "hours";
+        name = 'hours'
       }
-    } else if (e === "min") {
-      name = "min";
+    } else if (e === 'min') {
+      name = 'min'
     } else {
-      name = "sec";
+      name = 'sec'
     }
 
     timer.push(
       <Box
-        sx={(theme) => ({
-          color: "primary",
-          ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-          position: "relative",
-          width: ["16vw", "15vw", "15vw"],
-          height: ["15vh", "20vh", "35vh"],
-          borderRadius: "5px",
-          border: ["none", "1.5px solid"],
-          borderColor: theme.util.gxText("#CDAEFB", "#82A9F9"),
+        sx={theme => ({
+          color: 'primary',
+          ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+          position: 'relative',
+          width: ['16vw', '15vw', '15vw'],
+          height: ['15vh', '20vh', '35vh'],
+          borderRadius: '5px',
+          border: ['none', '1.5px solid'],
+          borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
           fontSize: [4, 5, 7],
-          fontWeight: "bold",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          fontWeight: 'bold',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center'
         })}
       >
         <Box>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9')
             })}
           >
-            {timeLeft[e]}{" "}
+            {timeLeft[e]}{' '}
           </Text>
           <Text
-            sx={(theme) => ({
-              color: "primary",
-              ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-              position: "relative",
+            sx={theme => ({
+              color: 'primary',
+              ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+              position: 'relative',
               fontSize: [1, 3, 4],
-              fontWeight: "bold",
-              display: "block",
-              pb: "15px",
+              fontWeight: 'bold',
+              display: 'block',
+              pb: '15px'
             })}
           >
             {name}
           </Text>
         </Box>
-      </Box>,
-    );
-  });
+      </Box>
+    )
+  })
 
   return (
     <>
@@ -135,12 +135,12 @@ export default function Vitalik() {
 
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100vw",
-          bg: "#222222",
-          position: "relative",
-          zIndex: "0",
-          overflow: "hidden",
+          minHeight: '100vh',
+          width: '100vw',
+          bg: '#222222',
+          position: 'relative',
+          zIndex: '0',
+          overflow: 'hidden'
         }}
       >
         <Link href="https://hackclub.com" target="_blank" color="inherit">
@@ -149,39 +149,39 @@ export default function Vitalik() {
             width={150}
             height={75}
             sx={{
-              position: "absolute",
-              top: "0",
-              left: ["10vw", "5vw"],
+              position: 'absolute',
+              top: '0',
+              left: ['10vw', '5vw']
             }}
             alt="Purple Ethereum logo"
           />
         </Link>
         <Particle />
         <Box>
-          <Box sx={{ position: "absolute", top: "10px", right: "5%" }}>
+          <Box sx={{ position: 'absolute', top: '10px', right: '5%' }}>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                 mt: [3, 4],
-                px: "10px",
-                py: "5px",
-                borderRadius: "5px",
-                border: "1px solid",
+                px: '10px',
+                py: '5px',
+                borderRadius: '5px',
+                border: '1px solid',
                 fontSize: [1, 2],
-                display: "block",
-                fontWeight: "bold",
+                display: 'block',
+                fontWeight: 'bold'
               })}
             >
-              {tt("{MM} {Do} {h}:{mm} {a}").render(
-                new Date(`2022-02-04T01:00:00.000Z`),
+              {tt('{MM} {Do} {h}:{mm} {a}').render(
+                new Date(`2022-02-04T01:00:00.000Z`)
               )}
             </Text>
             <Text
-              sx={(theme) => ({
-                color: "primary",
-                ...theme.util.gxText("#CDAEFB", "#82A9F9"),
-                display: "block",
+              sx={theme => ({
+                color: 'primary',
+                ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+                display: 'block'
               })}
             >
               in your local date/time
@@ -190,27 +190,27 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            p: ["15vh 20px 0 20px", "100px 50px 0 50px"],
-            height: "80%",
-            width: "90%",
-            bg: "transparent",
-            position: "relative",
-            left: "5%",
-            top: "10%",
+            p: ['15vh 20px 0 20px', '100px 50px 0 50px'],
+            height: '80%',
+            width: '90%',
+            bg: 'transparent',
+            position: 'relative',
+            left: '5%',
+            top: '10%'
           }}
         >
           <Image
             src={`/ama/vitalikName2.svg`}
             width={700}
             height={500}
-            sx={{ display: ["none", "block"], pb: "50px" }}
+            sx={{ display: ['none', 'block'], pb: '50px' }}
             alt="Vitalik Buterin"
           />
           <Image
             src={`/ama/vitalikNameMobile.svg`}
             width={250}
             height={200}
-            sx={{ display: ["block", "none"], pt: "20px", pb: "10px" }}
+            sx={{ display: ['block', 'none'], pt: '20px', pb: '10px' }}
             alt="Vitalik Buterin"
           />
 
@@ -219,12 +219,12 @@ export default function Vitalik() {
               key="{e}"
               gap={[1, 2, 4]}
               columns={[
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr",
-                "1fr 1fr 1fr 1fr 1fr",
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr',
+                '1fr 1fr 1fr 1fr 1fr'
               ]}
               sx={{
-                width: ["100%", "100%"],
+                width: ['100%', '100%']
               }}
             >
               {timer}
@@ -232,20 +232,20 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                border: ["none", "#CDAEFB 1.6px solid"],
-                my: ["30px", 0],
-                px: ["0px", "40px", "40px"],
-                py: ["0px", "40px", "40px"],
-                width: ["100%", "70%"],
-                borderRadius: "10px",
+                border: ['none', '#CDAEFB 1.6px solid'],
+                my: ['30px', 0],
+                px: ['0px', '40px', '40px'],
+                py: ['0px', '40px', '40px'],
+                width: ['100%', '70%'],
+                borderRadius: '10px'
               }}
             >
               <Text
-                sx={(theme) => ({
-                  color: "primary",
-                  ...theme.util.gxText("#CDAEFB", "#82A9F9"),
+                sx={theme => ({
+                  color: 'primary',
+                  ...theme.util.gxText('#CDAEFB', '#82A9F9'),
                   fontSize: [3, 4, 5],
-                  fontWeight: "bold",
+                  fontWeight: 'bold'
                 })}
               >
                 The AMA has ended. Thank you to Vitalik and everyone for joining
@@ -256,11 +256,11 @@ export default function Vitalik() {
                   as="a"
                   href="https://hack.af/vitalik-livestream"
                   sx={{
-                    background: "#CDAEFB",
-                    margin: ["10px", "15px"],
-                    marginLeft: "0",
-                    color: "#222222",
-                    display: "inline-block",
+                    background: '#CDAEFB',
+                    margin: ['10px', '15px'],
+                    marginLeft: '0',
+                    color: '#222222',
+                    display: 'inline-block'
                   }}
                 >
                   Watch Recording
@@ -271,26 +271,26 @@ export default function Vitalik() {
           {timer.length ? (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["25vw", "50vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["12px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['25vw', '50vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['12px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -300,26 +300,26 @@ export default function Vitalik() {
           ) : (
             <Box
               sx={{
-                color: "#82A9F9",
-                width: ["80vw", "50vw"],
-                pt: ["10px", "50px"],
-                zIndex: "2",
-                fontSize: ["15px", 1, 2],
-                "@media screen and (min-width: 768px) and (max-width: 1200px)":
+                color: '#82A9F9',
+                width: ['80vw', '50vw'],
+                pt: ['10px', '50px'],
+                zIndex: '2',
+                fontSize: ['15px', 1, 2],
+                '@media screen and (min-width: 768px) and (max-width: 1200px)':
                   {
-                    fontSize: "15px",
-                  },
+                    fontSize: '15px'
+                  }
               }}
             >
               <Text>
-                <strong>Teenager? New here? Welcome!</strong>{" "}
+                <strong>Teenager? New here? Welcome!</strong>{' '}
                 <Link
                   href="https://hackclub.com"
                   target="_blank"
                   color="inherit"
                 >
                   Hack Club
-                </Link>{" "}
+                </Link>{' '}
                 is a global community of high school makers & student-led coding
                 clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+
                 teenagers learning to code & building amazing projects, & you’ll
@@ -330,11 +330,11 @@ export default function Vitalik() {
         </Box>
         <Box
           sx={{
-            position: "absolute",
-            bottom: "0",
-            right: "0",
-            marginRight: ["-100px", "-50px", "-50px"],
-            width: ["100vw", "70vw", "40vw"],
+            position: 'absolute',
+            bottom: '0',
+            right: '0',
+            marginRight: ['-100px', '-50px', '-50px'],
+            width: ['100vw', '70vw', '40vw']
           }}
         >
           {timer.length ? (
@@ -342,7 +342,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
               <Image
@@ -350,7 +350,7 @@ export default function Vitalik() {
                 // layout="fill"
                 width={400}
                 height={400}
-                sx={{ display: ["block", "none"] }}
+                sx={{ display: ['block', 'none'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -359,7 +359,7 @@ export default function Vitalik() {
               <Image
                 src={`/ama/vitalikImage.svg`}
                 layout="responsive"
-                sx={{ display: ["none", "block"] }}
+                sx={{ display: ['none', 'block'] }}
                 alt="Image of Vitalik Buterin"
               />
             </>
@@ -367,5 +367,5 @@ export default function Vitalik() {
         </Box>
       </Box>
     </>
-  );
+  )
 }
diff --git a/pages/api/channels/dogs.js b/pages/api/channels/dogs.js
index 2ab771ee7..2fc68a235 100644
--- a/pages/api/channels/dogs.js
+++ b/pages/api/channels/dogs.js
@@ -1,13 +1,13 @@
 export default async function handler(req, res) {
   // returns a url_private for the latest image posted in #dogs
   const fileList = await fetch(
-    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`,
+    `https://slack.com/api/files.list?token=${process.env.SLACK_BOT_TOKEN}&channel=CDJV1CXC2&count=1`
   )
-    .then((r) => r.json())
-    .catch((err) => res.status(400).send(err));
+    .then(r => r.json())
+    .catch(err => res.status(400).send(err))
 
   const file = fileList.files
     ? fileList.files[0].url_private
-    : "https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab";
-  res.redirect(file);
+    : 'https://files.slack.com/files-pri/T0266FRGM-F01DYH13S1X/image_from_ios.jpg?pub_secret=132dcdb6ab'
+  res.redirect(file)
 }
diff --git a/pages/api/channels/resolve.js b/pages/api/channels/resolve.js
index 980e66895..c04e7758a 100644
--- a/pages/api/channels/resolve.js
+++ b/pages/api/channels/resolve.js
@@ -4,21 +4,21 @@ export default async function handler(req, res) {
     `https://slack.com/api/conversations.info?channel=${req.query.id}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`,
-      },
-    },
-  );
+        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`
+      }
+    }
+  )
 
   if (!channelDataReq.ok) {
-    console.warn(await channelDataReq.text());
-    return res.status(503).end();
+    console.warn(await channelDataReq.text())
+    return res.status(503).end()
   }
 
-  const channelData = await channelDataReq.json();
+  const channelData = await channelDataReq.json()
   if (!channelData.ok) {
-    console.warn(channelData);
-    return res.status(400).end();
+    console.warn(channelData)
+    return res.status(400).end()
   }
 
-  res.status(200).send({ name: channelData.channel.name });
+  res.status(200).send({ name: channelData.channel.name })
 }
diff --git a/pages/api/contribute.js b/pages/api/contribute.js
index d9c767b45..f5da5c351 100644
--- a/pages/api/contribute.js
+++ b/pages/api/contribute.js
@@ -1,11 +1,11 @@
-import { graphql } from "@octokit/graphql";
-import { createAppAuth } from "@octokit/auth-app";
+import { graphql } from '@octokit/graphql'
+import { createAppAuth } from '@octokit/auth-app'
 
 const auth = createAppAuth({
   appId: process.env.GITHUB_APP_ID,
   privateKey: process.env.GITHUB_PRIVATE_KEY,
-  installationId: process.env.GITHUB_INSTALLATION_ID,
-});
+  installationId: process.env.GITHUB_INSTALLATION_ID
+})
 
 export default async function handler(req, res) {
   const { organization } = await graphql(
@@ -65,11 +65,11 @@ export default async function handler(req, res) {
       }
     }`,
     {
-      login: "hackclub",
+      login: 'hackclub',
       request: {
-        hook: auth.hook,
-      },
-    },
-  );
-  res.status(200).json(organization);
+        hook: auth.hook
+      }
+    }
+  )
+  res.status(200).json(organization)
 }
diff --git a/pages/api/first-team.js b/pages/api/first-team.js
index 2d4e0f4d9..9c15fbb06 100644
--- a/pages/api/first-team.js
+++ b/pages/api/first-team.js
@@ -1,20 +1,20 @@
-import axios from "axios";
+import axios from 'axios'
 
 export default async function handler(req, res) {
   try {
     const { data } = await axios(
       `https://thebluealliance.com/api/v3/team/frc${encodeURIComponent(
-        req.query.teamNumber,
+        req.query.teamNumber
       )}`,
       {
         headers: {
-          "X-TBA-Auth-Key": process.env.TBA_API_KEY,
-        },
-      },
-    );
+          'X-TBA-Auth-Key': process.env.TBA_API_KEY
+        }
+      }
+    )
 
-    res.json(data);
+    res.json(data)
   } catch (e) {
-    res.status(404).json({ ok: false });
+    res.status(404).json({ ok: false })
   }
 }
diff --git a/pages/api/games.js b/pages/api/games.js
index 7c8c9ac5c..76f68f641 100644
--- a/pages/api/games.js
+++ b/pages/api/games.js
@@ -1,15 +1,15 @@
 export async function getGames() {
   let games = await fetch(
-    "https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json",
-  ).then((res) => res.json());
+    'https://raw.githubusercontent.com/hackclub/sprig/main/games/metadata.json'
+  ).then(res => res.json())
   games = games
     .sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn))
-    .slice(-4);
+    .slice(-4)
 
-  return games;
+  return games
 }
 
 export default async function Games(req, res) {
-  const games = await getGames();
-  res.json(games);
+  const games = await getGames()
+  res.json(games)
 }
diff --git a/pages/api/github.js b/pages/api/github.js
index 3d04de8df..978b713b6 100644
--- a/pages/api/github.js
+++ b/pages/api/github.js
@@ -1,40 +1,40 @@
-import { normalizeGitHubCommitUrl } from "../../lib/helpers";
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
 
-const isRelevantEventType = (type) =>
-  ["PushEvent", "PullRequestEvent", "WatchEvent"].includes(type);
+const isRelevantEventType = type =>
+  ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
 const getMessage = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
-      return payload.commits?.[0]?.message || "No commit message";
-    case "PullRequestEvent":
-      return payload.pull_request.title;
-    case "WatchEvent":
-      return `starred ${repo.name}`;
+    case 'PushEvent':
+      return payload.commits?.[0]?.message || 'No commit message'
+    case 'PullRequestEvent':
+      return payload.pull_request.title
+    case 'WatchEvent':
+      return `starred ${repo.name}`
     default:
-      return null;
+      return null
   }
-};
+}
 
 const getUrl = (type, payload, repo) => {
   switch (type) {
-    case "PushEvent":
+    case 'PushEvent':
       return payload.commits?.[0].url
         ? normalizeGitHubCommitUrl(payload.commits[0].url)
-        : "https://github.com/hackclub";
-    case "PullRequestEvent":
-      return payload.pull_request.html_url;
-    case "WatchEvent":
-      return `https://github.com/${repo.name}`;
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
     default:
-      return `https://github.com/hackclub`;
+      return `https://github.com/hackclub`
   }
-};
+}
 
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
-    "https://api.github.com/orgs/hackclub/events",
-  ).then((r) => r.json());
+    'https://api.github.com/orgs/hackclub/events'
+  ).then(r => r.json())
 
   const gitHubData = initialGitHubData
     .filter(({ type }) => isRelevantEventType(type))
@@ -44,13 +44,13 @@ export async function fetchGitHub() {
       userImage: actor.avatar_url,
       url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
-      time: created_at,
-    }));
+      time: created_at
+    }))
 
-  return gitHubData;
+  return gitHubData
 }
 
 export default async function github(req, res) {
-  const git = await fetchGitHub(req, res);
-  res.json(git);
+  const git = await fetchGitHub(req, res)
+  res.json(git)
 }
diff --git a/pages/api/hcb/apply.js b/pages/api/hcb/apply.js
index 150a79c56..a19a27fcd 100644
--- a/pages/api/hcb/apply.js
+++ b/pages/api/hcb/apply.js
@@ -1,67 +1,67 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
-        name: data.eventName,
+        name: data.eventName
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ""}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "First Name": data.firstName,
-          "Last Name": data.lastName,
-          "Email Address": data.userEmail,
-          "Phone Number": data.userPhone,
-          "Date of Birth": data.userBirthday,
-          "Event Name": data.eventName,
-          "Event Website": data.eventWebsite,
-          "Tell us about your event": data.eventDescription,
-          "Mailing Address": data.userAddress,
-          "Address Line 1": data.addressLine1,
+          'First Name': data.firstName,
+          'Last Name': data.lastName,
+          'Email Address': data.userEmail,
+          'Phone Number': data.userPhone,
+          'Date of Birth': data.userBirthday,
+          'Event Name': data.eventName,
+          'Event Website': data.eventWebsite,
+          'Tell us about your event': data.eventDescription,
+          'Mailing Address': data.userAddress,
+          'Address Line 1': data.addressLine1,
           City: data.addressCity,
           State: data.addressState,
-          "Zip Code": data.addressZip,
-          "Address Country": data.addressCountry,
-          "Address Country Code": data.addressCountryCode,
-          "Event Location": data.eventLocation,
-          "Event Country Code": data.eventCountryCode,
-          "Have you used HCB for any previous events?":
-            data.returningUser === "true"
-              ? "Yes, I have used HCB before"
-              : "No, first time!",
-          "How did you hear about HCB?": data.referredBy,
+          'Zip Code': data.addressZip,
+          'Address Country': data.addressCountry,
+          'Address Country Code': data.addressCountryCode,
+          'Event Location': data.eventLocation,
+          'Event Country Code': data.eventCountryCode,
+          'Have you used HCB for any previous events?':
+            data.returningUser === 'true'
+              ? 'Yes, I have used HCB before'
+              : 'No, first time!',
+          'How did you hear about HCB?': data.referredBy,
           Transparent:
-            data.transparent === "true" ? "Yes, please!" : "No, thanks.",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-          "Contact Option": data.contactOption,
-          "Slack Username": data.slackUsername,
-          Accommodations: data.accommodations,
-        });
-        res.writeHead(302, { Location: "/hcb/apply/success" }).end();
+            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+          'Contact Option': data.contactOption,
+          'Slack Username': data.slackUsername,
+          Accommodations: data.accommodations
+        })
+        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(error => {
+        console.error(error)
         res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`,
-        });
-      });
+          Location: `/hcb/apply?step=3&airtable-error=${error}`
+        })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/hcb/demo.js b/pages/api/hcb/demo.js
index aa0cf1b3a..f7b806bdd 100644
--- a/pages/api/hcb/demo.js
+++ b/pages/api/hcb/demo.js
@@ -1,47 +1,47 @@
 // 1. create a demo account on HCB and invite them to it
 // 2. add this demo account info to the Applications Table
 
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const applicationsTable = new AirtablePlus({
-  baseID: "apppALh5FEOKkhjLR",
+  baseID: 'apppALh5FEOKkhjLR',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "Events",
-});
+  tableName: 'Events'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = JSON.parse(req.body);
+  if (req.method === 'POST') {
+    const data = JSON.parse(req.body)
 
-    await fetch("https://hcb.hackclub.com/api/v1/events/create_demo", {
+    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
       body: JSON.stringify({
         email: data.userEmail,
         name: data.eventName,
-        category: data.eventCategory,
+        category: data.eventCategory
       }),
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`,
-      },
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
+      }
     })
-      .then((r) => r.json())
-      .then(async (r) => {
+      .then(r => r.json())
+      .then(async r => {
         await applicationsTable.create({
-          "Email Address": data.userEmail,
-          "Event Name": `${data.eventName} (${data.teamType} ${data.teamNumber})`,
-          Status: "Demo Account",
-          "HCB account URL": `https://hcb.hackclub.com/${r.slug}`,
-        });
+          'Email Address': data.userEmail,
+          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          Status: 'Demo Account',
+          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`
+        })
         res
           .status(200)
-          .json({ message: "Success! Check your email for next steps." });
+          .json({ message: 'Success! Check your email for next steps.' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/join.js b/pages/api/join.js
index 32e778e83..827f42cbc 100644
--- a/pages/api/join.js
+++ b/pages/api/join.js
@@ -1,98 +1,98 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "appaqcJtn33vb59Au",
-  tableName: "Join Requests",
-});
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
 
-async function postData(url = "", data = {}, headers = {}) {
+async function postData(url = '', data = {}, headers = {}) {
   const response = await fetch(url, {
-    method: "POST",
-    mode: "cors",
-    cache: "no-cache",
-    credentials: "same-origin",
+    method: 'POST',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
     headers: {
-      "Content-Type": "application/json",
-      ...headers,
+      'Content-Type': 'application/json',
+      ...headers
     },
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-    body: JSON.stringify(data),
-  });
-  return response.text();
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify(data)
+  })
+  return response.text()
 }
 
 export default async function handler(req, res) {
   switch (req.method) {
-    case "OPTIONS":
-      return res.status(200).send("YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.");
-    case "GET":
+    case 'OPTIONS':
+      return res.status(200).send('YIPPE YAY. YOU HAVE CLEARANCE TO PROCEED.')
+    case 'GET':
       return res
         .status(405)
-        .json({ error: "*GET outta here!* (Method not allowed, use POST)" });
-    case "PUT":
+        .json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+    case 'PUT':
       return res.status(405).json({
-        error: "*PUT that request away!* (Method not allowed, use POST)",
-      });
-    case "POST":
-      break;
+        error: '*PUT that request away!* (Method not allowed, use POST)'
+      })
+    case 'POST':
+      break
     default:
-      return res.status(405).json({ error: "Method not allowed, use POST" });
+      return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
 
-  const data = req.body || {};
-  const open = process.env.NEXT_PUBLIC_OPEN === "true";
-  const waitlist = !open;
-  const isAdult = data.educationLevel === "tertiary";
+  const data = req.body || {}
+  const open = process.env.NEXT_PUBLIC_OPEN === 'true'
+  const waitlist = !open
+  const isAdult = data.educationLevel === 'tertiary'
 
-  const secrets = (process.env.NAUGHTY || "").split(",");
+  const secrets = (process.env.NAUGHTY || '').split(',')
 
-  if (secrets.includes(req.headers["x-forwarded-for"])) {
+  if (secrets.includes(req.headers['x-forwarded-for'])) {
     return res.json({
-      status: "success",
-      message: "You’ve been invited to Slack!",
-    });
+      status: 'success',
+      message: 'You’ve been invited to Slack!'
+    })
   }
 
   const airtablePromise = joinTable.create({
-    "Full Name": data.name,
-    "Email Address": data.email,
+    'Full Name': data.name,
+    'Email Address': data.email,
     Student: !isAdult,
     Reason: data.reason,
     Invited: !waitlist,
-    Club: data.club ? data.club : "",
-    Event: data.event ? data.event : "",
-    IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-  });
+    Club: data.club ? data.club : '',
+    Event: data.event ? data.event : '',
+    IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+  })
 
   if (waitlist) {
     return res.json({
-      status: "success",
-      message: "Your request will be reviewed soon.",
-    });
+      status: 'success',
+      message: 'Your request will be reviewed soon.'
+    })
   }
 
   const slackPromise = postData(
-    "https://toriel.hackclub.com/slack-invite",
+    'https://toriel.hackclub.com/slack-invite',
     {
       email: data.email,
-      ip: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
       continent: data.continent,
       teen: !isAdult,
       educationLevel: data.educationLevel,
       reason: data.reason,
       event: data.event,
-      userAgent: req.headers["user-agent"],
+      userAgent: req.headers['user-agent']
     },
-    { authorization: `Bearer ${process.env.TORIEL_KEY}` },
-  );
+    { authorization: `Bearer ${process.env.TORIEL_KEY}` }
+  )
 
   Promise.all([airtablePromise, slackPromise])
     .then(() =>
-      res.json({ status: "success", message: "You’ve been invited to Slack!" }),
+      res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
-    .catch((error) => {
-      res.status(500).json({ error });
-    });
+    .catch(error => {
+      res.status(500).json({ error })
+    })
 }
diff --git a/pages/api/mailing-list.js b/pages/api/mailing-list.js
index 0d722cc7b..be1303c7f 100644
--- a/pages/api/mailing-list.js
+++ b/pages/api/mailing-list.js
@@ -1,20 +1,20 @@
 export default async function submit(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
-    const resp = await fetch("https://postal.hackclub.com/subscribe", {
-      method: "POST",
+    const resp = await fetch('https://postal.hackclub.com/subscribe', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
+        'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
         api_key: process.env.POSTAL_API_KEY,
         name: data.name,
         email: data.email,
         list: process.env.POSTAL_LIST_ID,
-        boolean: "true",
-      }).toString(),
-    }).then((r) => r.text());
-    res.json(resp);
+        boolean: 'true'
+      }).toString()
+    }).then(r => r.text())
+    res.json(resp)
   }
 }
diff --git a/pages/api/slack.js b/pages/api/slack.js
index 5cfba2713..34088a5f5 100644
--- a/pages/api/slack.js
+++ b/pages/api/slack.js
@@ -1,34 +1,34 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export async function Slack() {
   if (!process.env.SLACK_API_TOKEN)
-    return { error: "No Slack API token found!" };
+    return { error: 'No Slack API token found!' }
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  formData.append("token", process.env.SLACK_API_TOKEN);
-  formData.append("date_range", "30d");
+  formData.append('token', process.env.SLACK_API_TOKEN)
+  formData.append('date_range', '30d')
 
   let slackData = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: `--orpheus\r\nContent-Disposition: form-data; name="token"\r\n\r\n${process.env.SLACK_API_TOKEN}\r\n--orpheus\r\nContent-Disposition: form-data; name="date_range"\r\n\r\n30d\r\n--orpheus\r\nContent-Disposition: form-data;`,
       headers: {
-        "content-type": "multipart/form-data; boundary=orpheus",
-        cookie: process.env.SLACK_API_COOKIE,
-      },
-    },
-  ).then((r) => r.json());
+        'content-type': 'multipart/form-data; boundary=orpheus',
+        cookie: process.env.SLACK_API_COOKIE
+      }
+    }
+  ).then(r => r.json())
 
   if (!slackData || !slackData.stats) {
-    console.warn(`No slack data: ${JSON.stringify(slackData)}`);
-    return {};
+    console.warn(`No slack data: ${JSON.stringify(slackData)}`)
+    return {}
   } else {
-    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0];
+    return slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
   }
 }
 
 export default async function Slacky(req, res) {
-  res.status(200).json(await Slack());
+  res.status(200).json(await Slack())
 }
diff --git a/pages/api/sprig-console.js b/pages/api/sprig-console.js
index ec804ec3a..87da975b2 100644
--- a/pages/api/sprig-console.js
+++ b/pages/api/sprig-console.js
@@ -1,20 +1,20 @@
 export async function getConsoles() {
   let data = await fetch(
-    "https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests",
-  ).then((r) => r.json());
+    'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests'
+  ).then(r => r.json())
 
   function check(val) {
-    return val === "Pending" || val === "Approved";
+    return val === 'Pending' || val === 'Approved'
   }
 
   const consoleCount = data
-    ? data.filter((console) => check(console.fields.Status)).length
-    : 100; // arbitrary fallback number
+    ? data.filter(console => check(console.fields.Status)).length
+    : 100 // arbitrary fallback number
 
-  return consoleCount;
+  return consoleCount
 }
 
 export default async function SprigConsoles(req, res) {
-  const consoleCount = await getConsoles();
-  res.json(consoleCount);
+  const consoleCount = await getConsoles()
+  res.json(consoleCount)
 }
diff --git a/pages/api/stars.js b/pages/api/stars.js
index 5392940e9..af37486c7 100644
--- a/pages/api/stars.js
+++ b/pages/api/stars.js
@@ -1,17 +1,17 @@
-import { graphql } from "@octokit/graphql";
+import { graphql } from '@octokit/graphql'
 
 export async function fetchStars() {
   if (!process.env.GITHUB_TOKEN) {
     console.warn(
-      "Note - GITHUB_TOKEN not defined, stars will not be fetched from github",
-    );
+      'Note - GITHUB_TOKEN not defined, stars will not be fetched from github'
+    )
     return {
-      sprig: "?",
-      sinerider: "?",
-      sprigHardware: "?",
-      hackclub: "?",
-      hackathons: "?",
-    };
+      sprig: '?',
+      sinerider: '?',
+      sprigHardware: '?',
+      hackclub: '?',
+      hackathons: '?'
+    }
   }
   const { organization } = await graphql(
     `
@@ -37,13 +37,13 @@ export async function fetchStars() {
     `,
     {
       headers: {
-        authorization: `token ${process.env.GITHUB_TOKEN}`,
-      },
-    },
-  );
-  return organization;
+        authorization: `token ${process.env.GITHUB_TOKEN}`
+      }
+    }
+  )
+  return organization
 }
 
 export default async function Stars(req, res) {
-  res.status(200).json(await fetchStars());
+  res.status(200).json(await fetchStars())
 }
diff --git a/pages/api/stickers.js b/pages/api/stickers.js
index ac78f46a4..4d933a02c 100644
--- a/pages/api/stickers.js
+++ b/pages/api/stickers.js
@@ -1,89 +1,89 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const peopleTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "People",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'People'
+})
 const addressesTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,
-  baseID: "apptEEFG5HTfGQE7h",
-  tableName: "Addresses",
-});
+  baseID: 'apptEEFG5HTfGQE7h',
+  tableName: 'Addresses'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
-    const data = req.body;
+  if (req.method === 'POST') {
+    const data = req.body
 
     let personRecord = (
       await peopleTable.read({
-        filterByFormula: `{Email} = '${data.email}'`,
+        filterByFormula: `{Email} = '${data.email}'`
       })
-    )[0];
+    )[0]
     if (!personRecord) {
       personRecord = await peopleTable.create({
-        "Full Name": data.name,
-        Email: data.email,
-      });
+        'Full Name': data.name,
+        Email: data.email
+      })
     }
 
     let address = (
       await addressesTable.read({
-        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`,
+        filterByFormula: `AND({Email} = '${data.email}', {Is Valid?} = '1', {Club} = '')`
       })
-    )[0];
+    )[0]
 
     if (!address) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
     if (
       !(
-        address.fields["Street (First Line)"].toLowerCase() ===
+        address.fields['Street (First Line)'].toLowerCase() ===
         data.addressFirst.toLowerCase()
       )
     ) {
       address = await addressesTable.create({
-        "Street (First Line)": data.addressFirst,
-        "Street (Second Line)": data.addressSecond,
+        'Street (First Line)': data.addressFirst,
+        'Street (Second Line)': data.addressSecond,
         City: data.city,
-        "State/Province": data.state,
-        "Postal Code": data.zipCode,
+        'State/Province': data.state,
+        'Postal Code': data.zipCode,
         Country: data.country,
-        Person: [personRecord.id],
-      });
+        Person: [personRecord.id]
+      })
     }
 
-    const url = process.env.MAIL_MISSION_WEBHOOK;
+    const url = process.env.MAIL_MISSION_WEBHOOK
     const body = JSON.stringify({
       test: false,
-      scenarioRecordID: "recNDwjb7Zr04Szix",
+      scenarioRecordID: 'recNDwjb7Zr04Szix',
       receiverAddressRecordID: address.id,
-      missionNotes: "Requested via hackclub.com",
-    });
+      missionNotes: 'Requested via hackclub.com'
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((r) => {
-        res.json({ status: "success" });
+      .then(r => {
+        res.json({ status: 'success' })
+      })
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'error', error })
       })
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "error", error });
-      });
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/api/stuff.js b/pages/api/stuff.js
index f2d644840..6d5cd429a 100644
--- a/pages/api/stuff.js
+++ b/pages/api/stuff.js
@@ -1,25 +1,25 @@
-import FormData from "form-data";
+import FormData from 'form-data'
 
 export default async function stuff(req, res) {
-  const formData = new FormData();
+  const formData = new FormData()
 
   formData.append(
-    "token",
-    "xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624",
-  );
-  formData.append("date_range", "30d");
+    'token',
+    'xoxc-2210535565-1329510668482-3738018363764-a06090b7e70cef57099ae10c6d18f80013869ef9be48fcc389e5a40c90df2624'
+  )
+  formData.append('date_range', '30d')
 
   const data = await fetch(
-    "https://hackclub.slack.com/api/team.stats.timeSeries",
+    'https://hackclub.slack.com/api/team.stats.timeSeries',
     {
-      method: "POST",
+      method: 'POST',
       body: formData,
       headers: {
         Cookie:
-          "d=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D",
-      },
-    },
-  ).then((r) => r.json());
+          'd=xoxd-52SpoJa3LK%2BF%2FZA3OwTuxIhUHfsXCx%2Fq1hpcu1VdiH2OUhPuonSeXAYYGJefTNiJUZE8SjAIEfASlHsdYHeGkg%2FFZ584%2B7JbekY8Mz%2FbOEgEJxhGjRW7miVyqQvbPq3oQlSfwNoXb507TnD5VYOCLYUh3OuK2tc2GnfwC0MgPl9ZsAoDc1caaA%3D%3D'
+      }
+    }
+  ).then(r => r.json())
 
-  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0]);
+  res.json(data.stats.sort((a, b) => a.ds - b.ds).reverse()[0])
 }
diff --git a/pages/api/winter-rsvp.js b/pages/api/winter-rsvp.js
index bf694405d..e8a9a1a2e 100644
--- a/pages/api/winter-rsvp.js
+++ b/pages/api/winter-rsvp.js
@@ -1,36 +1,36 @@
-import AirtablePlus from "airtable-plus";
+import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
-  baseID: "app1o9tRo6XulLnsr",
+  baseID: 'app1o9tRo6XulLnsr',
   apiKey: process.env.AIRTABLE_API_KEY,
-  tableName: "rsvp",
-});
+  tableName: 'rsvp'
+})
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method === 'POST') {
     const rsvp = await airtable.create({
       Name: req.body.Name,
       Email: req.body.Email,
       Age: req.body.Age,
-      IP: req.headers["x-forwarded-for"] || req.socket.remoteAddress,
-    });
-    const url = process.env.WOM_SLACK_WEBHOOK_URL;
+      IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    })
+    const url = process.env.WOM_SLACK_WEBHOOK_URL
     const body = JSON.stringify({
-      rsvp,
-    });
+      rsvp
+    })
     fetch(url, {
       body,
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-      },
+        'Content-Type': 'application/json'
+      }
     })
-      .then((res) => res.status(200).json({ success: true }))
-      .catch((error) => {
-        console.error(error);
-        res.json({ status: "Something went wrong", error });
-      });
+      .then(res => res.status(200).json({ success: true }))
+      .catch(error => {
+        console.error(error)
+        res.json({ status: 'Something went wrong', error })
+      })
   } else {
-    res.status(405).json({ status: "error", error: "Must send POST request" });
+    res.status(405).json({ status: 'error', error: 'Must send POST request' })
   }
 }
diff --git a/pages/brand.js b/pages/brand.js
index 1f8c864d7..2774043cb 100644
--- a/pages/brand.js
+++ b/pages/brand.js
@@ -9,22 +9,22 @@ import {
   Image,
   Input,
   Link as A,
-  Text,
-} from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { startCase } from "lodash";
+  Text
+} from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { startCase } from 'lodash'
 
 export const Logo = ({ name }) => (
   <Card variant="sunken" sx={{ p: [3, 3] }}>
     <Image
       src={`https://assets.hackclub.com/${name}.svg`}
-      sx={{ width: "100%", height: 96, mb: 1 }}
+      sx={{ width: '100%', height: 96, mb: 1 }}
       alt={startCase(name)}
     />
     <Text
@@ -33,22 +33,22 @@ export const Logo = ({ name }) => (
       sx={{ fontSize: [2, 3], mt: 2, mb: 2 }}
     >
       {startCase(name)
-        .replace("Flag Orpheus", "Orpheus Flag –")
-        .replace("Bw", " (B/W)")
-        .replace("Hcb", "HCB")}
+        .replace('Flag Orpheus', 'Orpheus Flag –')
+        .replace('Bw', ' (B/W)')
+        .replace('Hcb', 'HCB')}
     </Text>
     <Grid
       columns="repeat(3, 1fr)"
       gap={3}
       sx={{
-        alignItems: "center",
+        alignItems: 'center',
         a: {
-          bg: "elevated",
-          color: "cyan",
-          boxShadow: "none",
+          bg: 'elevated',
+          color: 'cyan',
+          boxShadow: 'none',
           py: 1,
-          ":hover,:focus": { bg: "cyan", color: "white" },
-        },
+          ':hover,:focus': { bg: 'cyan', color: 'white' }
+        }
       }}
     >
       <Button as="a" href={`https://assets.hackclub.com/${name}.svg`}>
@@ -69,7 +69,7 @@ export const Logo = ({ name }) => (
       disabled
     />
   </Card>
-);
+)
 
 const HTML = ({ file, html }) => (
   <tr>
@@ -85,17 +85,17 @@ const HTML = ({ file, html }) => (
       </Text>
     </td>
   </tr>
-);
+)
 
 const ColorSwatch = ({ bg }) => (
   <Card
     sx={{
       bg,
-      color: "white",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
     }}
   >
     <Text variant="subheadline" sx={{ my: 0 }}>
@@ -103,7 +103,7 @@ const ColorSwatch = ({ bg }) => (
     </Text>
     <Text>{theme.colors[bg]}</Text>
   </Card>
-);
+)
 
 const Page = ({ css }) => (
   <>
@@ -118,18 +118,18 @@ const Page = ({ css }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Hack Club Brand
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Download HQ’s logos and preview our brand colors & font.
         </Heading>
       </Container>
@@ -137,24 +137,24 @@ const Page = ({ css }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading variant="headline">Logos</Heading>
       <Grid columns={[null, 2, 3]} gap={3}>
         {[
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone",
-          "flag-orpheus-top-bw",
-          "flag-orpheus-left-bw",
-          "flag-standalone-bw",
-          "icon-rounded",
-          "icon-square",
-          "icon-progress-rounded",
-          "icon-progress-square",
-        ].map((key) => (
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone',
+          'flag-orpheus-top-bw',
+          'flag-orpheus-left-bw',
+          'flag-standalone-bw',
+          'icon-rounded',
+          'icon-square',
+          'icon-progress-rounded',
+          'icon-progress-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -191,16 +191,16 @@ const Page = ({ css }) => (
       <Box
         as="table"
         sx={{
-          display: "block",
-          overflowX: "auto",
-          whiteSpace: "nowrap",
-          maxWidth: "100%",
-          "td:first-of-type": { pr: 3 },
+          display: 'block',
+          overflowX: 'auto',
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          'td:first-of-type': { pr: 3 },
           img: { maxWidth: 128 * 1.5 },
-          pre: { whiteSpace: "initial" },
+          pre: { whiteSpace: 'initial' }
         }}
       >
-        <Box as="thead" sx={{ display: "none" }}>
+        <Box as="thead" sx={{ display: 'none' }}>
           <tr>
             <th>Preview</th>
             <th>HTML code</th>
@@ -233,15 +233,15 @@ const Page = ({ css }) => (
       <Heading variant="headline">Colors</Heading>
       <Grid columns={[2, 4]} gap={3} mb={[4, 5]}>
         {[
-          "red",
-          "orange",
-          "yellow",
-          "green",
-          "cyan",
-          "blue",
-          "purple",
-          "muted",
-        ].map((key) => (
+          'red',
+          'orange',
+          'yellow',
+          'green',
+          'cyan',
+          'blue',
+          'purple',
+          'muted'
+        ].map(key => (
           <ColorSwatch key={key} bg={key} />
         ))}
       </Grid>
@@ -251,7 +251,7 @@ const Page = ({ css }) => (
         is our brand font.
       </Text>
       <Box as="details" mb={[4, 5]}>
-        <Text as="summary" sx={{ fontSize: 2, cursor: "default" }}>
+        <Text as="summary" sx={{ fontSize: 2, cursor: 'default' }}>
           Webfont CSS (for HQ sites only)
         </Text>
         <Text as="pre" variant="styles.pre">
@@ -260,20 +260,20 @@ const Page = ({ css }) => (
       </Box>
       <Heading variant="headline">Icons</Heading>
       <Text as="p" variant="subtitle" sx={{ mb: 3 }}>
-        We have a custom iconset, published as{" "}
+        We have a custom iconset, published as{' '}
         <A href="https://github.com/hackclub/icons">@hackclub/icons</A>.
       </Text>
-      <Flex sx={{ flexWrap: "wrap", svg: { fill: "muted", mr: 3, mb: 3 } }}>
+      <Flex sx={{ flexWrap: 'wrap', svg: { fill: 'muted', mr: 3, mb: 3 } }}>
         {[
-          "clubs",
-          "bank-circle",
-          "event-code",
-          "home",
-          "transactions",
-          "bolt",
-          "photo",
-          "emoji",
-        ].map((k) => (
+          'clubs',
+          'bank-circle',
+          'event-code',
+          'home',
+          'transactions',
+          'bolt',
+          'photo',
+          'emoji'
+        ].map(k => (
           <Icon glyph={k} key={k} size={64} />
         ))}
       </Flex>
@@ -318,15 +318,15 @@ const Page = ({ css }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export const getStaticProps = () => {
-  const fs = require("fs");
+  const fs = require('fs')
   const css = fs.readFileSync(
-    "./node_modules/@hackclub/theme/fonts/reg-ital-bold.css",
-    "utf8",
-  );
-  return { props: { css } };
-};
+    './node_modules/@hackclub/theme/fonts/reg-ital-bold.css',
+    'utf8'
+  )
+  return { props: { css } }
+}
diff --git a/pages/clubs.js b/pages/clubs.js
index 5be7488ac..70e3d1551 100644
--- a/pages/clubs.js
+++ b/pages/clubs.js
@@ -8,25 +8,25 @@ import {
   Image,
   Badge,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Head from "next/head";
-import NextLink from "next/link";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import Icon from "../components/icon";
-import BGImg from "../components/background-image";
-import ForceTheme from "../components/force-theme";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Photo from "../components/photo";
-import Footer from "../components/footer";
-import FooterImgFile from "../public/home/footer.png";
-import AssembleImgFile from "../public/home/assemble.jpg";
-import Slack from "../components/slack";
-import Announcement from "../components/announcement";
-import Stage from "../components/stage";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import BGImg from '../components/background-image'
+import ForceTheme from '../components/force-theme'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Photo from '../components/photo'
+import Footer from '../components/footer'
+import FooterImgFile from '../public/home/footer.png'
+import AssembleImgFile from '../public/home/assemble.jpg'
+import Slack from '../components/slack'
+import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 
 let Highlight = styled(Text)`
   color: inherit;
@@ -37,41 +37,41 @@ let Highlight = styled(Text)`
     rgba(250, 247, 133, 0.66) 95%,
     rgba(250, 247, 133, 0.1)
   );
-`;
-Highlight = Highlight.withComponent("mark");
+`
+Highlight = Highlight.withComponent('mark')
 
 const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
   <Box
     sx={{
-      display: "grid",
+      display: 'grid',
       gridGap: [0, 4],
-      gridTemplateColumns: [null, "auto 1fr"],
-      alignItems: "start",
-      justifyContent: "start",
-      bg: "rgba(224, 230, 237, 0.25)",
+      gridTemplateColumns: [null, 'auto 1fr'],
+      alignItems: 'start',
+      justifyContent: 'start',
+      bg: 'rgba(224, 230, 237, 0.25)',
       p: [3, 4],
       mt: [1, 1],
-      borderRadius: "extra",
-      span: { transform: "none", width: "min-intrinsic" },
-      svg: { color: "white" },
-      ...sx,
+      borderRadius: 'extra',
+      span: { transform: 'none', width: 'min-intrinsic' },
+      svg: { color: 'white' },
+      ...sx
     }}
   >
     {children || (
       <Box
         as="span"
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           bg: color,
           borderRadius: 18,
           lineHeight: 0,
           p: 2,
           mb: 1,
-          display: "inline-block",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
           boxShadow:
-            "inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)",
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
         }}
       >
         <Icon glyph={icon} size={48} />
@@ -84,13 +84,13 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
       <Text
         as="p"
         variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: "styles.a", color: "blue" } }}
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
       >
         {desc}
       </Text>
     </Box>
   </Box>
-);
+)
 
 const Page = () => (
   <>
@@ -112,12 +112,12 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "dark",
+        bg: 'dark',
         pt: [5, 6],
         pb: [2, 3],
-        textAlign: "center",
-        position: "relative",
-        overflow: "hidden",
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -138,33 +138,33 @@ const Page = () => (
           as="h1"
           variant="ultratitle"
           sx={{
-            color: "white",
-            textShadow: "text",
-            filter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            WebkitFilter: "drop-shadow(0 -2px 4px rgba(0,0,0,0.5))",
-            maxWidth: [null, "copyUltra"],
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
             my: [3, 4],
-            mx: "auto",
-            zIndex: 1,
+            mx: 'auto',
+            zIndex: 1
           }}
         >
           <Text
             as="span"
             sx={{
               lineHeight: 0.875,
-              display: "block",
-              pb: 3,
+              display: 'block',
+              pb: 3
             }}
           >
             Don’t run your coding&nbsp;club alone.
           </Text>
-          Make it a{" "}
+          Make it a{' '}
           <Text
             as="span"
             sx={{
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
             }}
           >
             Hack&nbsp;Club
@@ -177,12 +177,12 @@ const Page = () => (
           as="p"
           variant="lead"
           sx={{
-            color: "white",
-            textShadow: "text",
+            color: 'white',
+            textShadow: 'text',
             maxWidth: 620,
             mt: 0,
-            mx: "auto",
-            mb: [3, 4],
+            mx: 'auto',
+            mb: [3, 4]
           }}
         >
           Hack Club is a nonprofit network of high school coding&nbsp;clubs and
@@ -203,9 +203,9 @@ const Page = () => (
             variant="ctaLg"
             href="/slack"
             sx={{
-              backgroundImage: (t) => t.util.gx("green", "blue"),
+              backgroundImage: t => t.util.gx('green', 'blue'),
               ml: [0, 3],
-              mt: [3, 0],
+              mt: [3, 0]
             }}
           >
             Join the Slack
@@ -214,10 +214,10 @@ const Page = () => (
       </FadeIn>
       <Box
         sx={{
-          display: "flex",
-          justifyContent: ["center", "center", "flex-end"],
+          display: 'flex',
+          justifyContent: ['center', 'center', 'flex-end'],
           marginRight: 2,
-          mt: [2, 2, 1],
+          mt: [2, 2, 1]
         }}
       >
         <Badge
@@ -225,14 +225,14 @@ const Page = () => (
           href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
           variant="pill"
           sx={{
-            zIndex: "1",
-            bg: "#000",
-            color: "white",
+            zIndex: '1',
+            bg: '#000',
+            color: 'white',
             opacity: 0.5,
-            textDecoration: "none",
-            fontWeight: "normal",
-            ":hover": { opacity: 1 },
-            transition: "0.3s ease",
+            textDecoration: 'none',
+            fontWeight: 'normal',
+            ':hover': { opacity: 1 },
+            transition: '0.3s ease'
           }}
           title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
         >
@@ -240,29 +240,29 @@ const Page = () => (
         </Badge>
       </Box>
     </Box>
-    <Box as="section" sx={{ py: [4, 5], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
       <Container>
         <Text as="p" variant="eyebrow">
           The rundown
         </Text>
         <Heading as="h2" variant="title">
-          Clubs discovering the{" "}
+          Clubs discovering the{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               mx: [-2, 0],
-              whiteSpace: "nowrap",
-              color: "#5d114c",
-              bg: "rgb(255, 212, 64)",
+              whiteSpace: 'nowrap',
+              color: '#5d114c',
+              bg: 'rgb(255, 212, 64)'
             }}
           >
             joy of code
           </Text>
           .
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
           Hack Clubs typically meet for 1 hour each week in high schools,
           makerspaces, community centers, churches, and any other venue where
           teenagers can gather. As a club leader, you get members (mostly
@@ -270,7 +270,7 @@ const Page = () => (
           their own pace, building websites, apps, & games, and presenting them
           at the end.
         </Text>
-        <Grid columns={[null, null, 2, "3fr 2fr"]} gap={[3, 4]} pt={[3, 3]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
           <Photo
             src="https://cloud-5pdwvchgm-hack-club-bot.vercel.app/05851864a.jpg"
             alt="Summer Creek Hack Club meeting, February 2020"
@@ -286,15 +286,15 @@ const Page = () => (
                 width: 36,
                 height: 36,
                 borderRadius: 24,
-                display: "inline-block",
+                display: 'inline-block',
                 fontSize: 2,
-                lineHeight: "30px",
-                textAlign: "center",
-                fontWeight: "bold",
-                border: "3px solid currentColor",
+                lineHeight: '30px',
+                textAlign: 'center',
+                fontWeight: 'bold',
+                border: '3px solid currentColor'
               },
               p: { my: 0 },
-              strong: { display: "block" },
+              strong: { display: 'block' }
             }}
           >
             <Text as="span" color="green">
@@ -313,10 +313,10 @@ const Page = () => (
             <Text
               as="p"
               variant="subtitle"
-              sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+              sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
             >
               <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts, being creative and{" "}
+              bank accounts, being creative and{' '}
               <Link href="/ship">making something awesome</Link>.
             </Text>
             <Text as="span" color="blue">
@@ -330,9 +330,9 @@ const Page = () => (
           </Grid>
         </Grid>
         <Grid
-          columns={[null, "1fr 2fr"]}
+          columns={[null, '1fr 2fr']}
           mt={[3, 5]}
-          sx={{ maxWidth: "copyUltra", mx: "auto" }}
+          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
         >
           <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
             Go beyond club meetings.
@@ -340,22 +340,22 @@ const Page = () => (
           <Text
             as="p"
             variant="lead"
-            sx={{ mt: 0, a: { variant: "styles.a", color: "blue" } }}
+            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
           >
-            Hack Clubs attend and run{" "}
+            Hack Clubs attend and run{' '}
             <NextLink href="/hackathons" passHref>
               <a>hackathons</a>
-            </NextLink>{" "}
-            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{" "}
-            &{" "}
+            </NextLink>{' '}
+            like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
+            &{' '}
             <a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
               Hack the Fog
             </a>
-            , run summer programs like{" "}
+            , run summer programs like{' '}
             <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
               Hack Camp
             </a>
-            , and compete in events like the{" "}
+            , and compete in events like the{' '}
             <a href="http://www.congressionalappchallenge.us">
               Congressional App Challenge
             </a>
@@ -368,12 +368,12 @@ const Page = () => (
       as="section"
       sx={{
         py: 6,
-        bg: "dark",
-        color: "white",
-        "h2,p": { textShadow: "text" },
-        textAlign: [null, "center"],
-        position: "relative",
-        overflow: "hidden",
+        bg: 'dark',
+        color: 'white',
+        'h2,p': { textShadow: 'text' },
+        textAlign: [null, 'center'],
+        position: 'relative',
+        overflow: 'hidden'
       }}
     >
       <BGImg
@@ -384,17 +384,17 @@ const Page = () => (
         alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
       />
       <Container>
-        <Text as="p" variant="eyebrow" sx={{ color: "white", opacity: 0.75 }}>
+        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
           ~ Welcome to Hackerland ~
         </Text>
         <Heading as="h2" variant="title">
           By the students, for the students.
         </Heading>
-        <Text as="p" variant="lead" sx={{ maxWidth: "copyPlus", mx: "auto" }}>
+        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
           Learning to code is like gaining a superpower — turning you from a
           consumer of technology into a creator. It shouldn’t be taught like a
           class — it should be a creative, inclusive space. To foster this
-          environment,{" "}
+          environment,{' '}
           <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
           members make self-directed projects.
         </Text>
@@ -403,7 +403,7 @@ const Page = () => (
             as="a"
             variant="ctaLg"
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)'
             }}
           >
             Our philosophy →
@@ -411,29 +411,29 @@ const Page = () => (
         </NextLink>
       </Container>
     </Box>
-    <Box as="section" sx={{ py: [4, 5, 6], color: "black" }}>
+    <Box as="section" sx={{ py: [4, 5, 6], color: 'black' }}>
       <Container
         sx={{
-          maxWidth: [null, "copyUltra"],
-          svg: { filter: "drop-shadow(0 2px 3px rgba(0,0,0,.125))" },
+          maxWidth: [null, 'copyUltra'],
+          svg: { filter: 'drop-shadow(0 2px 3px rgba(0,0,0,.125))' }
         }}
       >
-        <Box as="header" sx={{ textAlign: [null, "center"], pb: [4, 5] }}>
+        <Box as="header" sx={{ textAlign: [null, 'center'], pb: [4, 5] }}>
           <Text as="p" variant="eyebrow">
             Hit the ground running
           </Text>
           <Heading as="h2" variant="title">
-            Get your club{" "}
+            Get your club{' '}
             <Text
               as="span"
               sx={{
-                borderRadius: "default",
+                borderRadius: 'default',
                 px: 2,
                 mx: [-2, 0],
-                bg: "rgb(91, 255, 205)",
-                color: "#095365",
-                display: "inline-block",
-                whiteSpace: ["wrap", "nowrap"],
+                bg: 'rgb(91, 255, 205)',
+                color: '#095365',
+                display: 'inline-block',
+                whiteSpace: ['wrap', 'nowrap']
               }}
             >
               going & growing
@@ -444,7 +444,7 @@ const Page = () => (
         <Grid
           columns={[null, 1]}
           gap={[2, 3]}
-          sx={{ alignItems: "end", span: { color: "white" } }}
+          sx={{ alignItems: 'end', span: { color: 'white' } }}
         >
           <Feature
             icon="slack-fill"
@@ -464,7 +464,7 @@ const Page = () => (
             name="Tools to hack on"
             desc={
               <>
-                We build tools, such as{" "}
+                We build tools, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>, that your
                 members can use to make projects with in meetings! Built more of
                 them with us in our <Link href="/slack">Slack community</Link>.
@@ -477,7 +477,7 @@ const Page = () => (
             name="Meeting content"
             desc={
               <>
-                Come prepared to every meeting with over 100{" "}
+                Come prepared to every meeting with over 100{' '}
                 <a href="https://workshops.hackclub.com">workshops</a> (3 years’
                 worth!) that guide your club members through making fun,
                 creative projects.
@@ -519,7 +519,7 @@ const Page = () => (
             name="A nonprofit fund"
             desc={
               <>
-                Use our 501(c)(3) status and a restricted fund with{" "}
+                Use our 501(c)(3) status and a restricted fund with{' '}
                 <Link href="/hcb">HCB</Link> to fundraise, accept donations, and
                 buy things!
               </>
@@ -529,9 +529,9 @@ const Page = () => (
             name="Weekly events"
             desc={
               <>
-                From <Link href="/night">Hack Night</Link> to{" "}
+                From <Link href="/night">Hack Night</Link> to{' '}
                 <Link href="/amas">AMAs</Link>
-                {" to "}
+                {' to '}
                 <a href="https://twitter.com/hackclub/status/1300494921997193217?s=21">
                   weirder events
                 </a>
@@ -548,7 +548,7 @@ const Page = () => (
             name="A basket of free tools"
             desc={
               <>
-                We're always building new tools for leaders, such as{" "}
+                We're always building new tools for leaders, such as{' '}
                 <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                 free subscriptions to Figma Pro, Postman, and more for running a
                 great club.
@@ -569,7 +569,7 @@ const Page = () => (
           desc={
             <>
               When established CS clubs join, they get all the Hack&nbsp;Club
-              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{" "}
+              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
               <a href="https://workshops.hackclub.com/">workshops</a>, the
               works. They’re welcome to use the “Hack&nbsp;Club” name or keep
               their existing one.
@@ -577,38 +577,38 @@ const Page = () => (
           }
           as="aside"
           sx={{
-            display: "grid",
+            display: 'grid',
             gridGap: [0, 4],
-            gridTemplateColumns: [null, "auto 1fr"],
-            alignItems: "start",
-            justifyContent: "start",
-            bg: "rgba(255,88,88,0.125)",
+            gridTemplateColumns: [null, 'auto 1fr'],
+            alignItems: 'start',
+            justifyContent: 'start',
+            bg: 'rgba(255,88,88,0.125)',
             p: [3, 4],
             mt: [3, 4],
-            borderRadius: "extra",
-            span: { transform: "none", width: "min-intrinsic" },
-            svg: { color: "white" },
+            borderRadius: 'extra',
+            span: { transform: 'none', width: 'min-intrinsic' },
+            svg: { color: 'white' }
           }}
         />
       </Container>
     </Box>
     <Slack />
     <Box bg="snow" color="black" py={[5, 6]}>
-      <Container sx={{ textAlign: ["left", "center"] }}>
+      <Container sx={{ textAlign: ['left', 'center'] }}>
         <Text as="p" variant="eyebrow">
           Next steps
         </Text>
         <Heading as="h2" variant="title">
-          Apply today to{" "}
+          Apply today to{' '}
           <Text
             as="span"
             sx={{
-              borderRadius: "default",
+              borderRadius: 'default',
               px: 2,
               ml: [-2, 0],
-              whiteSpace: ["wrap", "nowrap"],
-              color: "white",
-              bg: "#6f31b7",
+              whiteSpace: ['wrap', 'nowrap'],
+              color: 'white',
+              bg: '#6f31b7'
             }}
           >
             start your club
@@ -624,18 +624,18 @@ const Page = () => (
           gap={[4, 3, 4]}
           columns={[null, 3]}
           sx={{
-            textAlign: "left",
-            "> a, > div": {
-              borderRadius: "extra",
-              boxShadow: "elevated",
+            textAlign: 'left',
+            '> a, > div': {
+              borderRadius: 'extra',
+              boxShadow: 'elevated',
               px: [3, null, 4],
-              py: [4, null, 5],
+              py: [4, null, 5]
             },
             span: {
               boxShadow:
-                "-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)",
+                '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
             },
-            svg: { fill: "currentColor" },
+            svg: { fill: 'currentColor' }
           }}
         >
           <Card
@@ -644,9 +644,9 @@ const Page = () => (
             variant="interactive"
             sx={{
               background:
-                "linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(51, 142, 218)" },
+                'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(51, 142, 218)' }
             }}
           >
             <Stage
@@ -659,9 +659,9 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)",
-              color: "white",
-              svg: { color: "rgb(236, 55, 80)" },
+                'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+              color: 'white',
+              svg: { color: 'rgb(236, 55, 80)' }
             }}
           >
             <Stage
@@ -673,9 +673,9 @@ const Page = () => (
           </Card>
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)",
-              color: "white",
-              svg: { color: "#fb558e" },
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+              color: 'white',
+              svg: { color: '#fb558e' }
             }}
           >
             <Stage
@@ -700,16 +700,16 @@ const Page = () => (
     <Footer
       dark
       sx={{
-        backgroundColor: "dark",
-        position: "relative",
-        overflow: "hidden",
-        textShadow: "0 1px 2px rgba(0,0,0,0.375)",
-        "h2,span,p,a": { color: "white !important" },
-        "> div img": { objectPosition: ["left", "center"] },
+        backgroundColor: 'dark',
+        position: 'relative',
+        overflow: 'hidden',
+        textShadow: '0 1px 2px rgba(0,0,0,0.375)',
+        'h2,span,p,a': { color: 'white !important' },
+        '> div img': { objectPosition: ['left', 'center'] },
         svg: {
-          fill: "white",
-          filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))",
-        },
+          fill: 'white',
+          filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
+        }
       }}
     >
       <BGImg
@@ -727,6 +727,6 @@ const Page = () => (
       </style>
     </Footer>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/content/covid19.mdx b/pages/content/covid19.mdx
index 3c8252f91..e1aae2d1c 100644
--- a/pages/content/covid19.mdx
+++ b/pages/content/covid19.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../components/letterhead";
+import Letterhead from '../../components/letterhead'
 
 <Letterhead
 title="COVID-19"
diff --git a/pages/content/it-admins.mdx b/pages/content/it-admins.mdx
index 2e4b08c37..ae426b47f 100644
--- a/pages/content/it-admins.mdx
+++ b/pages/content/it-admins.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Hack Club for IT Administrators"
diff --git a/pages/content/sponsorship.mdx b/pages/content/sponsorship.mdx
index 8272daf9f..0a7d191b4 100644
--- a/pages/content/sponsorship.mdx
+++ b/pages/content/sponsorship.mdx
@@ -1,5 +1,5 @@
-import Letterhead from "../../components/letterhead";
-import Announcement from "../../components/announcement";
+import Letterhead from '../../components/letterhead'
+import Announcement from '../../components/announcement'
 
 <Letterhead
 title="Sponsorship"
@@ -15,11 +15,11 @@ path="sponsorship.mdx">
   iconLeft="event-code"
   color="primary"
   sx={{
-    maxWidth: "container",
-    mx: "0",
-    mt: "0",
-    background: "#f9fafc !important",
-    boxShadow: "0 4px 8px rgb(0 0 0 / 13%)",
+    maxWidth: 'container',
+    mx: '0',
+    mt: '0',
+    background: '#f9fafc !important',
+    boxShadow: '0 4px 8px rgb(0 0 0 / 13%)'
   }}
 />
 
diff --git a/pages/content/sunsetting-som.mdx b/pages/content/sunsetting-som.mdx
index 948e04e81..cd0b91ab4 100644
--- a/pages/content/sunsetting-som.mdx
+++ b/pages/content/sunsetting-som.mdx
@@ -1,7 +1,7 @@
-import Letterhead from "../../components/letterhead";
-import Link from "next/link";
-import { memo, useState, useEffect } from "react";
-import StaticMention from "../../components/mention";
+import Letterhead from '../../components/letterhead'
+import Link from 'next/link'
+import { memo, useState, useEffect } from 'react'
+import StaticMention from '../../components/mention'
 
 <Letterhead
 title="The Sun Sets on the Summer of Making"
diff --git a/pages/content/transparency/may-2020.mdx b/pages/content/transparency/may-2020.mdx
index c149a1d59..963b70fc1 100644
--- a/pages/content/transparency/may-2020.mdx
+++ b/pages/content/transparency/may-2020.mdx
@@ -1,4 +1,4 @@
-import Letterhead from "../../../components/letterhead";
+import Letterhead from '../../../components/letterhead'
 
 <Letterhead
 title="May 2020 Transparency Update"
diff --git a/pages/deprecated/[deprecated].js b/pages/deprecated/[deprecated].js
index 0edc81501..27b5c28b3 100644
--- a/pages/deprecated/[deprecated].js
+++ b/pages/deprecated/[deprecated].js
@@ -1,10 +1,10 @@
-import { Box, Button, Container, Heading, Text } from "theme-ui";
-import theme from "@hackclub/theme";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
+import { Box, Button, Container, Heading, Text } from 'theme-ui'
+import theme from '@hackclub/theme'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
 
 const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
   <>
@@ -14,22 +14,22 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
       title={name}
       desc={`Hack Club no longer offers ${name}. Learn more here.`}
       image={`https://workshop-cards.hackclub.com/${encodeURIComponent(
-        name,
+        name
       )}.png?theme=dark&caption=deprecated&fontSize=250px&brand=HQ`}
     />
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "muted",
+        bg: 'dark',
+        color: 'muted',
         pt: [5, 6],
         pb: [4, 5],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="narrow" as="article">
         <Icon size={128} glyph={icon} />
-        <Heading as="h1" variant="title" sx={{ color: "snow", my: [2, 3] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'snow', my: [2, 3] }}>
           We no longer offer {name}.
         </Heading>
         <Heading as="h2" variant="subtitle" sx={{ mb: 4 }}>
@@ -42,45 +42,43 @@ const DeprecatedPage = ({ page: { name, desc, icon, link } = {} }) => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default DeprecatedPage;
+export default DeprecatedPage
 
 const pages = {
   cloud9: {
-    name: "Cloud9",
-    desc: "Cloud9 has been replaced by repl.it, a newer online IDE.",
-    link: "https://repl.it/?ref=hackclub",
-    icon: "terminal",
+    name: 'Cloud9',
+    desc: 'Cloud9 has been replaced by repl.it, a newer online IDE.',
+    link: 'https://repl.it/?ref=hackclub',
+    icon: 'terminal'
   },
   challenge: {
-    name: "Challenge",
-    desc: "If you miss Hack Club Challenge, check out Scrapbook!",
-    link: "https://scrapbook.hackclub.com/",
-    icon: "sticker",
+    name: 'Challenge',
+    desc: 'If you miss Hack Club Challenge, check out Scrapbook!',
+    link: 'https://scrapbook.hackclub.com/',
+    icon: 'sticker'
   },
   tech_domains: {
-    name: ".TECH domains",
-    desc: "If you’re looking for a domain, you can get one via the Hack Pack.",
-    link: "https://hack.af/pack",
-    icon: "web",
+    name: '.TECH domains',
+    desc: 'If you’re looking for a domain, you can get one via the Hack Pack.',
+    link: 'https://hack.af/pack',
+    icon: 'web'
   },
   pack: {
-    name: "the Hack Pack",
-    desc: "GitHub still offers the GitHub Student Developer Pack through the standard application flow.",
-    link: "https://education.github.com/pack",
-    icon: "github",
-  },
-};
+    name: 'the Hack Pack',
+    desc: 'GitHub still offers the GitHub Student Developer Pack through the standard application flow.',
+    link: 'https://education.github.com/pack',
+    icon: 'github'
+  }
+}
 
 export const getStaticPaths = () => {
-  const paths = Object.keys(pages).map((key) => ({
-    params: { deprecated: key },
-  }));
-  return { paths, fallback: false };
-};
+  const paths = Object.keys(pages).map(key => ({ params: { deprecated: key } }))
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = ({ params }) => {
-  const page = pages[params.deprecated];
-  return { props: { page } };
-};
+  const page = pages[params.deprecated]
+  return { props: { page } }
+}
diff --git a/pages/donate.js b/pages/donate.js
index d7871cc76..94efa14c4 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,39 +10,39 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../components/force-theme";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import SprigForm from "../components/donate/sprigForm";
-import SprigMeta from "../components/donate/sprigMeta";
-import Sponsors from "../components/donate/sponsors";
-import donors from "../components/donate/donors.json";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../public/donate/sf.jpg";
-import HackerGames from "../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../public/donate/0color_pop.jpg";
-import ElonAMA from "../public/donate/elon.jpg";
-import SpaceX from "../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../public/donate/flagship.png";
-import MAHacks from "../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../public/home/golden-train.png";
+  Avatar
+} from 'theme-ui'
+import Photo from '../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import SprigForm from '../components/donate/sprigForm'
+import SprigMeta from '../components/donate/sprigMeta'
+import Sponsors from '../components/donate/sponsors'
+import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -50,16 +50,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -67,14 +67,14 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 const Quote = styled(Sheet)`
   position: relative;
   &:before {
-    content: "“";
+    content: '“';
     line-height: 1;
     font-size: 48px;
     padding-left: 6px;
@@ -85,16 +85,16 @@ const Quote = styled(Sheet)`
     opacity: 0.5;
     padding: 18px;
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
+    color: 'white'
+  }
+}
 const FirstQuote = styled(Quote)`
   background-image: radial-gradient(
     at left top,
@@ -102,7 +102,7 @@ const FirstQuote = styled(Quote)`
     rgb(41, 206, 104),
     rgb(53, 181, 36)
   );
-`;
+`
 const SecondQuote = styled(Quote)`
   background-image: radial-gradient(
     at left bottom,
@@ -110,21 +110,21 @@ const SecondQuote = styled(Quote)`
     rgb(45, 66, 228),
     rgb(115, 45, 228)
   );
-`;
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+`
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -139,7 +139,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -149,18 +149,18 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "200px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '200px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -171,12 +171,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -186,14 +186,14 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const DonorListing = ({ name, url }) => {
   if (url) {
@@ -201,18 +201,18 @@ const DonorListing = ({ name, url }) => {
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -224,43 +224,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -269,17 +269,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -292,11 +292,11 @@ export default function Donate({ sprig }) {
         </Box>
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             zIndex: 0,
-            width: "100%",
-            display: "block",
+            width: '100%',
+            display: 'block'
           }}
         >
           <PhotoRow
@@ -305,7 +305,7 @@ export default function Donate({ sprig }) {
               HackCamp,
               HackerGames,
               LaptopDonations,
-              Kerala,
+              Kerala
             ]}
           />
           <PhotoRow
@@ -317,7 +317,7 @@ export default function Donate({ sprig }) {
               InnovationCircuit,
               WindyCity,
               MAHacks,
-              ZephyrFun,
+              ZephyrFun
             ]}
           />
         </Box>
@@ -328,11 +328,11 @@ export default function Donate({ sprig }) {
         <Box pt={[0, 3]} mb={[2, 4]}>
           <Heading
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               fontSize: 4,
-              textTransform: "uppercase",
+              textTransform: 'uppercase',
               fontWeight: [400, 800],
-              mb: [0, 0],
+              mb: [0, 0]
             }}
           >
             Now introducing...
@@ -340,39 +340,39 @@ export default function Donate({ sprig }) {
           <Heading
             mt={2}
             sx={{
-              textAlign: "center",
-              textTransform: "uppercase",
+              textAlign: 'center',
+              textTransform: 'uppercase',
               fontSize: [5, 7],
               lineHeight: [0.8, 1],
               mb: 0,
               marginBlockEnd: 0,
               marginBlockStart: 0,
-              my: [2, 0],
+              my: [2, 0]
             }}
           >
             Sprig Consoles
           </Heading>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-around",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-around'
             }}
           >
             <Heading
               variant="subtitle"
               pb={[3, 2, 2]}
               sx={{
-                textAlign: "center",
-                color: "blue",
-                textTransform: "uppercase",
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
                 mt: [2, 0],
-                fontWeight: 800,
+                fontWeight: 800
               }}
             >
               Inspiring teenagers to both make and code.
             </Heading>
-            <Text sx={{ textAlign: "center", fontSize: 2 }}>
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
               A donation to the Sprig fund will send a teenager a Hack Club
               Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
@@ -381,7 +381,7 @@ export default function Donate({ sprig }) {
           </Box>
         </Box>
         <Grid
-          columns={[null, "2fr 3fr"]}
+          columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
           pt={[0, 0]}
           mb={[2, 4]}
@@ -389,10 +389,10 @@ export default function Donate({ sprig }) {
           <Box
             as="video"
             style={{
-              width: "100%",
-              borderRadius: "1em",
-              height: "100%",
-              objectFit: "cover",
+              width: '100%',
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -409,19 +409,19 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{ height: "100%" }}
+            sx={{ height: '100%' }}
           />
         </Grid>
         <Sheet
           sx={{
-            color: "white",
-            bg: "primary",
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: ["wrap", "nowrap"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: 4,
+            color: 'white',
+            bg: 'primary',
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: ['wrap', 'nowrap'],
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 4
           }}
         >
           <SprigForm />
@@ -429,7 +429,7 @@ export default function Donate({ sprig }) {
       </Container>
       <Container variant="copy" mt={5}>
         <FirstQuote>
-          <Heading my={3} sx={{ fontWeight: "normal", fontSize: "27px" }}>
+          <Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
             When I took CS classes in high school, I always found myself
             disengaged and feeling like they were just another class. After
             getting involved in Hack Club, a career in computer science changed
@@ -437,7 +437,7 @@ export default function Donate({ sprig }) {
           </Heading>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Because of Hack Club, I started organizing hackathons with hundreds
@@ -447,7 +447,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/selynna.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -459,19 +459,19 @@ export default function Donate({ sprig }) {
             </Box>
           </Flex>
         </FirstQuote>
-        <Container maxWidth={"48rem"} sx={{ maxWidth: "48rem" }} py={[3, 4]}>
-          <Heading as="h1" sx={{ fontSize: ["36px", "48px"] }}>
+        <Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
+          <Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
             Contribute beyond just dollars.
           </Heading>
-          <Box mt={2} mb={2} sx={{ fontSize: "27px" }}>
+          <Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
             We accept donations of time, technical or hard science fiction
             books, stocks/other securities, and cryptocurrency.
           </Box>
-          <Box mb={3} sx={{ fontSize: "27px" }}>
-            Please get in touch at{" "}
-            <A sx={{ color: "blue" }} href="mailto:hcb@hackclub.com">
+          <Box mb={3} sx={{ fontSize: '27px' }}>
+            Please get in touch at{' '}
+            <A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
               hcb@hackclub.com
-            </A>{" "}
+            </A>{' '}
             if you’re interested in making a contribution with cryptocurrency or
             have questions.
           </Box>
@@ -479,7 +479,7 @@ export default function Donate({ sprig }) {
         <SecondQuote>
           <Heading
             fontSize={[4, 5]}
-            sx={{ fontWeight: "bold", fontSize: ["27px", "36px"] }}
+            sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
             as="h1"
           >
             Hack Club has inspired me to grow and become the person I am today.
@@ -490,7 +490,7 @@ export default function Donate({ sprig }) {
           <Flex align="center" mt={[3, 4]}>
             <Avatar
               src="/hackers/rashid.jpg"
-              sx={{ height: "48px", width: "48px" }}
+              sx={{ height: '48px', width: '48px' }}
               mr={3}
               st
             />
@@ -501,10 +501,10 @@ export default function Donate({ sprig }) {
               </Text>
             </Box>
           </Flex>
-        </SecondQuote>{" "}
+        </SecondQuote>{' '}
       </Container>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -516,11 +516,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -535,13 +535,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/elon.js b/pages/elon.js
index 692df7d52..9f5de8c9f 100644
--- a/pages/elon.js
+++ b/pages/elon.js
@@ -1,17 +1,17 @@
-import { Box, Container, Heading, Text } from "theme-ui";
+import { Box, Container, Heading, Text } from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/elon.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -28,24 +28,24 @@ const ElonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Hack Club “makes me feel <span>much more optimistic</span>{" "}
+          Hack Club “makes me feel <span>much more optimistic</span>{' '}
           about&nbsp;the future.”
         </Heading>
         <Text variant="headline">—Elon Musk</Text>
@@ -65,6 +65,6 @@ const ElonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default ElonPage;
+export default ElonPage
diff --git a/pages/hackathons/grant.js b/pages/hackathons/grant.js
index f44c53145..a2b7f4ffe 100644
--- a/pages/hackathons/grant.js
+++ b/pages/hackathons/grant.js
@@ -1,24 +1,24 @@
-import { Box, Container, Flex, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import MSparkles from "../../components/sparkles/money";
-import NextLink from "next/link";
-import { Link, Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import Form from "../../components/hackathons/grant/form";
-import Apply from "../../components/hackathons/grant/apply";
+import { Box, Container, Flex, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import MSparkles from '../../components/sparkles/money'
+import NextLink from 'next/link'
+import { Link, Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import Form from '../../components/hackathons/grant/form'
+import Apply from '../../components/hackathons/grant/apply'
 
-import Zoom from "react-reveal/Zoom";
+import Zoom from 'react-reveal/Zoom'
 /** @jsxImportSource theme-ui */
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 const Requirement = ({ title, children, checkmark, background, size }) => {
   return (
@@ -26,19 +26,19 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
       <Card
         variant="interactive"
         sx={{
-          backgroundColor: "elevated",
+          backgroundColor: 'elevated',
           backgroundImage: `url('${background}')`,
-          backgroundSize: "40px 40px",
-          backgroundRepeat: "repeat",
-          backgroundPosition: "10% 10%",
-          color: "snow",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-          height: "100%",
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '10% 10%',
+          color: 'snow',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          height: '100%'
         }}
       >
-        <Flex sx={{ alignItems: "center" }}>
+        <Flex sx={{ alignItems: 'center' }}>
           <Box mr={3} sx={{ lineHeight: 0, flexShrink: 0 }}>
             <Icon glyph={checkmark} color="#ec3750" size={size} />
           </Box>
@@ -52,12 +52,12 @@ const Requirement = ({ title, children, checkmark, background, size }) => {
         </Text>
       </Card>
     </Zoom>
-  );
-};
+  )
+}
 
 const HackathonGrant = () => {
-  let open = true; // applications are open
-  let channel = "https://hackclub.slack.com/archives/C03TS0VKFPZ"; // #hackathon-grants
+  let open = true // applications are open
+  let channel = 'https://hackclub.slack.com/archives/C03TS0VKFPZ' // #hackathon-grants
 
   return (
     <>
@@ -76,38 +76,38 @@ const HackathonGrant = () => {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-gxxp8xcyl-hack-club-bot.vercel.app/0fzfm1e-ueaef1qw.jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(56rem + 32px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              maxWidth: 'calc(56rem + 32px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <NextLink href="https://hackclub.com" passHref>
                   <Box
@@ -119,36 +119,36 @@ const HackathonGrant = () => {
                       height: 72,
                       backgroundImage:
                         "url('https://assets.hackclub.com/icon-square.svg')",
-                      backgroundSize: "contain",
-                      backgroundPosition: "center center",
-                      backgroundRepeat: "no-repeat",
+                      backgroundSize: 'contain',
+                      backgroundPosition: 'center center',
+                      backgroundRepeat: 'no-repeat',
                       mr: 3,
-                      borderRadius: 8,
+                      borderRadius: 8
                     }}
                     target="_blank"
                   ></Box>
                 </NextLink>
               </Flex>
-              A <MSparkles>$500</MSparkles> grant for your{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>in-person</a> hackathon.
+              A <MSparkles>$500</MSparkles> grant for your{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>in-person</a> hackathon.
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
             >
-              Hack Club is providing $500 grants (and waiving{" "}
+              Hack Club is providing $500 grants (and waiving{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
-              fees) to <a sx={{ whiteSpace: "nowrap" }}>in-person</a>{" "}
-              <a sx={{ whiteSpace: "nowrap" }}>high school</a> hackathons until
+              </Link>{' '}
+              fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
+              <a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
               December 31st, 2023.
             </Box>
             <Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
-              {open ? "Apply Now" : "Coming Soon"}
+              {open ? 'Apply Now' : 'Coming Soon'}
             </Button>
             <Button
               variant="ctaLg"
@@ -157,12 +157,12 @@ const HackathonGrant = () => {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>
-                Find hackathons{" "}
-                <Text sx={{ display: ["none", "inline"] }}>near you</Text>
+                Find hackathons{' '}
+                <Text sx={{ display: ['none', 'inline'] }}>near you</Text>
               </Text>
             </Button>
           </Box>
@@ -173,17 +173,17 @@ const HackathonGrant = () => {
             variant="heading"
             mt={4}
             mb={3}
-            sx={{ fontSize: [28, 30, 40], textAlign: "center" }}
+            sx={{ fontSize: [28, 30, 40], textAlign: 'center' }}
           >
             Check if your hackathon qualifies
           </Text>
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               my: 3,
-              color: "white",
-              fontSize: [1, 2, 2],
+              color: 'white',
+              fontSize: [1, 2, 2]
             }}
           >
             Your hackathon should be <Text as="b">free</Text> for all attendees
@@ -204,8 +204,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 This is not an annual program and has only been renewed until
@@ -215,8 +215,8 @@ const HackathonGrant = () => {
             <Requirement
               title={
                 <>
-                  By <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>, for{" "}
-                  <a sx={{ whiteSpace: "nowrap" }}>high schoolers</a>
+                  By <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>, for{' '}
+                  <a sx={{ whiteSpace: 'nowrap' }}>high schoolers</a>
                 </>
               }
               checkmark="profile-fill"
@@ -231,8 +231,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 Maximum of 1 college student is allowed on your organizing team.
@@ -252,8 +252,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 Your event must be at least 8 consecutive hours long to qualify
@@ -265,13 +265,13 @@ const HackathonGrant = () => {
               checkmark="pin-fill"
               background="https://icons.hackclub.com/api/icons/0x212025/glyph:pin.svg"
             >
-              You will need to provide a scan of an email, contract, or an{" "}
+              You will need to provide a scan of an email, contract, or an{' '}
               <Link
                 href="https://www.investopedia.com/terms/m/mou.asp"
                 target="_blank"
               >
                 MOU
-              </Link>{" "}
+              </Link>{' '}
               with your venue. Your scan should have the date of your hackathon
               and address, contact details, and the specific commitment of your
               venue.
@@ -279,8 +279,8 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  color: "muted",
-                  fontSize: ["14px", 1, 1],
+                  color: 'muted',
+                  fontSize: ['14px', 1, 1]
                 }}
               >
                 If your venue is a school, attendance must not be limited to a
@@ -301,31 +301,31 @@ const HackathonGrant = () => {
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 You will need to share a link to your website. Don't have a
-                domain? HCB provides a free domain. Check out this{" "}
+                domain? HCB provides a free domain. Check out this{' '}
                 <Link
                   href="https://notebook.lachlanjc.com/2019-09-06_making_a_hackathon_site"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   guide on building hackathon websites
-                </Link>{" "}
-                or ask in{" "}
+                </Link>{' '}
+                or ask in{' '}
                 <Link
                   href="/slack"
                   target="_blank"
                   sx={{
-                    color: "muted",
+                    color: 'muted'
                   }}
                 >
                   Slack
-                </Link>{" "}
+                </Link>{' '}
                 if you need help.
               </Text>
             </Requirement>
@@ -336,24 +336,24 @@ const HackathonGrant = () => {
               size="28"
             >
               You'll receive your grant through HCB, our financial platform for
-              hackathons, and spend it in the open with{" "}
+              hackathons, and spend it in the open with{' '}
               <Link
                 href="https://changelog.hcb.hackclub.com/transparent-finances-(optional-feature)-151427"
                 target="_blank"
               >
                 Transparency Mode
               </Link>
-              . Sign up for{" "}
+              . Sign up for{' '}
               <Link href="/hcb" target="_blank">
                 HCB
-              </Link>{" "}
+              </Link>{' '}
               before applying.
               <br />
               <br />
               <Text
                 sx={{
-                  fontSize: ["14px", 1, 1],
-                  color: "muted",
+                  fontSize: ['14px', 1, 1],
+                  color: 'muted'
                 }}
               >
                 If you're unable to use HCB, we're unfortunately unable to
@@ -364,17 +364,17 @@ const HackathonGrant = () => {
           <Text
             as="p"
             sx={{
-              textAlign: "center",
+              textAlign: 'center',
               mt: 3,
-              color: "muted",
+              color: 'muted'
             }}
           >
             If you'd like to list us on your site (optional), you can use the
-            logos found on the respective brand guides for{" "}
+            logos found on the respective brand guides for{' '}
             <Link href="/brand" target="_blank">
               Hack Club
-            </Link>{" "}
-            and{" "}
+            </Link>{' '}
+            and{' '}
             <Link href="https://www.firstinspires.org/brand" target="_blank">
               <i>FIRST®</i>
             </Link>
@@ -388,7 +388,7 @@ const HackathonGrant = () => {
           ) : (
             <>
               <Heading
-                sx={{ textAlign: "center", mb: 3, fontSize: 5 }}
+                sx={{ textAlign: 'center', mb: 3, fontSize: 5 }}
                 id="apply"
               >
                 Applications opening soon.
@@ -405,18 +405,18 @@ const HackathonGrant = () => {
           variant="interactive"
           href="mailto:hcb@hackclub.com"
           sx={{
-            mx: "auto",
-            maxWidth: "52rem",
-            width: "90%",
-            textAlign: "left",
-            textDecoration: "none",
-            lineHeight: "caption",
-            display: "flex",
-            alignItems: "center",
+            mx: 'auto',
+            maxWidth: '52rem',
+            width: '90%',
+            textAlign: 'left',
+            textDecoration: 'none',
+            lineHeight: 'caption',
+            display: 'flex',
+            alignItems: 'center',
             fontSize: [1, 2, 2],
             mb: [3, 4],
-            p: "16px !important",
-            svg: { flexShrink: "none" },
+            p: '16px !important',
+            svg: { flexShrink: 'none' }
           }}
         >
           <Icon
@@ -425,16 +425,16 @@ const HackathonGrant = () => {
             sx={{
               mr: [2, 3],
               ml: 2,
-              display: ["none", "block"],
+              display: ['none', 'block'],
               width: 56,
-              height: "auto",
+              height: 'auto'
             }}
           />
           <Text
             as="p"
             sx={{
-              flex: "1 1 auto",
-              strong: { display: ["inline", "block"], pl: 3 },
+              flex: '1 1 auto',
+              strong: { display: ['inline', 'block'], pl: 3 }
             }}
           >
             <strong>Questions?</strong>
@@ -446,7 +446,7 @@ const HackathonGrant = () => {
       </Zoom>
       <Footer dark key="footer" />
     </>
-  );
-};
+  )
+}
 
-export default HackathonGrant;
+export default HackathonGrant
diff --git a/pages/hackathons/index.js b/pages/hackathons/index.js
index 48e63c3e0..b4e90cc7a 100644
--- a/pages/hackathons/index.js
+++ b/pages/hackathons/index.js
@@ -1,17 +1,17 @@
-import { Box, Container } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Recap from "../../components/hackathons/recap";
-import Slack from "../../components/hackathons/features/slack";
-import Money from "../../components/hackathons/features/money";
-import Landing from "../../components/hackathons/landing";
-import Marketing from "../../components/hackathons/features/marketing";
-import Overview from "../../components/hackathons/overview";
-import ScrollingHackathons from "../../components/hackathons/scrolling-hackathons";
-import KeepExploring from "../../components/hackathons/keep-exploring";
+import { Box, Container } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Recap from '../../components/hackathons/recap'
+import Slack from '../../components/hackathons/features/slack'
+import Money from '../../components/hackathons/features/money'
+import Landing from '../../components/hackathons/landing'
+import Marketing from '../../components/hackathons/features/marketing'
+import Overview from '../../components/hackathons/overview'
+import ScrollingHackathons from '../../components/hackathons/scrolling-hackathons'
+import KeepExploring from '../../components/hackathons/keep-exploring'
 
 export default function Hackathons({ data }) {
   return (
@@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
         />
         <Box as="main">
           <Landing />
-
+          
           <Overview />
 
           <ScrollingHackathons eventData={data} title={true} />
-
+          
           <KeepExploring />
           <Money />
           <Slack />
@@ -43,27 +43,25 @@ export default function Hackathons({ data }) {
       </Box>
       <Footer key="footer" />
     </>
-  );
+  )
 }
 export async function getStaticProps() {
   let data;
   try {
-    const res = await fetch(
-      "https://hackathons.hackclub.com/api/events/upcoming",
-    );
+    const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
     if (res.ok) {
       data = await res.json();
     } else {
-      data = [];
+      data = []; 
     }
   } catch (error) {
-    data = [];
+    data = []; 
   }
 
   return {
     props: {
-      data,
+      data, 
     },
-    revalidate: 10,
+    revalidate: 10
   };
 }
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index 18c65178e..fabde9efb 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -1,82 +1,82 @@
-import { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { Box, Flex, Text } from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import FlexCol from "../../../components/flex-col";
-import Progress from "../../../components/hcb/apply/progress";
-import NavButton from "../../../components/hcb/apply/nav-button";
-import Watermark from "../../../components/hcb/apply/watermark";
-import FormContainer from "../../../components/hcb/apply/form-container";
-import HCBInfo from "../../../components/hcb/apply/hcb-info";
-import OrganizationInfoForm from "../../../components/hcb/apply/org-form";
-import PersonalInfoForm from "../../../components/hcb/apply/personal-form";
-import AlertModal from "../../../components/hcb/apply/alert-modal";
-import { geocode } from "../../../lib/hcb/apply/address-validation";
+import { useEffect, useState, useRef } from 'react'
+import { useRouter } from 'next/router'
+import { Box, Flex, Text } from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import FlexCol from '../../../components/flex-col'
+import Progress from '../../../components/hcb/apply/progress'
+import NavButton from '../../../components/hcb/apply/nav-button'
+import Watermark from '../../../components/hcb/apply/watermark'
+import FormContainer from '../../../components/hcb/apply/form-container'
+import HCBInfo from '../../../components/hcb/apply/hcb-info'
+import OrganizationInfoForm from '../../../components/hcb/apply/org-form'
+import PersonalInfoForm from '../../../components/hcb/apply/personal-form'
+import AlertModal from '../../../components/hcb/apply/alert-modal'
+import { geocode } from '../../../lib/hcb/apply/address-validation'
 
-const valiadateAddress = async (step) => {
+const valiadateAddress = async step => {
   // Validate the address
   if (step === 3) {
     // Get the raw personal address input
-    const userAddress = sessionStorage.getItem("bank-signup-userAddress");
+    const userAddress = sessionStorage.getItem('bank-signup-userAddress')
 
-    if (!userAddress) return;
+    if (!userAddress) return
 
-    const result = await geocode(userAddress);
+    const result = await geocode(userAddress)
 
-    const addrComp = (type) => result.results[0]?.structuredAddress[type] ?? "";
+    const addrComp = type => result.results[0]?.structuredAddress[type] ?? ''
 
     sessionStorage.setItem(
-      "bank-signup-addressLine1",
-      addrComp("fullThoroughfare"),
-    );
-    sessionStorage.setItem("bank-signup-addressCity", addrComp("locality"));
+      'bank-signup-addressLine1',
+      addrComp('fullThoroughfare')
+    )
+    sessionStorage.setItem('bank-signup-addressCity', addrComp('locality'))
     sessionStorage.setItem(
-      "bank-signup-addressState",
-      addrComp("administrativeArea"),
-    );
-    sessionStorage.setItem("bank-signup-addressZip", addrComp("postCode"));
+      'bank-signup-addressState',
+      addrComp('administrativeArea')
+    )
+    sessionStorage.setItem('bank-signup-addressZip', addrComp('postCode'))
     sessionStorage.setItem(
-      "bank-signup-addressCountry",
-      result.results[0]?.country ?? "",
-    );
+      'bank-signup-addressCountry',
+      result.results[0]?.country ?? ''
+    )
     sessionStorage.setItem(
-      "bank-signup-addressCountryCode",
-      result.results[0]?.countryCode ?? "",
-    );
+      'bank-signup-addressCountryCode',
+      result.results[0]?.countryCode ?? ''
+    )
   }
-};
+}
 
 export default function Apply() {
-  const router = useRouter();
-  const [step, setStep] = useState(1);
-  const formContainer = useRef();
-  const [formError, setFormError] = useState(null);
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const formContainer = useRef()
+  const [formError, setFormError] = useState(null)
 
   const requiredFields = [
     [],
-    ["eventName", "eventLocation"],
-    ["firstName", "lastName", "userEmail", "userBirthday", "contactOption"],
-  ];
+    ['eventName', 'eventLocation'],
+    ['firstName', 'lastName', 'userEmail', 'userBirthday', 'contactOption']
+  ]
 
   useEffect(() => {
-    console.error(`Form error: ${formError}`);
-    if (!router.isReady) return;
-    setStep(parseInt(router.query.step));
+    console.error(`Form error: ${formError}`)
+    if (!router.isReady) return
+    setStep(parseInt(router.query.step))
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
       router.push(
         {
           pathname: router.pathname,
-          query: { ...router.query, step: 1 },
+          query: { ...router.query, step: 1 }
         },
         undefined,
-        {},
-      );
+        {}
+      )
     }
-  }, [formError, router, step]);
+  }, [formError, router, step])
 
   return (
     <>
@@ -85,20 +85,20 @@ export default function Apply() {
 
       <Box
         sx={{
-          display: "grid",
+          display: 'grid',
           gap: 5,
           gridTemplateAreas: [
             '"title" "form" "form" "nav"',
             null,
             null,
-            '"title form" "title form" "nav form"',
+            '"title form" "title form" "nav form"'
           ],
-          height: ["auto", null, null, "100vh"],
-          p: [4, 5],
+          height: ['auto', null, null, '100vh'],
+          p: [4, 5]
         }}
       >
-        <Box sx={{ gridArea: "title" }}>
-          <FlexCol gap={[4, null, null, "20vh"]}>
+        <Box sx={{ gridArea: 'title' }}>
+          <FlexCol gap={[4, null, null, '20vh']}>
             <Text variant="title">
               Let's get you
               <br />
@@ -107,7 +107,7 @@ export default function Apply() {
             <Progress />
           </FlexCol>
         </Box>
-        <Box sx={{ gridArea: "form", overflowY: "auto" }}>
+        <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
             {step === 2 && (
@@ -118,10 +118,10 @@ export default function Apply() {
         </Box>
         <Flex
           sx={{
-            gridArea: "nav",
-            alignSelf: "end",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
+            gridArea: 'nav',
+            alignSelf: 'end',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between'
           }}
         >
           <NavButton isBack={true} form={formContainer} />
@@ -137,5 +137,5 @@ export default function Apply() {
       <AlertModal formError={formError} setFormError={setFormError} />
       <Watermark />
     </>
-  );
+  )
 }
diff --git a/pages/hcb/apply/success.js b/pages/hcb/apply/success.js
index 42f349873..fe2a24274 100644
--- a/pages/hcb/apply/success.js
+++ b/pages/hcb/apply/success.js
@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import {
   Box,
   Button,
@@ -9,16 +9,16 @@ import {
   Text,
   Link,
   Flex,
-  Image,
-} from "theme-ui";
-import ForceTheme from "../../../components/force-theme";
-import JSConfetti from "js-confetti";
-import Icon from "../../../components/icon";
-import FlexCol from "../../../components/flex-col";
+  Image
+} from 'theme-ui'
+import ForceTheme from '../../../components/force-theme'
+import JSConfetti from 'js-confetti'
+import Icon from '../../../components/icon'
+import FlexCol from '../../../components/flex-col'
 
 function Option({ icon, label, link }) {
   const color =
-    icon === "email" ? "#338eda" : icon === "slack" ? "#a633d6" : "#ec3750";
+    icon === 'email' ? '#338eda' : icon === 'slack' ? '#a633d6' : '#ec3750'
 
   return (
     <Button
@@ -26,15 +26,15 @@ function Option({ icon, label, link }) {
       as="a"
       href={link}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        width: "fit-content",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 'fit-content',
         color,
-        borderColor: color,
+        borderColor: color
       }}
     >
-      <Flex sx={{ alignItems: "center", gap: [0, null, 1], px: 2 }}>
+      <Flex sx={{ alignItems: 'center', gap: [0, null, 1], px: 2 }}>
         <Icon
           glyph={icon}
           sx={{ width: [32, null, 46], height: [32, null, 46] }}
@@ -42,27 +42,27 @@ function Option({ icon, label, link }) {
         <Text sx={{ fontSize: [2, null, 3] }}>{label}</Text>
       </Flex>
     </Button>
-  );
+  )
 }
 
 export default function ApplicationSuccess() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
-    const jsConfetti = new JSConfetti();
+    const jsConfetti = new JSConfetti()
     jsConfetti.addConfetti({
       confettiColors: [
         // Hack Club colours!
-        "#ec3750",
-        "#ff8c37",
-        "#f1c40f",
-        "#33d6a6",
-        "#5bc0de",
-        "#338eda",
-        "#a633d6",
-      ],
-    });
-  }, [router]);
+        '#ec3750',
+        '#ff8c37',
+        '#f1c40f',
+        '#33d6a6',
+        '#5bc0de',
+        '#338eda',
+        '#a633d6'
+      ]
+    })
+  }, [router])
 
   return (
     <Container variant="copy">
@@ -79,7 +79,7 @@ export default function ApplicationSuccess() {
           <Image
             src="/hcb/apply/party-orpheus.svg"
             alt="Dinosaur partying"
-            sx={{ width: "40%" }}
+            sx={{ width: '40%' }}
           />
           <FlexCol gap={2}>
             <Text variant="title">Thanks for applying!</Text>
@@ -95,10 +95,10 @@ export default function ApplicationSuccess() {
           </Text>
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "space-evenly",
-              alignItems: "center",
-              gap: [3, null, 0],
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'space-evenly',
+              alignItems: 'center',
+              gap: [3, null, 0]
             }}
           >
             <Option icon="email" label="Mail" link="mailto:hcb@hackclub.com">
@@ -118,12 +118,12 @@ export default function ApplicationSuccess() {
         </FlexCol>
 
         <Button as="a" href="https://hcb.hackclub.com">
-          <Flex sx={{ alignItems: "center", px: [2, null, 3], py: 2 }}>
+          <Flex sx={{ alignItems: 'center', px: [2, null, 3], py: 2 }}>
             <Icon glyph="bank-account" size={36} />
             <Text sx={{ fontSize: 3 }}>Head to HCB!</Text>
           </Flex>
         </Button>
       </FlexCol>
     </Container>
-  );
+  )
 }
diff --git a/pages/hcb/climate/[region].js b/pages/hcb/climate/[region].js
index bfd56897a..e21b80120 100644
--- a/pages/hcb/climate/[region].js
+++ b/pages/hcb/climate/[region].js
@@ -1,13 +1,13 @@
 import ClimateDirectory, {
   regions,
-  fetchRawClimateOrganizations,
-} from "./index";
-import { map, find, kebabCase, startCase } from "lodash";
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
 
-const regionsWithIds = map(regions, (region) => ({
+const regionsWithIds = map(regions, region => ({
   id: kebabCase(region.label),
-  ...region,
-}));
+  ...region
+}))
 
 export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
   return (
@@ -15,33 +15,30 @@ export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
       rawOrganizations={rawOrganizations}
       pageRegion={pageRegion}
     />
-  );
+  )
 }
 
 export const getStaticPaths = () => {
-  const paths = map(map(regionsWithIds, "id"), (id) => ({
-    params: { region: `organizations-in-${id}` },
-  }));
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
 
-  return { paths, fallback: false };
-};
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
-  let { region } = params;
-  region = find(regionsWithIds, [
-    "id",
-    region.replace("organizations-in-", ""),
-  ]);
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
 
   let orgs = (await fetchRawClimateOrganizations()).filter(
-    (org) => org.location.continent === region.label,
-  );
+    org => org.location.continent === region.label
+  )
 
   return {
     props: {
       rawOrganizations: orgs,
-      pageRegion: region,
+      pageRegion: region
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/climate/index.js b/pages/hcb/climate/index.js
index fe8acff42..c7385f28a 100644
--- a/pages/hcb/climate/index.js
+++ b/pages/hcb/climate/index.js
@@ -6,43 +6,41 @@ import {
   Grid,
   Heading,
   Input,
-  Select,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../../components/force-theme";
-import Nav from "../../../components/nav";
-import Footer from "../../../components/footer";
-import MSparkles from "../../../components/sparkles/money";
-import { Text, Button, Card } from "theme-ui";
-import Icon from "@hackclub/icons";
-import OrganizationCard, {
-  Badge,
-} from "../../../components/hcb/directory/card";
-import Zoom from "react-reveal/Zoom";
-import fuzzysort from "fuzzysort";
-import ScrollHint from "../../../components/scroll-hint";
-import { useEffect, useState } from "react";
+  Select
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../../components/force-theme'
+import Nav from '../../../components/nav'
+import Footer from '../../../components/footer'
+import MSparkles from '../../../components/sparkles/money'
+import { Text, Button, Card } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import OrganizationCard, { Badge } from '../../../components/hcb/directory/card'
+import Zoom from 'react-reveal/Zoom'
+import fuzzysort from 'fuzzysort'
+import ScrollHint from '../../../components/scroll-hint'
+import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
-import NextLink from "next/link";
-import { kebabCase, intersection } from "lodash";
-import theme from "@hackclub/theme";
-import Tooltip from "../../../components/hcb/tooltip";
+import NextLink from 'next/link'
+import { kebabCase, intersection } from 'lodash'
+import theme from '@hackclub/theme'
+import Tooltip from '../../../components/hcb/tooltip'
 
 const styles = `
   html {
     scroll-behavior: smooth;
   }
-`;
+`
 
 export const badges = [
   {
-    label: "Transparent",
-    id: "Transparent",
-    tooltip: "Transparent",
-    color: "purple",
-    icon: "explore",
-    match: (org) => org.isTransparent,
+    label: 'Transparent',
+    id: 'Transparent',
+    tooltip: 'Transparent',
+    color: 'purple',
+    icon: 'explore',
+    match: org => org.isTransparent
   },
   // The "128 Collective Funded" is hidden for now. It may be re-added in the
   // future after 128 Collective has more multi-year grants.
@@ -55,160 +53,160 @@ export const badges = [
   //     'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
   // },
   {
-    label: "Recommended",
-    id: "128CollectiveRecommended",
-    tooltip: "128 Collective Recommended",
-    match: (org) => org.is128Recommended,
+    label: 'Recommended',
+    id: '128CollectiveRecommended',
+    tooltip: '128 Collective Recommended',
+    match: org => org.is128Recommended,
     image:
-      "https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg",
-  },
-];
+      'https://d33wubrfki0l68.cloudfront.net/5fc90935f8126233f42919a6c68601a5d735d798/fa4b2/images/logo.svg'
+  }
+]
 
 badges.__proto__.forOrg = function (org) {
-  return this.filter((badge) => badge.match?.(org));
-};
+  return this.filter(badge => badge.match?.(org))
+}
 
 export const tags = [
   {
-    label: "Climate",
-    id: "Climate",
-    color: "#1eb36d",
-    match: (org) => true,
+    label: 'Climate',
+    id: 'Climate',
+    color: '#1eb36d',
+    match: org => true
   },
   {
-    label: "Nonprofit",
-    id: "Nonprofit",
-    color: "blue",
-    match: (org) => true,
-  },
-];
+    label: 'Nonprofit',
+    id: 'Nonprofit',
+    color: 'blue',
+    match: org => true
+  }
+]
 
 tags.__proto__.forOrg = function (org) {
-  return this.filter((tag) => tag.match?.(org));
-};
+  return this.filter(tag => tag.match?.(org))
+}
 
 export const regions = [
   {
-    label: "North America",
-    color: "secondary",
-    iconColor: "red",
-    icon: "photo",
+    label: 'North America',
+    color: 'secondary',
+    iconColor: 'red',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/3north_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/3northamerica.png'
   },
   {
-    label: "South America",
-    color: "secondary",
-    iconColor: "orange",
-    icon: "photo",
+    label: 'South America',
+    color: 'secondary',
+    iconColor: 'orange',
+    icon: 'photo',
     image:
-      "https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png",
+      'https://cloud-cberabu5z-hack-club-bot.vercel.app/4south_america.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png",
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/4southamerica.png'
   },
   {
-    label: "Africa",
-    color: "secondary",
-    iconColor: "purple",
-    icon: "explore",
-    image: "https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png",
+    label: 'Africa',
+    color: 'secondary',
+    iconColor: 'purple',
+    icon: 'explore',
+    image: 'https://cloud-cberabu5z-hack-club-bot.vercel.app/0africa.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/0africa.png'
   },
   {
-    label: "Europe",
-    color: "secondary",
-    iconColor: "blue",
-    icon: "explore",
-    image: "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png",
-    ogImage: "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png",
+    label: 'Europe',
+    color: 'secondary',
+    iconColor: 'blue',
+    icon: 'explore',
+    image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/1europe.png',
+    ogImage: 'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/2europe.png'
   },
   {
-    label: "Asia & Oceania",
-    color: "secondary",
-    iconColor: "green",
-    icon: "explore",
+    label: 'Asia & Oceania',
+    color: 'secondary',
+    iconColor: 'green',
+    icon: 'explore',
     image:
-      "https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png",
+      'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png',
     ogImage:
-      "https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png",
-  },
-];
+      'https://cloud-p9tu92fwx-hack-club-bot.vercel.app/1asia_oceania.png'
+  }
+]
 
 const FilterPanel = ({ filter, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
-  const setStateVariable = filter[0];
-  const currentSelections = filter[1];
-  const title = filter[2];
-  const baseData = filter[3];
-  if (!baseData?.length) return <></>;
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
+  const setStateVariable = filter[0]
+  const currentSelections = filter[1]
+  const title = filter[2]
+  const baseData = filter[3]
+  if (!baseData?.length) return <></>
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} {title}{" "}
+        {mobile && 'FILTER BY '} {title}{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
         <Flex
           sx={{
-            alignItems: "center",
-            cursor: "pointer",
+            alignItems: 'center',
+            cursor: 'pointer',
             gap: 2,
             py: mobile ? 1 : 0,
             pl: mobile ? 1 : 0,
             pr: mobile ? 3 : 0,
-            border: mobile ? "1px solid" : "none",
-            borderColor: "sunken",
-            borderRadius: "4px",
-            background: mobile ? "snow" : "none",
-            textDecoration: "none",
-            color: "secondary",
-            textDecoration: "none",
-            transition: "color 0.2s",
-            ":hover": {
-              color: "blue",
+            border: mobile ? '1px solid' : 'none',
+            borderColor: 'sunken',
+            borderRadius: '4px',
+            background: mobile ? 'snow' : 'none',
+            textDecoration: 'none',
+            color: 'secondary',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
+            ':hover': {
+              color: 'blue'
             },
-            width: "fit-content",
+            width: 'fit-content'
           }}
-          onClick={() => setStateVariable([...baseData.map((x) => x.id)])}
+          onClick={() => setStateVariable([...baseData.map(x => x.id)])}
         >
           <Flex
             sx={{
-              bg: "smoke",
-              color: "secondary",
+              bg: 'smoke',
+              color: 'secondary',
               p: 1,
-              borderRadius: 6,
+              borderRadius: 6
             }}
           >
             <Icon glyph="list" size={24} />
@@ -216,15 +214,15 @@ const FilterPanel = ({ filter, mobile }) => {
           <Heading
             as="h4"
             sx={{
-              color: "inherit",
+              color: 'inherit',
               fontSize: 3,
               color:
                 currentSelections.length !== baseData.length
-                  ? "black"
-                  : "primary",
-              ":hover": {
-                color: "blue",
-              },
+                  ? 'black'
+                  : 'primary',
+              ':hover': {
+                color: 'blue'
+              }
             }}
           >
             All
@@ -234,41 +232,41 @@ const FilterPanel = ({ filter, mobile }) => {
           <Flex
             key={idx}
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
               color:
                 currentSelections.length === baseData.length ||
                 !currentSelections.includes(item.id)
-                  ? "black"
-                  : "primary",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "blue",
+                  ? 'black'
+                  : 'primary',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: 'blue'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             onClick={() => {
               if (currentSelections.length === baseData.length) {
-                setStateVariable([item.id]);
+                setStateVariable([item.id])
               } else if (currentSelections.includes(item.id)) {
-                let temp = currentSelections;
-                temp = temp.filter((selection) => selection !== item.id);
+                let temp = currentSelections
+                temp = temp.filter(selection => selection !== item.id)
                 if (temp.length === 0) {
-                  setStateVariable([...baseData.map((x) => x.id)]);
+                  setStateVariable([...baseData.map(x => x.id)])
                 } else {
-                  setStateVariable(temp);
+                  setStateVariable(temp)
                 }
               } else {
-                setStateVariable([...currentSelections, item.id]);
+                setStateVariable([...currentSelections, item.id])
               }
             }}
           >
@@ -276,18 +274,18 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   backgroundImage: `url("${item.image}")`,
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                  color: "white",
+                  backgroundSize: 'contain',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Flex
                   sx={{
                     width: 24,
-                    height: 24,
+                    height: 24
                   }}
                 />
               </Flex>
@@ -295,93 +293,93 @@ const FilterPanel = ({ filter, mobile }) => {
               <Flex
                 sx={{
                   bg: item.color,
-                  color: "white",
+                  color: 'white',
                   p: 1,
-                  borderRadius: 6,
+                  borderRadius: 6
                 }}
               >
                 <Icon glyph={item.icon} size={24} />
               </Flex>
             )}
-            <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+            <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
               {item.label}
             </Heading>
           </Flex>
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const RegionPanel = ({ currentRegion, mobile }) => {
-  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile);
+  const [hiddenOnMobile, setHiddenOnMobile] = useState(mobile)
   return (
     <>
       <Heading
         as="h3"
         sx={{
           fontSize: 2,
-          textTransform: "uppercase",
-          color: "muted",
+          textTransform: 'uppercase',
+          color: 'muted',
           mb: hiddenOnMobile ? 1 : 3,
-          cursor: mobile ? "pointer" : "default",
-          ":hover": mobile
+          cursor: mobile ? 'pointer' : 'default',
+          ':hover': mobile
             ? {
-                color: "blue",
+                color: 'blue'
               }
-            : {},
+            : {}
         }}
         onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
       >
-        {mobile && "FILTER BY "} REGION{" "}
+        {mobile && 'FILTER BY '} REGION{' '}
         <small
           style={{
-            transform: "translateY(-1px)",
-            display: "inline-block",
+            transform: 'translateY(-1px)',
+            display: 'inline-block'
           }}
         >
-          {mobile && (hiddenOnMobile ? "▶︎" : "▼")}
+          {mobile && (hiddenOnMobile ? '▶︎' : '▼')}
         </small>
       </Heading>
       <Flex
         sx={{
-          flexDirection: mobile ? "row" : "column",
-          gap: "12px",
-          flexWrap: "wrap",
+          flexDirection: mobile ? 'row' : 'column',
+          gap: '12px',
+          flexWrap: 'wrap',
           mb: 3,
-          display: hiddenOnMobile ? "none" : "flex",
+          display: hiddenOnMobile ? 'none' : 'flex'
         }}
       >
-        <NextLink scroll={false} href={"/hcb/climate"}>
+        <NextLink scroll={false} href={'/hcb/climate'}>
           <Flex
             sx={{
-              alignItems: "center",
-              cursor: "pointer",
+              alignItems: 'center',
+              cursor: 'pointer',
               gap: 2,
               py: mobile ? 1 : 0,
               pl: mobile ? 1 : 0,
               pr: mobile ? 3 : 0,
-              border: mobile ? "1px solid" : "none",
-              borderColor: "sunken",
-              borderRadius: "4px",
-              background: mobile ? "snow" : "none",
-              textDecoration: "none",
-              color: "secondary",
-              textDecoration: "none",
-              transition: "color 0.2s",
-              ":hover": {
-                color: "#B72A3D",
+              border: mobile ? '1px solid' : 'none',
+              borderColor: 'sunken',
+              borderRadius: '4px',
+              background: mobile ? 'snow' : 'none',
+              textDecoration: 'none',
+              color: 'secondary',
+              textDecoration: 'none',
+              transition: 'color 0.2s',
+              ':hover': {
+                color: '#B72A3D'
               },
-              width: "fit-content",
+              width: 'fit-content'
             }}
             as="a"
           >
             <Flex
               sx={{
-                bg: "smoke",
-                color: "secondary",
+                bg: 'smoke',
+                color: 'secondary',
                 p: 1,
-                borderRadius: 6,
+                borderRadius: 6
               }}
             >
               <Icon glyph="list" size={24} />
@@ -389,12 +387,12 @@ const RegionPanel = ({ currentRegion, mobile }) => {
             <Heading
               as="h4"
               sx={{
-                color: "inherit",
+                color: 'inherit',
                 fontSize: 3,
-                color: !currentRegion ? "red" : "black",
-                ":hover": {
-                  color: "blue",
-                },
+                color: !currentRegion ? 'red' : 'black',
+                ':hover': {
+                  color: 'blue'
+                }
               }}
             >
               All
@@ -409,41 +407,41 @@ const RegionPanel = ({ currentRegion, mobile }) => {
           >
             <Flex
               sx={{
-                alignItems: "center",
-                cursor: "pointer",
+                alignItems: 'center',
+                cursor: 'pointer',
                 gap: 2,
                 py: mobile ? 1 : 0,
                 pl: mobile ? 1 : 0,
                 pr: mobile ? 3 : 0,
-                border: mobile ? "1px solid" : "none",
-                borderColor: "sunken",
-                borderRadius: "4px",
-                background: mobile ? "snow" : "none",
-                textDecoration: "none",
-                color: currentRegion?.label === item.label ? "red" : "black",
-                transition: "color 0.2s",
-                ":hover": {
-                  color: "blue",
+                border: mobile ? '1px solid' : 'none',
+                borderColor: 'sunken',
+                borderRadius: '4px',
+                background: mobile ? 'snow' : 'none',
+                textDecoration: 'none',
+                color: currentRegion?.label === item.label ? 'red' : 'black',
+                transition: 'color 0.2s',
+                ':hover': {
+                  color: 'blue'
                 },
-                width: "fit-content",
+                width: 'fit-content'
               }}
             >
               {item.image ? (
                 <Flex
                   sx={{
                     backgroundImage: `url("${item.image}")`,
-                    backgroundSize: "contain",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                    color: "white",
+                    backgroundSize: 'contain',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Flex
                     sx={{
                       width: 24,
-                      height: 24,
+                      height: 24
                     }}
                   />
                 </Flex>
@@ -451,15 +449,15 @@ const RegionPanel = ({ currentRegion, mobile }) => {
                 <Flex
                   sx={{
                     bg: item.color,
-                    color: "white",
+                    color: 'white',
                     p: 1,
-                    borderRadius: 6,
+                    borderRadius: 6
                   }}
                 >
                   <Icon glyph={item.icon} size={24} />
                 </Flex>
               )}
-              <Heading as="h4" sx={{ color: "inherit", fontSize: 3 }}>
+              <Heading as="h4" sx={{ color: 'inherit', fontSize: 3 }}>
                 {item.label}
               </Heading>
             </Flex>
@@ -467,8 +465,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
         ))}
       </Flex>
     </>
-  );
-};
+  )
+}
 
 const Filtering = ({ mobile, region, ...props }) => {
   return (
@@ -478,162 +476,162 @@ const Filtering = ({ mobile, region, ...props }) => {
       ))}
       <RegionPanel currentRegion={region} />
     </>
-  );
-};
+  )
+}
 
 export default function ClimatePage({ rawOrganizations, pageRegion }) {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('')
   // const [region, setRegion] = useState(pageRegion);
-  const region = pageRegion;
+  const region = pageRegion
 
   // useEffect(() => {
   //   // history.pushState(null, null, `/hcb/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
   // }, [region]);
-  const [modalOrganization, setModalOrganization] = useState(null);
+  const [modalOrganization, setModalOrganization] = useState(null)
 
   useEffect(() => {
-    const handle = (e) => {
-      if (e.key === "Escape") {
-        closeModal();
+    const handle = e => {
+      if (e.key === 'Escape') {
+        closeModal()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handle);
-    return () => window.removeEventListener("keydown", handle);
-  });
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  })
 
-  let organizations = rawOrganizations;
+  let organizations = rawOrganizations
 
   if (searchValue.length) {
     const search = fuzzysort.go(searchValue, rawOrganizations, {
-      keys: ["name", "description"],
-      threshold: -1000,
-    });
+      keys: ['name', 'description'],
+      threshold: -1000
+    })
 
-    organizations = search.map(({ obj }) => obj);
+    organizations = search.map(({ obj }) => obj)
   }
 
-  const [currentBadges, setBadges] = useState([...badges.map((x) => x.id)]);
+  const [currentBadges, setBadges] = useState([...badges.map(x => x.id)])
 
-  const openModal = (organization) => {
-    setModalOrganization(organization);
-  };
+  const openModal = organization => {
+    setModalOrganization(organization)
+  }
 
   const closeModal = () => {
-    setModalOrganization(null);
-  };
+    setModalOrganization(null)
+  }
 
   return (
     <div style={modalOrganization ? {} : {}}>
       <Meta
         as={Head}
         title={
-          "Climate-focused nonprofits" +
-          (region ? ` in ${region.label}` : " on HCB")
+          'Climate-focused nonprofits' +
+          (region ? ` in ${region.label}` : ' on HCB')
         }
         description={
-          "Nonprofits are making real environmental impact" +
-          (region ? ` in ${region.label}` : "") +
+          'Nonprofits are making real environmental impact' +
+          (region ? ` in ${region.label}` : '') +
           " with HCB's fiscal sponsorship and financial tools. Explore the climate efforts running on HCB."
         }
         image={
           region?.ogImage ??
-          "https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png"
+          'https://cloud-gv8bzwz6z-hack-club-bot.vercel.app/0frame_14__1_.png'
         }
       />
       <style>{styles}</style>
       {modalOrganization && (
         <Box
           sx={{
-            position: "fixed",
-            top: "0px",
-            left: "0px",
-            right: "0px",
-            bottom: "0px",
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            right: '0px',
+            bottom: '0px',
             zIndex: 1000,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            bg: "#00000044",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bg: '#00000044'
           }}
           onClick={closeModal}
         >
           <Card
             sx={{
-              width: "min(800px, 80%)",
-              bg: "elevated",
-              borderRadius: "10px",
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
+              width: 'min(800px, 80%)',
+              bg: 'elevated',
+              borderRadius: '10px',
+              position: 'relative',
+              display: 'flex',
+              flexDirection: 'column'
             }}
-            onClick={(e) => {
-              e.stopPropagation();
+            onClick={e => {
+              e.stopPropagation()
             }}
           >
             <Flex
               sx={{
-                position: "absolute",
-                top: "10px",
-                right: "10px",
-                width: "40px",
-                height: "40px",
-                bg: "smoke",
-                borderRadius: "50%",
-                justifyContent: "center",
-                alignItems: "center",
-                cursor: "pointer",
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                width: '40px',
+                height: '40px',
+                bg: 'smoke',
+                borderRadius: '50%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer'
               }}
             >
               <Icon glyph="view-close" size={32} onClick={closeModal} />
             </Flex>
-            <Flex sx={{ flexDirection: "column", alignItems: "start", gap: 3 }}>
+            <Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
               <Flex
                 sx={{
-                  flexDirection: "column",
-                  justifyContent: "end",
-                  width: "100%",
-                  minHeight: "200px",
+                  flexDirection: 'column',
+                  justifyContent: 'end',
+                  width: '100%',
+                  minHeight: '200px',
                   m: -4,
                   p: 4,
-                  pb: "48px",
-                  boxSizing: "content-box",
-                  backgroundPosition: "center center",
-                  color: "white",
-                  backgroundRepeat: "no-repeat",
-                  backgroundSize: "cover",
-                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`,
+                  pb: '48px',
+                  boxSizing: 'content-box',
+                  backgroundPosition: 'center center',
+                  color: 'white',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
                 }}
               >
                 <Flex
                   sx={{
-                    flexDirection: ["column", "row", "row"],
-                    alignItems: ["center", "end", "end"],
-                    justifyContent: "start",
+                    flexDirection: ['column', 'row', 'row'],
+                    alignItems: ['center', 'end', 'end'],
+                    justifyContent: 'start'
                   }}
                 >
-                  {modalOrganization.branding.logo && (
+                  {modalOrganization.branding.logo &&
                     <img
                       alt={`${modalOrganization.name}'s logo`}
                       src={modalOrganization.branding.logo}
                       sx={{
-                        width: "100px",
-                        height: "100px",
-                        borderRadius: "8px",
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '8px',
                         marginRight: [0, 4, 4],
-                        boxShadow: "0px 0px 45px 0px rgba(0, 0, 0, 0.72)",
+                        boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
                       }}
                     />
-                  )}
+                  }
                   <Text
                     variant="title"
                     sx={{
-                      wordBreak: "break-word",
-                      marginBottom: "16px",
-                      textAlign: ["center", "left", "left"],
-                      fontSize: ["48px", "48px", "64px"],
-                      color: "white",
-                      textShadow: "0px 10px 10px rgba(0, 0, 0, 0.25)",
+                      wordBreak: 'break-word',
+                      marginBottom: '16px',
+                      textAlign: ['center', 'left', 'left'],
+                      fontSize: ['48px', '48px', '64px'],
+                      color: 'white',
+                      textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
                     }}
                   >
                     {modalOrganization.name}
@@ -644,14 +642,14 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               {/* Badges */}
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  justifyContent: ["center", "start", "start"],
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  justifyContent: ['center', 'start', 'start'],
+                  alignItems: 'center',
                   gap: 2,
-                  width: "100%",
+                  width: '100%',
                   mt: -1,
                   mb: -2,
-                  flexWrap: "wrap",
+                  flexWrap: 'wrap'
                 }}
               >
                 {tags.forOrg(modalOrganization).map((tag, i) => (
@@ -661,12 +659,12 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     aria-label="Hello there"
                     sx={{
                       bg: tag.color,
-                      color: "snow",
-                      fontSize: "20px",
-                      textShadow: "none",
-                      borderRadius: "15px",
+                      color: 'snow',
+                      fontSize: '20px',
+                      textShadow: 'none',
+                      borderRadius: '15px',
                       px: 2,
-                      display: "block",
+                      display: 'block'
                     }}
                   >
                     {tag.label}
@@ -680,27 +678,27 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         <Badge badge={badge} />
                       </span>
                     </Tooltip.N>
-                  );
+                  )
                 })}
               </Flex>
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "start",
+                  flexDirection: 'row',
+                  alignItems: 'start',
                   gap: 4,
-                  width: "100%",
+                  width: '100%'
                 }}
               >
                 {/* info & buttons */}
                 <Flex
                   sx={{
-                    flexDirection: "column",
-                    alignItems: "start",
-                    flex: "1",
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    flex: '1'
                   }}
                 >
-                  <Text variant="lead" style={{ fontSize: "22px" }}>
+                  <Text variant="lead" style={{ fontSize: '22px' }}>
                     {modalOrganization.branding.description}
                   </Text>
 
@@ -708,21 +706,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   <Flex
                     sx={{
                       my: 3,
-                      display: ["flex", "flex", "none"],
-                      width: "100%",
+                      display: ['flex', 'flex', 'none'],
+                      width: '100%',
                       gap: 2,
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      alignItems: "start",
-                      alignSelf: "start",
+                      flexWrap: 'wrap',
+                      flexDirection: 'row',
+                      alignItems: 'start',
+                      alignSelf: 'start'
                     }}
                   >
                     <Text
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
-                        marginRight: 2,
+                        color: '#3b4858',
+                        marginRight: 2
                       }}
                     >
                       {modalOrganization.location.country}
@@ -731,7 +729,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                       variant="subheadline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
@@ -740,11 +738,11 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
                   <Flex
                     sx={{
-                      flexDirection: "column",
-                      alignItems: "start",
+                      flexDirection: 'column',
+                      alignItems: 'start',
                       my: 2,
                       ml: -1,
-                      gap: 1,
+                      gap: 1
                     }}
                   >
                     {modalOrganization.links.website && (
@@ -753,21 +751,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.website}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="web" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Website
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -777,21 +775,21 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                         target="_blank"
                         href={modalOrganization.links.financials}
                         sx={{
-                          flexDirection: "row",
-                          justifyContent: "start",
-                          alignItems: "center",
-                          color: "slate",
-                          textDecoration: "none",
+                          flexDirection: 'row',
+                          justifyContent: 'start',
+                          alignItems: 'center',
+                          color: 'slate',
+                          textDecoration: 'none'
                         }}
                       >
                         <Icon glyph="explore" size={38} />
-                        <Text style={{ fontSize: "20px", marginLeft: "6px" }}>
+                        <Text style={{ fontSize: '20px', marginLeft: '6px' }}>
                           Transparent Finances
                         </Text>
                         <Icon
                           glyph="external"
                           size={20}
-                          style={{ marginLeft: "2px", marginBottom: "6px" }}
+                          style={{ marginLeft: '2px', marginBottom: '6px' }}
                         />
                       </Flex>
                     )}
@@ -800,46 +798,46 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                 {/* desktop stats */}
                 <Flex
                   sx={{
-                    display: ["none", "none", "flex"],
-                    maxWidth: "30%",
-                    flexDirection: "column",
-                    alignItems: "start",
-                    alignSelf: "start",
+                    display: ['none', 'none', 'flex'],
+                    maxWidth: '30%',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    alignSelf: 'start'
                   }}
                 >
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.country}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Country
                     </Text>
                   </Flex>
-                  <Flex sx={{ flexDirection: "column", alignItems: "start" }}>
+                  <Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
                     <Text
                       variant="headline"
                       sx={{
                         mb: 0,
-                        color: "#3b4858",
+                        color: '#3b4858'
                       }}
                     >
                       {modalOrganization.location.continent}
                     </Text>
                     <Text
                       sx={{
-                        color: "#5b616a",
-                        fontSize: "20px",
+                        color: '#5b616a',
+                        fontSize: '20px'
                       }}
                     >
                       Continent
@@ -850,10 +848,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
 
               <Flex
                 sx={{
-                  flexDirection: "row",
-                  width: "100%",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
                 }}
               >
                 <Button
@@ -862,26 +860,26 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   href={modalOrganization.links.donations}
                   target="_blank"
                   sx={{
-                    backgroundImage: (t) => t.util.gx("green", "blue"),
-                    width: ["100%", "auto", "auto"],
+                    backgroundImage: t => t.util.gx('green', 'blue'),
+                    width: ['100%', 'auto', 'auto']
                   }}
                 >
                   <Flex
                     sx={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "24px",
-                      height: "24px",
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '24px',
+                      height: '24px',
                       marginLeft: -1,
-                      marginRight: 2,
+                      marginRight: 2
                     }}
                   >
-                    <Icon glyph="friend" size={20} style={{ scale: "2.5" }} />
+                    <Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
                   </Flex>
                   Make a Donation
                 </Button>
-                <Text sx={{ display: ["none", "none", "block"] }}>
+                <Text sx={{ display: ['none', 'none', 'block'] }}>
                   All donations are tax-deductible.
                 </Text>
               </Flex>
@@ -896,42 +894,42 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-ff8eau8q5-hack-club-bot.vercel.app/0jeremy-bishop-ewkxn5capa4-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 512px)",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
-              color: "white",
+              width: '100%',
+              maxWidth: 'calc(48rem + 512px)',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)',
+              color: 'white'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 7],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 7]
               }}
               as="h1"
               variant="title"
             >
               <Flex
-                sx={{ justifyContent: "center", alignItems: "center", mb: 2 }}
+                sx={{ justifyContent: 'center', alignItems: 'center', mb: 2 }}
               >
                 <MSparkles
-                  colors={["green", "teal", "blue"]}
+                  colors={['green', 'teal', 'blue']}
                   path={`M491.9,156.3c-19.4-46-51.9-85-92.7-112.6C358.3,16.1,309,0,256,0c-35.3,0-69,7.2-99.7,20.1c-46,19.4-85,51.9-112.6,92.7
 	C16.1,153.7,0,203,0,256c0,35.3,7.2,69,20.1,99.7c19.4,46,51.9,85,92.7,112.6C153.7,495.9,203,512,256,512c35.3,0,69-7.2,99.7-20.1
 	c46-19.4,85-51.9,112.6-92.7C495.9,358.3,512,309,512,256C512,220.7,504.8,187,491.9,156.3z M123.2,81.3c-1,11.8,2.5,23.7,9.9,33.1
@@ -970,23 +968,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                   />
                 </MSparkles>
               </Flex>
-              Climate-focused nonprofits on{" "}
-              <span sx={{ whiteSpace: "nowrap" }}>HCB</span>
+              Climate-focused nonprofits on{' '}
+              <span sx={{ whiteSpace: 'nowrap' }}>HCB</span>
               {region ? (
                 <>
-                  {" "}
+                  {' '}
                   in
                   <span
                     sx={{
-                      display: ["none", "inline"],
-                      whiteSpace: "nowrap",
+                      display: ['none', 'inline'],
+                      whiteSpace: 'nowrap',
                       bg: region.iconColor,
                       pl: 3,
                       pr: 18,
                       mx: -1,
                       borderRadius: 8,
-                      textShadow: "none",
-                      ml: 2,
+                      textShadow: 'none',
+                      ml: 2
                     }}
                   >
                     <img
@@ -997,22 +995,22 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
                     {region.label}
                   </span>
                   <span
-                    sx={{ display: ["inline", "none"], whiteSpace: "nowrap" }}
+                    sx={{ display: ['inline', 'none'], whiteSpace: 'nowrap' }}
                   >
-                    {" " + region.label}
+                    {' ' + region.label}
                   </span>
                 </>
               ) : (
-                ""
+                ''
               )}
             </Heading>
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
+                textAlign: 'center',
                 my: 4,
-                maxWidth: "956px",
-                mx: "auto",
+                maxWidth: '956px',
+                mx: 'auto'
               }}
             >
               Nonprofits are making real environmental impact with HCB's fiscal
@@ -1025,22 +1023,23 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               href="#listings"
               sx={{
                 mt: [0, 2],
-                backgroundImage: (t) => t.util.gx("green", "blue"),
-                height: "56px",
+                backgroundImage: t => t.util.gx('green', 'blue'),
+                height: '56px'
               }}
             >
               EXPLORE IMPACT
             </Button>
+
           </Box>
         </Box>
 
         <Grid
           columns="auto 3fr"
           sx={{
-            "@media screen and (max-width: 991.98px)": {
-              display: "block",
+            '@media screen and (max-width: 991.98px)': {
+              display: 'block'
             },
-            position: "relative",
+            position: 'relative'
           }}
           id="listings"
         >
@@ -1049,19 +1048,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 py: [0, 4],
                 mb: [4, 0],
-                marginLeft: "max(calc(50vw - 900px), 0px)",
-                "@media screen and (max-width: 991.98px)": {
-                  display: "none",
+                marginLeft: 'max(calc(50vw - 900px), 0px)',
+                '@media screen and (max-width: 991.98px)': {
+                  display: 'none'
                 },
-                "@media screen and (min-width: 992px)": {
-                  position: "sticky",
+                '@media screen and (min-width: 992px)': {
+                  position: 'sticky',
                   top: 80,
-                  alignSelf: "start",
-                },
+                  alignSelf: 'start'
+                }
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges, false]}
+                badges={[setBadges, currentBadges, 'Badges', badges, false]}
                 region={region}
               />
             </Box>
@@ -1071,33 +1070,33 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               <Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
                 <Input
                   placeholder="Search Organizations"
-                  onChange={(e) => setSearchValue(e.target.value)}
+                  onChange={e => setSearchValue(e.target.value)}
                   value={searchValue}
                   sx={{
-                    border: "2px solid " + theme.colors.muted,
-                    textAlign: ["left", "left", "left"],
-                    width: "100%",
-                    height: "100%",
-                    bg: "sheet",
-                    fontSize: "18px",
-                    padding: "12px",
+                    border: '2px solid ' + theme.colors.muted,
+                    textAlign: ['left', 'left', 'left'],
+                    width: '100%',
+                    height: '100%',
+                    bg: 'sheet',
+                    fontSize: '18px',
+                    padding: '12px'
                   }}
                 />
               </Box>
             </Flex>
             <Box
               sx={{
-                "@media screen and (max-width: 991.99px)": {
-                  display: "block",
+                '@media screen and (max-width: 991.99px)': {
+                  display: 'block'
                 },
-                "@media screen and (min-width: 992px)": {
-                  display: "none",
+                '@media screen and (min-width: 992px)': {
+                  display: 'none'
                 },
-                my: 2,
+                my: 2
               }}
             >
               <Filtering
-                badges={[setBadges, currentBadges, "Badges", badges]}
+                badges={[setBadges, currentBadges, 'Badges', badges]}
                 region={region}
                 mobile
               />
@@ -1105,17 +1104,17 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             {organizations.length === 0 && (
               <Box
                 sx={{
-                  textAlign: "center",
-                  p: 5,
+                  textAlign: 'center',
+                  p: 5
                 }}
               >
                 <Box>
                   <Text
                     variant="headline"
                     sx={{
-                      textTransform: "unset",
-                      display: "block",
-                      mb: 0,
+                      textTransform: 'unset',
+                      display: 'block',
+                      mb: 0
                     }}
                   >
                     No results
@@ -1125,19 +1124,19 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             )}
             <Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
               {organizations
-                .map((org) => new Organization(org))
-                .filter((organization) => {
+                .map(org => new Organization(org))
+                .filter(organization => {
                   const organizationBadgeIds = badges
                     .forOrg(organization)
-                    .map((badge) => badge.id);
+                    .map(badge => badge.id)
 
                   return (
                     currentBadges.length === badges.length ||
                     intersection(organizationBadgeIds, currentBadges).length ===
                       currentBadges.length
-                  );
+                  )
                 })
-                .map((organization) => (
+                .map(organization => (
                   <OrganizationCard
                     organization={organization}
                     key={organization.id}
@@ -1154,32 +1153,32 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             mt: [5, 3, 0],
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-hc1lyhwxy-hack-club-bot.vercel.app/0marita-kavelashvili-ugnrxk1129g-unsplash.jpg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            color: "white",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'white'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              maxWidth: "calc(48rem + 312px)",
-              mx: "auto",
-              px: "16px",
+              width: '100%',
+              maxWidth: 'calc(48rem + 312px)',
+              mx: 'auto',
+              px: '16px'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [2, 4],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
-                fontSize: [5, null, 6, 6],
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)',
+                fontSize: [5, null, 6, 6]
               }}
               as="h3"
               variant="subheadline"
@@ -1189,8 +1188,8 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
             <Box
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 3,
+                textAlign: 'center',
+                my: 3
               }}
             >
               Let your money work for change by donating to all climate-focused
@@ -1205,7 +1204,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
               sx={{
                 ml: [0, 3],
                 mt: 2,
-                backgroundImage: (t) => t.util.gx("green", "blue"),
+                backgroundImage: t => t.util.gx('green', 'blue')
               }}
             >
               <Text>Donate to the climate&nbsp;fund</Text>
@@ -1215,7 +1214,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
       </Box>
       <Footer light key="footer" />
     </div>
-  );
+  )
 }
 
 /**
@@ -1231,7 +1230,7 @@ export class Organization {
      * The raw organization data.
      * @type {object}
      */
-    this.raw = rawOrganization;
+    this.raw = rawOrganization
   }
 
   /**
@@ -1239,7 +1238,7 @@ export class Organization {
    * @type {string}
    */
   get id() {
-    return this.raw.id;
+    return this.raw.id
   }
 
   /**
@@ -1247,7 +1246,7 @@ export class Organization {
    * @type {string}
    */
   get name() {
-    return this.raw.name;
+    return this.raw.name
   }
 
   /**
@@ -1255,7 +1254,7 @@ export class Organization {
    * @type {string}
    */
   get slug() {
-    return this.raw.slug;
+    return this.raw.slug
   }
 
   /**
@@ -1263,7 +1262,7 @@ export class Organization {
    * @type {boolean}
    */
   get isTransparent() {
-    return this.raw.transparent;
+    return this.raw.transparent
   }
 
   /**
@@ -1271,7 +1270,7 @@ export class Organization {
    * @type {boolean}
    */
   get isDemo() {
-    return this.raw.demo_mode;
+    return this.raw.demo_mode
   }
 
   /**
@@ -1279,7 +1278,7 @@ export class Organization {
    * @type {number}
    */
   get users() {
-    return this.raw.users.length;
+    return this.raw.users.length
   }
 
   /**
@@ -1287,7 +1286,7 @@ export class Organization {
    * @type {boolean}
    */
   get acceptsDonations() {
-    return this.raw.donation_link !== null;
+    return this.raw.donation_link !== null
   }
 
   /**
@@ -1303,8 +1302,8 @@ export class Organization {
       logo: this.raw.logo,
       donationHeader: this.raw.donation_header,
       backgroundImage: this.raw.background_image,
-      description: this.raw.description,
-    };
+      description: this.raw.description
+    }
   }
 
   /**
@@ -1317,9 +1316,9 @@ export class Organization {
   get tags() {
     return {
       type: this.raw.category,
-      category: "Coding",
-      badges: ["128_collective_funded"],
-    };
+      category: 'Coding',
+      badges: ['128_collective_funded']
+    }
   }
 
   /**
@@ -1327,7 +1326,7 @@ export class Organization {
    * @type {Date}
    */
   get createdAt() {
-    return new Date(this.raw.created_at);
+    return new Date(this.raw.created_at)
   }
 
   /**
@@ -1339,14 +1338,14 @@ export class Organization {
    */
   get links() {
     const links = {
-      website: this.raw.website,
-    };
+      website: this.raw.website
+    }
 
-    if (this.acceptsDonations) links.donations = this.raw.donation_link;
+    if (this.acceptsDonations) links.donations = this.raw.donation_link
     if (this.isTransparent)
-      links.financials = `https://hcb.hackclub.com/${this.slug}`;
+      links.financials = `https://hcb.hackclub.com/${this.slug}`
 
-    return links;
+    return links
   }
 
   /**
@@ -1360,8 +1359,8 @@ export class Organization {
     return {
       country: this.raw.location.country,
       continent: this.raw.location.continent,
-      countryCode: this.raw.location.country_code,
-    };
+      countryCode: this.raw.location.country_code
+    }
   }
 
   /**
@@ -1369,7 +1368,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Recommended() {
-    return this.raw.partners?.["128_collective"]?.recommended;
+    return this.raw.partners?.['128_collective']?.recommended
   }
 
   /**
@@ -1377,7 +1376,7 @@ export class Organization {
    * @type {boolean}
    */
   get is128Funded() {
-    return this.raw.partners?.["128_collective"]?.funded;
+    return this.raw.partners?.['128_collective']?.funded
   }
 
   /**
@@ -1385,35 +1384,35 @@ export class Organization {
    * @returns {Organization} The updated Organization instance.
    */
   async update() {
-    const response = await fetch(this.raw.href);
-    const json = await response.json();
-    this.raw = json;
+    const response = await fetch(this.raw.href)
+    const json = await response.json()
+    this.raw = json
 
-    return this;
+    return this
   }
 }
 
 export async function fetchRawClimateOrganizations() {
-  let lastLength = 100;
-  let total = [];
-  let page = 1;
+  let lastLength = 100
+  let total = []
+  let page = 1
   while (lastLength >= 100) {
     const json = await fetch(
-      "https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=" +
-        page,
-    ).then((res) => res.json());
-    lastLength = json.length;
-    page++;
-    total = [...total, ...json];
+      'https://hcb.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
+        page
+    ).then(res => res.json())
+    lastLength = json.length
+    page++
+    total = [...total, ...json]
   }
-  return total.filter((org) => org.climate);
+  return total.filter(org => org.climate)
 }
 
 export const getStaticProps = async () => {
   return {
     props: {
-      rawOrganizations: await fetchRawClimateOrganizations(),
+      rawOrganizations: await fetchRawClimateOrganizations()
     },
-    revalidate: 60, // seconds
-  };
-};
+    revalidate: 60 // seconds
+  }
+}
diff --git a/pages/hcb/first.js b/pages/hcb/first.js
index 7374a96db..ffbc111be 100644
--- a/pages/hcb/first.js
+++ b/pages/hcb/first.js
@@ -6,22 +6,22 @@ import {
   Text,
   Flex,
   Button,
-  Badge,
-} from "theme-ui";
+  Badge
+} from 'theme-ui'
 
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Features from "../../components/hcb/first/features";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Features from '../../components/hcb/first/features'
 
-import Form from "../../components/hcb/first/form";
-import Testimonials from "../../components/hcb/first/testimonials";
-import Steps from "../../components/hcb/first/steps";
-import Start from "../../components/hcb/start";
-import theme from "@hackclub/theme";
+import Form from '../../components/hcb/first/form'
+import Testimonials from '../../components/hcb/first/testimonials'
+import Steps from '../../components/hcb/first/steps'
+import Start from '../../components/hcb/start'
+import theme from '@hackclub/theme'
 
 export default function First({ stats }) {
   return (
@@ -47,42 +47,42 @@ export default function First({ stats }) {
           sx={{
             pt: [5, null, null, null, 6],
             pb: [3, 4, 5, null, 6],
-            minHeight: ["70vh", "none"],
-            textAlign: "center",
+            minHeight: ['70vh', 'none'],
+            textAlign: 'center',
             backgroundImage:
               "linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
           }}
         >
           <Box
             sx={{
-              width: "100%",
-              mx: "auto",
-              px: "16px",
-              backdropFilter: "blur(1.5px)",
+              width: '100%',
+              mx: 'auto',
+              px: '16px',
+              backdropFilter: 'blur(1.5px)'
             }}
           >
             <Heading
               sx={{
-                textAlign: "center",
+                textAlign: 'center',
                 mt: [5, null, 6],
-                textShadow: "0 0 16px rgba(0, 0, 0, 1)",
+                textShadow: '0 0 16px rgba(0, 0, 0, 1)'
               }}
               as="h1"
               variant="ultratitle"
             >
-              The ultimate financial tool for{" "}
+              The ultimate financial tool for{' '}
               <Text
                 as="span"
                 sx={{
-                  WebkitTextStroke: (theme) => theme.colors.blue,
-                  WebkitTextStrokeWidth: "1px",
-                  WebkitTextFillColor: (theme) => theme.colors.white,
-                  textShadow: (theme) => `0 0 12px ${theme.colors.blue}`,
+                  WebkitTextStroke: theme => theme.colors.blue,
+                  WebkitTextStrokeWidth: '1px',
+                  WebkitTextFillColor: theme => theme.colors.white,
+                  textShadow: theme => `0 0 12px ${theme.colors.blue}`
                 }}
               >
                 FRC, FTC, and FLL teams
@@ -92,45 +92,45 @@ export default function First({ stats }) {
             <Badge
               variant="pill"
               sx={{
-                bg: "rgba(132,146,166, 0.5)",
-                color: "white",
-                fontWeight: "normal",
+                bg: 'rgba(132,146,166, 0.5)',
+                color: 'white',
+                fontWeight: 'normal',
                 fontSize: 2,
                 mt: 3,
-                mx: "auto",
-                borderRadius: ["default", null, "extra"],
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
               }}
             >
               <Box
                 as="div"
                 sx={{
-                  display: ["grid", "grid", "flex"],
-                  flexDirection: [null, "row", "row"],
-                  gridTemplateColumns: ["1fr", "1fr 1fr"],
+                  display: ['grid', 'grid', 'flex'],
+                  flexDirection: [null, 'row', 'row'],
+                  gridTemplateColumns: ['1fr', '1fr 1fr']
                 }}
               >
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Receive grants</Text>
                 </Box>
                 <Box
                   as="span"
-                  sx={{ display: "flex", flexDirection: "row", mr: 4 }}
+                  sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
                 >
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>Debit cards</Text>
                 </Box>
-                <Box as="span" sx={{ display: "flex", flexDirection: "row" }}>
+                <Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
                   <Icon glyph="checkmark" size={28} color="#33d6A6" />
                   <Text sx={{ ml: 1 }}>No start-up costs</Text>
                 </Box>
@@ -139,8 +139,8 @@ export default function First({ stats }) {
             <Container
               sx={{
                 fontSize: [2, 3, 3],
-                textAlign: "center",
-                my: 4,
+                textAlign: 'center',
+                my: 4
               }}
               variant="copy"
             >
@@ -151,10 +151,10 @@ export default function First({ stats }) {
 
             <Box
               sx={{
-                display: "flex",
-                flexDirection: ["column", null, "row"],
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                flexDirection: ['column', null, 'row'],
+                justifyContent: 'center',
+                alignItems: 'center'
               }}
             >
               <Button variant="ctaLg" as="a" href="#demo">
@@ -163,9 +163,9 @@ export default function First({ stats }) {
 
               <Button
                 sx={{
-                  backgroundImage: theme.util.gx("cyan", "blue"),
+                  backgroundImage: theme.util.gx('cyan', 'blue'),
                   ml: 2,
-                  display: ["none", null, "inline-block"], // hide on mobile because viewing pdfs on mobile is a pain anyways
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                 }}
                 variant="ctaLg"
                 as="a"
@@ -192,17 +192,17 @@ export default function First({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/hcb/fiscal-sponsorship.js b/pages/hcb/fiscal-sponsorship.js
index fa3da75f3..0f304a3a2 100644
--- a/pages/hcb/fiscal-sponsorship.js
+++ b/pages/hcb/fiscal-sponsorship.js
@@ -1,72 +1,72 @@
-import { Box, Card, Container, Flex, Link, Text } from "theme-ui";
-import { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
-import FlexCol from "../../components/flex-col";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Icon from "../../components/icon";
-import Tilt from "../../components/tilt";
+import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef, useState } from 'react'
+import { keyframes } from '@emotion/react'
+import FlexCol from '../../components/flex-col'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Icon from '../../components/icon'
+import Tilt from '../../components/tilt'
 
 function Bullet({ glow = true, icon, href, children }) {
   let effectColours = [
-    "#ec3750",
-    "#ff8c37",
-    "#f1c40f",
-    "#33d6a6",
-    "#5bc0de",
-    "#338eda",
-    "#a633d6",
-  ];
+    '#ec3750',
+    '#ff8c37',
+    '#f1c40f',
+    '#33d6a6',
+    '#5bc0de',
+    '#338eda',
+    '#a633d6'
+  ]
 
   function keyframeGenerator(spread, blur, colours, opacity = 0.5) {
     let hexOpacity = Math.max(Math.min(Math.round(opacity * 255), 255), 0)
       .toString(16)
-      .padStart(2, "0");
+      .padStart(2, '0')
 
-    let final = {};
+    let final = {}
     for (let i = 0; i <= 100; i++) {
-      let baseX = Math.sin((i * Math.PI) / 50); // 50 keyframes for each pi radians
-      let baseY = -Math.cos((i * Math.PI) / 50);
+      let baseX = Math.sin((i * Math.PI) / 50) // 50 keyframes for each pi radians
+      let baseY = -Math.cos((i * Math.PI) / 50)
 
       // Ensure no scientific notation
-      const roundFactor = 1_000_000;
-      baseX = Math.round(baseX * roundFactor) / roundFactor;
-      baseY = Math.round(baseY * roundFactor) / roundFactor;
+      const roundFactor = 1_000_000
+      baseX = Math.round(baseX * roundFactor) / roundFactor
+      baseY = Math.round(baseY * roundFactor) / roundFactor
 
-      let boxShadow = "";
+      let boxShadow = ''
       for (let c = 0; c < colours.length; c++) {
         // Rotate by 2pi / colours.length * c radians
         let x =
           baseX * Math.cos((2 * Math.PI * c) / colours.length) -
-          baseY * Math.sin((2 * Math.PI * c) / colours.length);
+          baseY * Math.sin((2 * Math.PI * c) / colours.length)
         let y =
           baseX * Math.sin((2 * Math.PI * c) / colours.length) +
-          baseY * Math.cos((2 * Math.PI * c) / colours.length);
+          baseY * Math.cos((2 * Math.PI * c) / colours.length)
 
         boxShadow += `${x * spread}px ${y * spread}px ${blur}px ${
           colours[c]
-        }${hexOpacity},`;
+        }${hexOpacity},`
       }
 
       // Remove trailing comma
-      boxShadow = boxShadow.slice(0, -1);
+      boxShadow = boxShadow.slice(0, -1)
 
-      final[i + "%"] = { boxShadow };
+      final[i + '%'] = { boxShadow }
     }
 
-    return final;
+    return final
   }
 
-  const shadowSpread = glow ? 5 : 0;
-  const shadowBlur = glow ? 10 : 0;
+  const shadowSpread = glow ? 5 : 0
+  const shadowBlur = glow ? 10 : 0
   const animatedBoxShadow = keyframes(
-    keyframeGenerator(shadowSpread, shadowBlur, effectColours),
-  );
+    keyframeGenerator(shadowSpread, shadowBlur, effectColours)
+  )
 
-  const borderWidth = "2px";
+  const borderWidth = '2px'
 
   return (
     <Tilt>
@@ -75,123 +75,123 @@ function Bullet({ glow = true, icon, href, children }) {
         {...(href && { href })}
         target="_blank"
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
 
-          width: "20rem",
+          width: '20rem',
 
           borderWidth,
-          borderRadius: "8px !important",
-          p: "8px !important",
+          borderRadius: '8px !important',
+          p: '8px !important',
 
-          textDecoration: "none",
-          color: "inherit",
+          textDecoration: 'none',
+          color: 'inherit',
 
-          backgroundColor: "var(--theme-ui-colors-darkless)",
+          backgroundColor: 'var(--theme-ui-colors-darkless)',
 
-          "&:hover::after": {
+          '&:hover::after': {
             content: '""',
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             boxShadow: `linear-gradient(60deg, ${effectColours[0]}, ${effectColours[1]}, ${effectColours[2]}, ${effectColours[3]}, ${effectColours[4]})`,
-            borderRadius: "inherit",
+            borderRadius: 'inherit',
             zIndex: -1,
-            animation: `${animatedBoxShadow} 5s ease infinite`,
-          },
+            animation: `${animatedBoxShadow} 5s ease infinite`
+          }
         }}
       >
-        <Icon glyph={icon} size={42} sx={{ color: "red", flexShrink: 0 }} />
-        <Box sx={{ textAlign: "left" }}>{children}</Box>
+        <Icon glyph={icon} size={42} sx={{ color: 'red', flexShrink: 0 }} />
+        <Box sx={{ textAlign: 'left' }}>{children}</Box>
         {href && (
           <Icon
             glyph="external-fill"
             size={32}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              translate: "50% -50%",
-              color: "muted",
+              translate: '50% -50%',
+              color: 'muted'
             }}
           />
         )}
       </Flex>
     </Tilt>
-  );
+  )
 }
 
-function BulletBox({ padding = "2rem", children }) {
+function BulletBox({ padding = '2rem', children }) {
   return (
     <Box
       as="ul"
       sx={{
-        width: "100%",
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gridGap: "2rem",
-        padding,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gridGap: '2rem',
+        padding
       }}
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Section({ id, children }) {
   return (
-    <Flex as="section" id={id} sx={{ flexDirection: "column", pt: 5 }}>
+    <Flex as="section" id={id} sx={{ flexDirection: 'column', pt: 5 }}>
       {children}
     </Flex>
-  );
+  )
 }
 
 export default function FiscalSponsorship() {
-  const gridRef = useRef();
-  const glowRef = useRef();
+  const gridRef = useRef()
+  const glowRef = useRef()
 
-  const scrollPos = useRef(0);
-  const mousePos = useRef([0, 0]);
+  const scrollPos = useRef(0)
+  const mousePos = useRef([0, 0])
 
   const setGlowMaskPosition = () => {
     const finalPos = [
       -mousePos.current[0],
-      -mousePos.current[1] + scrollPos.current,
-    ];
-    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
-  };
+      -mousePos.current[1] + scrollPos.current
+    ]
+    glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+    glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`
+  }
 
   useEffect(() => {
-    const handleScroll = (e) => {
-      scrollPos.current = -window.scrollY / 10;
+    const handleScroll = e => {
+      scrollPos.current = -window.scrollY / 10
 
-      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`;
+      gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-      setGlowMaskPosition();
-    };
+      setGlowMaskPosition()
+    }
 
-    const handleMouseMove = (e) => {
-      const x = e.clientX;
-      const y = e.clientY;
-      glowRef.current.style.left = x + "px";
-      glowRef.current.style.top = y + "px";
+    const handleMouseMove = e => {
+      const x = e.clientX
+      const y = e.clientY
+      glowRef.current.style.left = x + 'px'
+      glowRef.current.style.top = y + 'px'
 
-      mousePos.current = [x, y];
-      setGlowMaskPosition();
-    };
+      mousePos.current = [x, y]
+      setGlowMaskPosition()
+    }
 
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('mousemove', handleMouseMove)
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
 
   return (
-    <Box as="main" key="main" sx={{ position: "relative" }}>
+    <Box as="main" key="main" sx={{ position: 'relative' }}>
       <style>
         {`* {
             scroll-behavior: smooth;
@@ -204,37 +204,37 @@ export default function FiscalSponsorship() {
       <Box
         ref={gridRef}
         sx={{
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
-          height: "1000%",
+          height: '1000%',
           zIndex: -2,
-          backgroundSize: "20px 20px",
+          backgroundSize: '20px 20px',
           backgroundImage: `linear-gradient(to right,  #23262D 1px, transparent 1px), 
                                       linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          backgroundPosition: "top left",
-          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
+          backgroundPosition: 'top left',
+          maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`
         }}
       />
       <Box
         ref={glowRef}
         sx={{
-          pointerEvents: "none",
+          pointerEvents: 'none',
           zIndex: -2,
-          position: "fixed",
-          top: "0",
-          left: "0",
-          width: "20rem",
-          height: "20rem",
-          background: "red",
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '20rem',
+          height: '20rem',
+          background: 'red',
           opacity: 0.2,
-          borderRadius: "50%",
-          filter: "blur(2rem)",
-          translate: "-50% -50%",
+          borderRadius: '50%',
+          filter: 'blur(2rem)',
+          translate: '-50% -50%',
           // Mask it to the grid background
           maskImage: `linear-gradient(to right, #23262D 1px, transparent 1px), 
                                 linear-gradient(to bottom, #23262D 1px, transparent 1px) `,
-          maskSize: "20px 20px, 20px 20px, cover",
-          maskPosition: "0px 0px",
+          maskSize: '20px 20px, 20px 20px, cover',
+          maskPosition: '0px 0px'
         }}
       />
       <Nav dark />
@@ -248,18 +248,18 @@ export default function FiscalSponsorship() {
         <title>Fiscal Sponsorship | HCB</title>
       </Meta>
 
-      <Container sx={{ textAlign: "center", mt: 6 }}>
+      <Container sx={{ textAlign: 'center', mt: 6 }}>
         <FlexCol gap={4} alignItems="center">
           <FlexCol gap={4} alignItems="center">
             <Text variant="ultratitle">Fiscal sponsorship</Text>
             <Text variant="title">
               <Text
                 sx={{
-                  color: "red",
-                  textShadow: "0 0 50px var(--theme-ui-colors-red)",
+                  color: 'red',
+                  textShadow: '0 0 50px var(--theme-ui-colors-red)'
                 }}
               >
-                501(c)(3)&nbsp;nonprofit{" "}
+                501(c)(3)&nbsp;nonprofit{' '}
               </Text>
               status in just 24 hours for your mission
             </Text>
@@ -302,8 +302,8 @@ export default function FiscalSponsorship() {
               <Bullet glow={false} icon="sad">
                 $3,000 in <b>up-front costs</b>, from
                 <Link href="https://www.irs.gov/charities-non-profits/form-1023-and-1023-ez-amount-of-user-fee">
-                  {" "}
-                  forms{" "}
+                  {' '}
+                  forms{' '}
                 </Link>
                 to state fees to support from legal counsel
               </Bullet>
@@ -463,23 +463,23 @@ export default function FiscalSponsorship() {
       </Container>
       <Box
         sx={{
-          height: "100px",
-          position: "relative",
-          width: "100%",
-          overflow: "hidden",
+          height: '100px',
+          position: 'relative',
+          width: '100%',
+          overflow: 'hidden',
 
-          "&::after": {
+          '&::after': {
             content: '""',
-            width: "500%",
-            height: "100%",
+            width: '500%',
+            height: '100%',
 
-            position: "absolute",
-            translate: "-50% 100%",
-            boxShadow: "0 -64px 64px #17171d",
-          },
+            position: 'absolute',
+            translate: '-50% 100%',
+            boxShadow: '0 -64px 64px #17171d'
+          }
         }}
       />
       <Footer dark />
     </Box>
-  );
+  )
 }
diff --git a/pages/hcb/index.js b/pages/hcb/index.js
index 215bf49c7..7cc34281a 100644
--- a/pages/hcb/index.js
+++ b/pages/hcb/index.js
@@ -1,15 +1,15 @@
-import { Box } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Landing from "../../components/hcb/landing";
-import Features from "../../components/hcb/features";
-import Testimonials from "../../components/hcb/testimonials";
-import Everything from "../../components/hcb/everything";
-import Start from "../../components/hcb/start";
-import Nonprofits from "../../components/hcb/nonprofits";
+import { Box } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Landing from '../../components/hcb/landing'
+import Features from '../../components/hcb/features'
+import Testimonials from '../../components/hcb/testimonials'
+import Everything from '../../components/hcb/everything'
+import Start from '../../components/hcb/start'
+import Nonprofits from '../../components/hcb/nonprofits'
 
 const styles = `
   html {
@@ -23,7 +23,7 @@ const styles = `
   input:-webkit-autofill {
     -webkit-text-fill-color: white;
   }
-`;
+`
 
 export default function Bank({ stats }) {
   return (
@@ -55,17 +55,17 @@ export default function Bank({ stats }) {
       </Box>
       <Footer dark key="footer" />
     </>
-  );
+  )
 }
 
 export async function getStaticProps(context) {
-  const res = await fetch(`https://hcb.hackclub.com/stats`);
-  const stats = await res.json();
+  const res = await fetch(`https://hcb.hackclub.com/stats`)
+  const stats = await res.json()
 
   return {
     props: {
-      stats,
+      stats
     },
-    revalidate: 10,
-  };
+    revalidate: 10
+  }
 }
diff --git a/pages/jobs/brand-director.js b/pages/jobs/brand-director.js
index ec7b03953..3e73ceed3 100644
--- a/pages/jobs/brand-director.js
+++ b/pages/jobs/brand-director.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/brand-director/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/brand-director/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Hack Club Brand Director
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/clubs-lead.js b/pages/jobs/clubs-lead.js
index 9a9ed7baf..604529b56 100644
--- a/pages/jobs/clubs-lead.js
+++ b/pages/jobs/clubs-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/clubs-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/clubs-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "purple"),
+        backgroundImage: theme => theme.util.gx('blue', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Clubs Lead @ Hack Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/customer-success-lead.js b/pages/jobs/customer-success-lead.js
index f98dc9691..cdd39da87 100644
--- a/pages/jobs/customer-success-lead.js
+++ b/pages/jobs/customer-success-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/customer-success-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/customer-success-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "yellow"),
+        backgroundImage: theme => theme.util.gx('red', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Customer Success Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/education-engineer.js b/pages/jobs/education-engineer.js
index ca5651437..3732fd873 100644
--- a/pages/jobs/education-engineer.js
+++ b/pages/jobs/education-engineer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/education-engineer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/education-engineer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "orange"),
+        backgroundImage: theme => theme.util.gx('red', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title">
           Education Engineer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -36,12 +36,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/events-designer.js b/pages/jobs/events-designer.js
index 985445df4..03bbb0f6b 100644
--- a/pages/jobs/events-designer.js
+++ b/pages/jobs/events-designer.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("#516395", "#614385"),
+        backgroundImage: theme => theme.util.gx('#516395', '#614385')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Events Designer @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -48,10 +39,10 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
-      <Text sx={{ fontStyle: "italic" }}>
+      <Text sx={{ fontStyle: 'italic' }}>
         This role has been filled as of February 8th, 2022.
       </Text>
       <Heading
@@ -70,41 +61,41 @@ const Page = () => (
         gap={3}
         columns={[null, null, 3]}
         sx={{
-          "> div": {
+          '> div': {
             p: 3,
-            fontSize: 2,
-          },
+            fontSize: 2
+          }
         }}
       >
         <Card variant="sunken">
-          42 Hack Clubbers{" "}
+          42 Hack Clubbers{' '}
           <Link
             href="https://www.youtube.com/watch?v=2BID8_pGuqA"
             target="_blank"
             rel="noopener noreferrer"
           >
             rode a train
-          </Link>{" "}
+          </Link>{' '}
           across America to SpaceX.
         </Card>
         <Card variant="sunken">
-          We hosted{" "}
+          We hosted{' '}
           <Link
             href="https://hackclub.com/amas/"
             target="_blank"
             rel="noopener noreferrer"
           >
             AMAs
-          </Link>{" "}
-          with people like{" "}
+          </Link>{' '}
+          with people like{' '}
           <Link
             href="https://www.youtube.com/watch?v=riru9OzScwk"
             target="_blank"
             rel="noopener noreferrer"
           >
             Elon Musk
-          </Link>{" "}
-          and{" "}
+          </Link>{' '}
+          and{' '}
           <Link
             href="https://www.youtube.com/watch?v=gw3vyFZ4oeU"
             target="_blank"
@@ -115,7 +106,7 @@ const Page = () => (
           .
         </Card>
         <Card variant="sunken">
-          We gave 300 teenagers $50,000 for{" "}
+          We gave 300 teenagers $50,000 for{' '}
           <Link
             href="https://summer.hackclub.com/"
             target="_blank"
@@ -128,7 +119,7 @@ const Page = () => (
       </Grid>
 
       <Text as="p">
-        We're looking for someone <strong>fun, creative, and technical</strong>{" "}
+        We're looking for someone <strong>fun, creative, and technical</strong>{' '}
         to excite and grow the community.
       </Text>
 
@@ -138,21 +129,21 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               my: 3,
               gap: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card
               sx={{
                 background:
-                  "radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)",
-                color: "white",
+                  'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
+                color: 'white'
               }}
             >
               You're passionate about building technical projects and find
@@ -161,8 +152,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-                color: "white",
+                background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+                color: 'white'
               }}
             >
               You've worked with teenagers and are excited to work 1:1 with them
@@ -171,8 +162,8 @@ const Page = () => (
 
             <Card
               sx={{
-                background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-                color: "white",
+                background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+                color: 'white'
               }}
             >
               You have event planning or media production experience and want to
@@ -199,14 +190,14 @@ const Page = () => (
 
           <Flex
             sx={{
-              flexDirection: "column",
+              flexDirection: 'column',
               gap: 3,
               my: 3,
               pr: [0, 0, 5],
-              "> div": {
+              '> div': {
                 p: 3,
-                fontSize: 2,
-              },
+                fontSize: 2
+              }
             }}
           >
             <Card variant="sunken">
@@ -214,7 +205,7 @@ const Page = () => (
               months
             </Card>
             <Card variant="sunken">
-              Support Hack Clubbers in creating and executing{" "}
+              Support Hack Clubbers in creating and executing{' '}
               <Link
                 href="https://scrapbook.hackclub.com/"
                 target="_blank"
@@ -224,7 +215,7 @@ const Page = () => (
               </Link>
             </Card>
             <Card variant="sunken">
-              Revive{" "}
+              Revive{' '}
               <Link
                 href="https://hackclub.com/night/"
                 target="_blank"
@@ -258,7 +249,7 @@ const Page = () => (
           src="/home/flagship_4.jpg"
           alt={
             <>
-              Hack Clubbers at{" "}
+              Hack Clubbers at{' '}
               <Link
                 href="https://photos.app.goo.gl/F5JDxq5FzfhofTMD9"
                 target="_blank"
@@ -276,20 +267,20 @@ const Page = () => (
           src="/home/golden-train.png"
           alt={
             <>
-              The{" "}
+              The{' '}
               <Link
                 href="https://zephyr.hackclub.com/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 world's longest hackathon
-              </Link>{" "}
+              </Link>{' '}
               on land
             </>
           }
           width={500}
           height={326.5}
-          sx={{ display: ["none", "none", "block"] }}
+          sx={{ display: ['none', 'none', 'block'] }}
           showAlt
         />
         <Photo
@@ -297,28 +288,28 @@ const Page = () => (
           alt="One of the workshops run by community members"
           width={500}
           height={326.5}
-          sx={{ display: ["none", "block", "block"] }}
+          sx={{ display: ['none', 'block', 'block'] }}
           showAlt
         />
       </Grid>
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          This is not a normal job. For the last 18 months, a{" "}
+          This is not a normal job. For the last 18 months, a{' '}
           <Link
             href="https://hackclub.com/team/"
             target="_blank"
             rel="noopener noreferrer"
           >
             small team
-          </Link>{" "}
+          </Link>{' '}
           has produced a series of online events, and we're excited to hire an
           incredible, technical person to carry forward and build on these
           ideas. You'd be our 9th or so full-time staff member.
         </Text>
 
         <Text as="p">
-          In the{" "}
+          In the{' '}
           <Link
             href="https://hackclub.com/slack/"
             target="_blank"
@@ -328,7 +319,7 @@ const Page = () => (
           </Link>
           , you'll work with our community to create the best and most inclusive
           place on the internet for technical teenagers. To work at Hack Club,
-          you need to have a background in programming, but{" "}
+          you need to have a background in programming, but{' '}
           <strong>you should be inspired by making things fun.</strong>
         </Text>
 
@@ -348,10 +339,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -374,7 +365,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -385,19 +376,19 @@ const Page = () => (
       </Flex>
 
       <Box as="p" mt={5}>
-        <strong>How to apply:</strong> Email{" "}
+        <strong>How to apply:</strong> Email{' '}
         <Link
           href="mailto:jobs@hackclub.com"
           target="_blank"
           rel="noopener noreferrer"
         >
           jobs@hackclub.com
-        </Link>{" "}
+        </Link>{' '}
         with "golden" in the subject line, 3 bullet points demonstrating why you
         would be exceptional for the role, and your resume.
       </Box>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-assistant.js b/pages/jobs/executive-assistant.js
index 97bc4f167..4336a9193 100644
--- a/pages/jobs/executive-assistant.js
+++ b/pages/jobs/executive-assistant.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-assistant/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-assistant/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Assistant @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/executive-producer.js b/pages/jobs/executive-producer.js
index b834ed129..010b66de2 100644
--- a/pages/jobs/executive-producer.js
+++ b/pages/jobs/executive-producer.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/executive-producer/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/executive-producer/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Executive Producer
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-associate.js b/pages/jobs/hcb-ops-associate.js
index 00e50311f..b13c5147d 100644
--- a/pages/jobs/hcb-ops-associate.js
+++ b/pages/jobs/hcb-ops-associate.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-associate/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-associate/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Associate
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/hcb-ops-lead.js b/pages/jobs/hcb-ops-lead.js
index 12262272e..421ed3bee 100644
--- a/pages/jobs/hcb-ops-lead.js
+++ b/pages/jobs/hcb-ops-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/hcb-ops-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/hcb-ops-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("red", "purple"),
+        backgroundImage: theme => theme.util.gx('red', 'purple')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           HCB Operations Lead
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 1ed1a9630..c6a547e9b 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,21 +1,21 @@
-import { Box, Container, Heading, Card, Text, Grid } from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "/components/force-theme";
-import Nav from "../../components/nav";
-import Footer from "../../components/footer";
-import Link from "next/link";
-import Icon from "../../components/icon";
-import Image from "next/image";
-import zephyrPic from "../../public/jobs/zephyr-group-pic.jpg";
-import { compact } from "lodash";
+import { Box, Container, Heading, Card, Text, Grid } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '/components/force-theme'
+import Nav from '../../components/nav'
+import Footer from '../../components/footer'
+import Link from 'next/link'
+import Icon from '../../components/icon'
+import Image from 'next/image'
+import zephyrPic from '../../public/jobs/zephyr-group-pic.jpg'
+import { compact } from 'lodash'
 
 const JobListing = ({
   positionName,
   positionDesc,
   positionLink,
   positionLocation,
-  positionType,
+  positionType
 }) => (
   <Link href={positionLink} passHref>
     <Card
@@ -23,26 +23,26 @@ const JobListing = ({
       as="a"
       target="_blank"
       sx={{
-        width: "100%",
-        textDecoration: "none",
-        "span > svg": {
-          opacity: "0",
-          transition: "0.3s ease-in-out",
-        },
-        "&:hover span > svg": {
-          opacity: "1",
+        width: '100%',
+        textDecoration: 'none',
+        'span > svg': {
+          opacity: '0',
+          transition: '0.3s ease-in-out'
         },
+        '&:hover span > svg': {
+          opacity: '1'
+        }
       }}
     >
       <Box
         as="span"
-        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         <Heading
           variant="headline"
           sx={{
-            color: "black",
-            m: 0,
+            color: 'black',
+            m: 0
           }}
         >
           {positionName}
@@ -54,15 +54,15 @@ const JobListing = ({
         variant="caption"
         sx={{
           mt: 1,
-          display: "block",
-          textAlign: "left",
+          display: 'block',
+          textAlign: 'left'
         }}
       >
-        {compact([positionDesc, positionLocation, positionType]).join(" • ")}
+        {compact([positionDesc, positionLocation, positionType]).join(' • ')}
       </Text>
     </Card>
   </Link>
-);
+)
 
 const Page = ({ jobs }) => (
   <>
@@ -77,28 +77,28 @@ const Page = ({ jobs }) => (
       as="main"
       key="main"
       sx={{
-        color: "black",
+        color: 'black'
       }}
     >
       <Box
         sx={{
           py: [5, 6],
           background:
-            "linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          textAlign: "center",
-          position: "relative",
+            'linear-gradient(90deg, rgba(2,0,36,0.53) 0%, rgba(2,0,36,0.46) 100%)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          textAlign: 'center',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            zIndex: -1,
+            zIndex: -1
           }}
         >
           <Image
@@ -112,33 +112,33 @@ const Page = ({ jobs }) => (
           <Heading
             as="h1"
             sx={{
-              fontSize: ["48px", "48px", "72px"],
-              color: "white",
+              fontSize: ['48px', '48px', '72px'],
+              color: 'white'
             }}
           >
             Join the Hack Club Team
           </Heading>
           <Heading
             sx={{
-              color: "smoke",
+              color: 'smoke',
               mt: 3,
-              fontSize: ["18px", "24px"],
-              lineHeight: ["1.5", "1.125"],
+              fontSize: ['18px', '24px'],
+              lineHeight: ['1.5', '1.125']
             }}
           >
             <Text
               sx={{
-                bg: "dark",
-                color: "green",
-                width: "fit-content",
+                bg: 'dark',
+                color: 'green',
+                width: 'fit-content',
                 px: 3,
                 py: [1, 2],
                 borderRadius: 6,
-                mr: 1,
+                mr: 1
               }}
             >
               $ ssh jobs.hackclub.com
-            </Text>{" "}
+            </Text>{' '}
             or scroll down to learn more...
           </Heading>
         </Container>
@@ -146,14 +146,14 @@ const Page = ({ jobs }) => (
       <Container sx={{ py: [3, 4], px: [2, 2, 0] }}>
         <Grid
           sx={{
-            maxWidth: "64rem",
-            mx: "auto",
+            maxWidth: '64rem',
+            mx: 'auto'
           }}
           align="left"
-          columns={["1fr", "1fr 1fr"]}
+          columns={['1fr', '1fr 1fr']}
         >
           {jobs.items.length > 0 ? (
-            jobs.items.map((job) => (
+            jobs.items.map(job => (
               <JobListing
                 key={job.id}
                 positionName={job.title}
@@ -167,10 +167,10 @@ const Page = ({ jobs }) => (
             <Text
               variant="headline"
               sx={{
-                color: "muted",
-                textAlign: "center",
-                mx: "auto",
-                gridColumn: "1 / -1",
+                color: 'muted',
+                textAlign: 'center',
+                mx: 'auto',
+                gridColumn: '1 / -1'
               }}
             >
               No open roles at this time. Check back later!
@@ -182,19 +182,19 @@ const Page = ({ jobs }) => (
 
     <Footer key="footer" />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const data = await fetch(
-    "https://api.polymer.co/v1/hire/organizations/hackclub/jobs",
-  );
-  const jobs = await data.json();
+    'https://api.polymer.co/v1/hire/organizations/hackclub/jobs'
+  )
+  const jobs = await data.json()
   return {
     props: {
-      jobs,
+      jobs
     },
-    revalidate: 60,
-  };
+    revalidate: 60
+  }
 }
diff --git a/pages/jobs/lead-hacker.js b/pages/jobs/lead-hacker.js
index 587388acb..ada773bd2 100644
--- a/pages/jobs/lead-hacker.js
+++ b/pages/jobs/lead-hacker.js
@@ -1,19 +1,10 @@
-import {
-  Link,
-  Box,
-  Container,
-  Heading,
-  Text,
-  Grid,
-  Flex,
-  Card,
-} from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Photo from "../../components/photo";
-import { formatted } from "../../lib/members";
+import { Link, Box, Container, Heading, Text, Grid, Flex, Card } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Photo from '../../components/photo'
+import { formatted } from '../../lib/members'
 
 const Page = () => (
   <>
@@ -31,10 +22,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("purple", "red"),
+        backgroundImage: theme => theme.util.gx('purple', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Lead Hacker @&nbsp;HCB
         </Heading>
@@ -48,7 +39,7 @@ const Page = () => (
       as="section"
       sx={{
         py: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <Heading
@@ -59,16 +50,16 @@ const Page = () => (
       </Heading>
 
       <Text as="p" mb={4}>
-        Starting a nonprofit is hard, so we built{" "}
+        Starting a nonprofit is hard, so we built{' '}
         <Link href="/hcb" target="_blank">
           HCB
-        </Link>{" "}
+        </Link>{' '}
         for our community of {formatted}+ teenage programmers. Within 24 hours
         of joining HCB, organizations get 501(c)(3) nonprofit status, access to
         a beautiful dashboard for managing their finances, and all financial and
         legal matters - from tax filings to payroll - handled. 50% of high
         school hackathons worldwide run on HCB, and Elon Musk has tweeted that
-        we're a{" "}
+        we're a{' '}
         <Link
           href="https://twitter.com/elonmusk/status/1263275969743216640"
           target="_blank"
@@ -80,12 +71,12 @@ const Page = () => (
       </Text>
 
       <Text as="p" mb={4}>
-        Now, HCB is expanding beyond just Hack Clubbers.{" "}
+        Now, HCB is expanding beyond just Hack Clubbers.{' '}
         <strong>
           Over 500 organizations running on HCB have transacted upwards of
           $5,000,000;
-        </strong>{" "}
-        from teenage-run hackathons to{" "}
+        </strong>{' '}
+        from teenage-run hackathons to{' '}
         <Link
           href="https://vtdigger.org/2021/04/13/frustrated-with-one-local-newspaper-prominent-charlotte-journalists-help-start-another/"
           target="_blank"
@@ -101,9 +92,9 @@ const Page = () => (
         organizations across the United States and process tens of millions of
         dollars in transactions. We think do-gooders need the same tools that
         software engineers do. For them, HCB is like GitHub: transformative.
-        Right now, HCB is the{" "}
+        Right now, HCB is the{' '}
         <strong>
-          only part of Hack Club that isn't{" "}
+          only part of Hack Club that isn't{' '}
           <Link
             href="https://github.com/hackclub/"
             target="_blank"
@@ -112,10 +103,10 @@ const Page = () => (
             open source
           </Link>
           .
-        </strong>{" "}
+        </strong>{' '}
         In the next year we want to open source it, build an amazing community
         of Hack Clubbers contributing to it, and onboard 1,000 new organizations
-        through our{" "}
+        through our{' '}
         <Link
           href="https://givebutter.com/fiscal-sponsorship"
           target="_blank"
@@ -134,17 +125,17 @@ const Page = () => (
           gap={3}
           columns={[null, null, 2]}
           sx={{
-            "> div": {
+            '> div': {
               p: 3,
-              fontSize: 2,
-            },
+              fontSize: 2
+            }
           }}
         >
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top left, #d56d21, #cd2b42)',
+              color: 'white'
             }}
           >
             Loves coding, is a Ruby on Rails expert, and has managed small teams
@@ -153,8 +144,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)",
-              color: "white",
+              background: 'linear-gradient(-32deg, #6f31b7 14%, #c6479e 82%)',
+              color: 'white'
             }}
           >
             Is product-oriented, believes in attention-to-detail and creating
@@ -163,8 +154,8 @@ const Page = () => (
 
           <Card
             sx={{
-              background: "linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)",
-              color: "white",
+              background: 'linear-gradient(120deg, #0e5ea0 0%, #338eda 100%)',
+              color: 'white'
             }}
           >
             Has strong familiarity with open source, maybe even built or managed
@@ -174,8 +165,8 @@ const Page = () => (
           <Card
             sx={{
               background:
-                "radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)",
-              color: "white",
+                'radial-gradient(ellipse farthest-corner at top right, #33d6a6, #0d7485)',
+              color: 'white'
             }}
           >
             Has experience building resilient systems and implementing security
@@ -199,35 +190,35 @@ const Page = () => (
 
       <Box sx={{ p: { my: [3, 4] } }}>
         <Text as="p">
-          HCB has been maintained by a{" "}
+          HCB has been maintained by a{' '}
           <Link href="/team/" target="_blank">
-            {" "}
+            {' '}
             small team
-          </Link>{" "}
+          </Link>{' '}
           of two full-time operations people, and on-and-off contributions by
-          engineers and various contractors. The majority of{" "}
+          engineers and various contractors. The majority of{' '}
           <Link href="https://changelog.hcb.hackclub.com/" target="_blank">
             contributions
-          </Link>{" "}
+          </Link>{' '}
           are actually made by teenagers! In this role, you'll take point on
           bringing HCB to its full potential.
         </Text>
 
         <Text as="p">
-          HCB already powers{" "}
+          HCB already powers{' '}
           <Link href="https://hcb.hackclub.com/hq" target="_blank">
             our own transparent finances
-          </Link>{" "}
-          as well as those of{" "}
+          </Link>{' '}
+          as well as those of{' '}
           <Link
             href="https://hcb.hackclub.com/miami-hack-week/"
             target="_blank"
           >
             many
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/mesto/" target="_blank">
             other
-          </Link>{" "}
+          </Link>{' '}
           <Link href="https://hcb.hackclub.com/techshift/" target="_blank">
             organizations
           </Link>
@@ -293,7 +284,7 @@ const Page = () => (
 
         <Text as="p">
           Like a CTO, you'll work directly with real users to define HCB's
-          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{" "}
+          roadmap around <strong>making HCB better for Hack Clubbers.</strong>{' '}
           You will build and lead a team of Hack Clubbers to create a shipping
           culture around HCB, and lead and manage relationships with technical
           partners who integrate HCB into their products.
@@ -307,14 +298,14 @@ const Page = () => (
         </Text>
 
         <Box as="p">
-          <strong>How to apply:</strong> Email{" "}
+          <strong>How to apply:</strong> Email{' '}
           <Link
             href="mailto:jobs@hackclub.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             jobs@hackclub.com
-          </Link>{" "}
+          </Link>{' '}
           with "HCB" in the subject line, 3 bullet points demonstrating why you
           would be exceptional for the role, and your resume / GitHub / GitLab /
           sourcehut.
@@ -323,10 +314,10 @@ const Page = () => (
 
       <Flex
         sx={{
-          flexDirection: ["column", "column", "row"],
+          flexDirection: ['column', 'column', 'row'],
           gap: 4,
           fontSize: 2,
-          my: 5,
+          my: 5
         }}
       >
         <Box sx={{ flex: 1, maxWidth: [null, null, 400] }}>
@@ -349,7 +340,7 @@ const Page = () => (
           </Box>
 
           <Box as="p">
-            Already, Hack Club is the{" "}
+            Already, Hack Club is the{' '}
             <strong>largest network of teen coders in the country</strong>. We
             hope for a world where Hack Club becomes a nationwide cultural
             institution, creating a new generation of young people with the
@@ -360,6 +351,6 @@ const Page = () => (
       </Flex>
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/philanthropy-communications-lead.js b/pages/jobs/philanthropy-communications-lead.js
index 8f681f582..a8168132f 100644
--- a/pages/jobs/philanthropy-communications-lead.js
+++ b/pages/jobs/philanthropy-communications-lead.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/philanthropy-communications-lead/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/philanthropy-communications-lead/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("green", "blue"),
+        backgroundImage: theme => theme.util.gx('green', 'blue')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Philanthropy Communications Lead @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/jobs/vp-donor-engagement.js b/pages/jobs/vp-donor-engagement.js
index 4779fbe9c..a42c2c2c5 100644
--- a/pages/jobs/vp-donor-engagement.js
+++ b/pages/jobs/vp-donor-engagement.js
@@ -1,9 +1,9 @@
-import { BaseStyles, Box, Container, Heading, Text } from "theme-ui";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import Meta from "@hackclub/meta";
-import JobDescription from "../../components/jobs/vp-donor-engagement/jd.mdx";
-import ForceTheme from "../../components/force-theme";
+import { BaseStyles, Box, Container, Heading, Text } from 'theme-ui'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import Meta from '@hackclub/meta'
+import JobDescription from '../../components/jobs/vp-donor-engagement/jd.mdx'
+import ForceTheme from '../../components/force-theme'
 
 const Page = () => (
   <>
@@ -20,10 +20,10 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        backgroundImage: (theme) => theme.util.gx("pink", "yellow"),
+        backgroundImage: theme => theme.util.gx('pink', 'yellow')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading as="h1" variant="title" mb={30}>
           Vice President, Donor Engagement @&nbsp;Hack&nbsp;Club
         </Heading>
@@ -38,12 +38,12 @@ const Page = () => (
       sx={{
         pt: [3, 4],
         pb: [4, 5],
-        fontSize: [2, 3],
+        fontSize: [2, 3]
       }}
     >
       <JobDescription />
     </Container>
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/minecraft.js b/pages/minecraft.js
index 8a88133fe..2d72049e1 100644
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -7,16 +7,16 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
 
 const Page = () => (
   <>
@@ -30,24 +30,24 @@ const Page = () => (
     <Box
       as="main"
       sx={{
-        bg: "dark",
-        color: "white",
+        bg: 'dark',
+        color: 'white',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)",
-        backgroundPosition: "top center",
-        backgroundSize: "cover",
-        position: "relative",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/32020-07-16_939yf850qwck1y57zne89qtt2a4g8hrf.png)',
+        backgroundPosition: 'top center',
+        backgroundSize: 'cover',
+        position: 'relative'
       }}
     >
-      <SlideDown duration={768} sx={{ pt: 6, textAlign: "center" }}>
+      <SlideDown duration={768} sx={{ pt: 6, textAlign: 'center' }}>
         <Image
           src="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/42020-07-16_minecraft-banner.svg"
           alt="Hack Club stylized as Minecraft logo"
           width={256}
           sx={{
-            width: ["100%", 384, 512],
-            transition: "transform .125s ease-in-out",
-            ":hover": { transform: "scale(1.0625)" },
+            width: ['100%', 384, 512],
+            transition: 'transform .125s ease-in-out',
+            ':hover': { transform: 'scale(1.0625)' }
           }}
         />
       </SlideDown>
@@ -60,18 +60,18 @@ const Page = () => (
             pt: 5,
             pb: [6, 7],
             div: {
-              variant: "cards.translucentDark",
-              color: "white",
-              p: [null, 3],
+              variant: 'cards.translucentDark',
+              color: 'white',
+              p: [null, 3]
             },
             h3: { mb: 2 },
-            p: { lineHeight: "caption" },
+            p: { lineHeight: 'caption' }
           }}
         >
           <Card
             sx={{
               gridColumnStart: 1,
-              gridColumnEnd: 3,
+              gridColumnEnd: 3
             }}
           >
             <Heading as="h3" variant="subheadline">
@@ -79,13 +79,13 @@ const Page = () => (
             </Heading>
             <Text as="p">
               Hang out with the tree-punchers of Hack&nbsp;Club playing on the
-              official server, mc.hackclub.com.{" "}
+              official server, mc.hackclub.com.{' '}
               <Link href="http://mc.hackclub.com:2008" color="#759B40">
                 Check out the map »
               </Link>
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Modded Server
             </Heading>
@@ -94,7 +94,7 @@ const Page = () => (
               Minecraft with us on the official modded server!
             </Text>
           </Card>
-          <Card sx={{ display: "none" }}>
+          <Card sx={{ display: 'none' }}>
             <Heading as="h3" variant="subheadline">
               Compete weekly
             </Heading>
@@ -122,7 +122,7 @@ const Page = () => (
                 as="a"
                 sx={{
                   mt: 2,
-                  backgroundImage: (t) => t.util.gx("#759B40", "#4F6728"),
+                  backgroundImage: t => t.util.gx('#759B40', '#4F6728')
                 }}
               >
                 <Icon glyph="slack-fill" size={24} />
@@ -135,6 +135,6 @@ const Page = () => (
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/night.js b/pages/night.js
index 2df1766a4..eac1473b8 100644
--- a/pages/night.js
+++ b/pages/night.js
@@ -7,17 +7,17 @@ import {
   Heading,
   Image,
   Link,
-  Text,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import Nav from "../components/nav";
-import SlideDown from "../components/slide-down";
-import FadeIn from "../components/fade-in";
-import Icon from "../components/icon";
-import Footer from "../components/footer";
-import { keyframes } from "@emotion/react";
+  Text
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import Nav from '../components/nav'
+import SlideDown from '../components/slide-down'
+import FadeIn from '../components/fade-in'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {
@@ -26,15 +26,15 @@ const floating = keyframes`
   to {
     transform: translateY(-20px);
   }
-`;
+`
 
 // (msw) Credit for this totally goes to https://codepen.io/WebSonick/pen/vjmgu
 const twinkling = keyframes`
   from { background-position: 0 0; }
   to { background-position: -10000px 5000px; }
-`;
+`
 
-const color = "#50E3C2";
+const color = '#50E3C2'
 
 const Page = () => (
   <>
@@ -50,33 +50,33 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: 5,
-        bg: "dark",
-        color: "muted",
-        textAlign: "center",
+        bg: 'dark',
+        color: 'muted',
+        textAlign: 'center',
         backgroundImage:
-          "url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)",
-        backgroundSize: "512px auto",
+          'url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/62020-07-24_stars.svg)',
+        backgroundSize: '512px auto'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          width: "100%",
-          height: "100%",
-          display: "block",
+          width: '100%',
+          height: '100%',
+          display: 'block',
           background:
-            "transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center",
-          animation: `${twinkling} 200s linear infinite`,
+            'transparent url(https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/72020-07-24_afnkcwju2hfkbrkc1ee0h5a5y72a2r5f.png) repeat top center',
+          animation: `${twinkling} 200s linear infinite`
         }}
       ></Box>
       <SlideDown
         variant="layout.narrow"
         duration={768}
-        sx={{ position: "relative" }}
+        sx={{ position: 'relative' }}
       >
         <Heading
           as="h1"
@@ -84,11 +84,11 @@ const Page = () => (
           mt={3}
           sx={{
             color,
-            textTransform: "uppercase",
-            WebkitTextStroke: "white",
-            WebkitTextStrokeWidth: "2px",
-            WebkitTextFillColor: "transparent",
-            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`,
+            textTransform: 'uppercase',
+            WebkitTextStroke: 'white',
+            WebkitTextStrokeWidth: '2px',
+            WebkitTextFillColor: 'transparent',
+            filter: `drop-shadow(0 0 1px ${color}) drop-shadow(0 0 2px ${color}) drop-shadow(0 0 6px ${color})`
           }}
         >
           Hack Night
@@ -99,8 +99,7 @@ const Page = () => (
           hang out on a chill call.
         </Text>
         <Text as="p" variant="subtitle">
-          Hack nights are hosted regularly by Hack Clubbers. Come join or start
-          an impromptu Hack session on{" "}
+        Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
           <NextLink href="/slack" passHref>
             <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
           </NextLink>
@@ -110,19 +109,19 @@ const Page = () => (
       <Container
         variant="narrow"
         sx={{
-          position: "relative",
-          width: "100%",
+          position: 'relative',
+          width: '100%',
           maxWidth: 512,
           minHeight: 512,
-          mx: "auto",
+          mx: 'auto',
           mt: [4, 5],
           img: {
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
-            maxWidth: "100%",
-          },
+            maxWidth: '100%'
+          }
         }}
       >
         <Image
@@ -136,13 +135,13 @@ const Page = () => (
           width={512}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
       </Container>
     </Box>
     <Footer dark />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/opensource.js b/pages/opensource.js
index a5fae8b27..348579974 100644
--- a/pages/opensource.js
+++ b/pages/opensource.js
@@ -7,15 +7,15 @@ import {
   Grid,
   Heading,
   Text,
-  Link,
-} from "theme-ui";
-import Meta from "@hackclub/meta";
-import Icon from "@hackclub/icons";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Footer from "../components/footer";
-import { Octokit } from "@octokit/rest";
-import ForceTheme from "../components/force-theme";
+  Link
+} from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Icon from '@hackclub/icons'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import { Octokit } from '@octokit/rest'
+import ForceTheme from '../components/force-theme'
 
 export const BankProject = ({ name, url }) => (
   <Card
@@ -25,18 +25,18 @@ export const BankProject = ({ name, url }) => (
     href={url}
     sx={{
       p: [2, 2],
-      display: "flex",
-      alignItems: "center",
-      color: "black",
-      textDecoration: "none",
+      display: 'flex',
+      alignItems: 'center',
+      color: 'black',
+      textDecoration: 'none',
       pr: [3, 3],
-      "> svg": {
-        opacity: "0",
-        transition: "0.3s ease-in-out",
-      },
-      "&:hover > svg": {
-        opacity: "1",
+      '> svg': {
+        opacity: '0',
+        transition: '0.3s ease-in-out'
       },
+      '&:hover > svg': {
+        opacity: '1'
+      }
     }}
   >
     <Text
@@ -46,9 +46,9 @@ export const BankProject = ({ name, url }) => (
       {name}
     </Text>
 
-    <Icon glyph={"external"} size={24} color="placeholder" />
+    <Icon glyph={'external'} size={24} color="placeholder" />
   </Card>
-);
+)
 
 const Page = ({ repos, transparentAccounts }) => (
   <>
@@ -63,22 +63,22 @@ const Page = ({ repos, transparentAccounts }) => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
         <Heading
           as="h1"
           variant="title"
-          sx={{ color: "primary", mt: [2.5, 4] }}
+          sx={{ color: 'primary', mt: [2.5, 4] }}
         >
           Open Source at Hack Club
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Explore our finances, code, planning documents and more.
         </Heading>
         <Button
@@ -95,21 +95,21 @@ const Page = ({ repos, transparentAccounts }) => (
     <Container
       sx={{
         py: [3, 4],
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Finances
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         All open sourced through HCB Transparency Mode.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
-        {transparentAccounts.map((account) => (
+        {transparentAccounts.map(account => (
           <BankProject
             key={account.id}
             name={account.name}
@@ -119,11 +119,11 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "4px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '4px!important' }}
       >
         Events
       </Heading>
-      <Text sx={{ fontSize: 2, color: "placeholder" }}>
+      <Text sx={{ fontSize: 2, color: 'placeholder' }}>
         Includes planning documents, partnership emails, meeting notes etc.
       </Text>
       <Grid columns={2} gap={3} mt={2} mb={[4]}>
@@ -147,7 +147,7 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         Content
       </Heading>
@@ -169,14 +169,14 @@ const Page = ({ repos, transparentAccounts }) => (
       </Grid>
       <Heading
         variant="headline"
-        sx={{ marginBlockEnd: "0em", mb: "12px!important" }}
+        sx={{ marginBlockEnd: '0em', mb: '12px!important' }}
       >
         GitHub Repositories
       </Heading>
 
       <Link
         href="https://contribute.hackclub.com/"
-        sx={{ fontSize: 2, display: "block", mb: 3 }}
+        sx={{ fontSize: 2, display: 'block', mb: 3 }}
       >
         Want to contribute?
       </Link>
@@ -184,18 +184,18 @@ const Page = ({ repos, transparentAccounts }) => (
       {repos
         .sort(function (a, b) {
           var keyA = a.stargazers_count,
-            keyB = b.stargazers_count;
-          if (keyA < keyB) return 1;
-          if (keyA > keyB) return -1;
-          return 0;
+            keyB = b.stargazers_count
+          if (keyA < keyB) return 1
+          if (keyA > keyB) return -1
+          return 0
         })
-        .map((repo) => (
+        .map(repo => (
           <Flex
             key={repo.id}
             sx={{
-              alignItems: "center",
-              color: "black",
-              textDecoration: "none",
+              alignItems: 'center',
+              color: 'black',
+              textDecoration: 'none'
             }}
             as="a"
             href={`https://github.com/hackclub/${repo.name}`}
@@ -205,8 +205,8 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 2,
                 fontSize: 2,
-                whiteSpace: "nowrap",
-                minWidth: "fit-content",
+                whiteSpace: 'nowrap',
+                minWidth: 'fit-content'
               }}
             >
               <b>{repo.name}</b>
@@ -215,18 +215,18 @@ const Page = ({ repos, transparentAccounts }) => (
               sx={{
                 mr: 3,
                 flexGrow: 1,
-                color: "muted",
-                whiteSpace: " nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                color: 'muted',
+                whiteSpace: ' nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
               }}
             >
               {repo.description?.replace(
                 /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-                "",
+                ''
               )}
             </Text>
-            <Text sx={{ whiteSpace: "nowrap", minWidth: "fit-content" }}>
+            <Text sx={{ whiteSpace: 'nowrap', minWidth: 'fit-content' }}>
               {repo.stargazers_count} ★
             </Text>
           </Flex>
@@ -234,25 +234,23 @@ const Page = ({ repos, transparentAccounts }) => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
 
 export async function getStaticProps() {
   const octokit = new Octokit({
-    auth: process.env.GITHUB,
-  });
-  const repos = await octokit.paginate("GET /orgs/{org}/repos", {
-    org: "hackclub",
-  });
+    auth: process.env.GITHUB
+  })
+  const repos = await octokit.paginate('GET /orgs/{org}/repos', {
+    org: 'hackclub'
+  })
 
   const transparentAccounts = (
-    await fetch("https://hcb.hackclub.com/api/v3/organizations").then((res) =>
-      res.json(),
+    await fetch('https://hcb.hackclub.com/api/v3/organizations').then(res =>
+      res.json()
     )
-  ).filter(
-    (account) => account.category?.replaceAll(" ", "_") === "hack_club_hq",
-  );
+  ).filter(account => account.category?.replaceAll(' ', '_') === 'hack_club_hq')
 
-  return { props: { repos, transparentAccounts }, revalidate: 30 };
+  return { props: { repos, transparentAccounts }, revalidate: 30 }
 }
diff --git a/pages/philanthropy/index.js b/pages/philanthropy/index.js
index 3dc091a81..39f92e00f 100644
--- a/pages/philanthropy/index.js
+++ b/pages/philanthropy/index.js
@@ -8,45 +8,45 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../../components/nav";
-import ForceTheme from "../../components/force-theme";
-import Footer from "../../components/footer";
-import ReactBeforeSliderComponent from "react-before-after-slider-component";
-import "react-before-after-slider-component/dist/build.css";
-import Fade from "react-reveal/Fade";
-import Slide from "react-reveal/Slide";
-import Marquee from "react-marquee-slider";
-import ExecuteBig from "../../public/donate/codedaydc_hack.jpg";
-import HackCamp from "../../public/donate/sf.jpg";
-import HackerGames from "../../public/donate/0img_20210830_161125.jpg";
-import LaptopDonations from "../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png";
-import Kerala from "../../public/donate/0img-20210918-wa0091.jpg";
-import HackPenn from "../../public/donate/0color_pop.jpg";
-import ElonAMA from "../../public/donate/elon.jpg";
-import SpaceX from "../../public/donate/0spacex_and_hack_club.jpg";
-import Flagship from "../../public/donate/flagship.png";
-import MAHacks from "../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png";
-import HackCamp2020 from "../../public/donate/0img_6447.jpg";
-import InnovationCircuit from "../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png";
-import WindyCity from "../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png";
-import ZephyrFun from "../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png";
-import GoldenTrain from "../../public/home/golden-train.png";
+  Text
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Image from 'next/image'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../../components/nav'
+import ForceTheme from '../../components/force-theme'
+import Footer from '../../components/footer'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import Fade from 'react-reveal/Fade'
+import Slide from 'react-reveal/Slide'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../../public/donate/sf.jpg'
+import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../../public/donate/0color_pop.jpg'
+import ElonAMA from '../../public/donate/elon.jpg'
+import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../../public/donate/flagship.png'
+import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../../public/home/golden-train.png'
 
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const PhotoRow = ({ photos }) => (
-  <Box sx={{ height: "160px", overflow: "hidden" }}>
-    <Box sx={{ display: ["block", "block", "block", "block", "none"] }}>
+  <Box sx={{ height: '160px', overflow: 'hidden' }}>
+    <Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -57,12 +57,12 @@ const PhotoRow = ({ photos }) => (
             height="200px"
             width="300px"
             alt="Hack Club students"
-            key={"image-" + index}
+            key={'image-' + index}
           />
         ))}
       </Marquee>
     </Box>
-    <Box sx={{ display: ["none", "none", "none", "none", "block"] }}>
+    <Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
       <Marquee velocity={12}>
         {photos.map((photo, index) => (
           <Image
@@ -72,22 +72,22 @@ const PhotoRow = ({ photos }) => (
             className="next-image"
             height="200px"
             width="600px"
-            key={"image-" + index}
+            key={'image-' + index}
             alt="Hack Club students"
           />
         ))}
       </Marquee>
     </Box>
   </Box>
-);
+)
 
 const data = [
-  { name: "3452 Members", Teenagers: 3452, year: "2018" },
-  { name: "6932 Members", Teenagers: 6932, year: "2019" },
-  { name: "13530 Members", Teenagers: 13530, year: "2020" },
-  { name: "18347 Members", Teenagers: 18347, year: "2021" },
-  { name: "21790 Members", Teenagers: 21790, year: "2022" },
-];
+  { name: '3452 Members', Teenagers: 3452, year: '2018' },
+  { name: '6932 Members', Teenagers: 6932, year: '2019' },
+  { name: '13530 Members', Teenagers: 13530, year: '2020' },
+  { name: '18347 Members', Teenagers: 18347, year: '2021' },
+  { name: '21790 Members', Teenagers: 21790, year: '2022' }
+]
 
 const Sheet = styled(Card)`
   position: relative;
@@ -96,12 +96,12 @@ const Sheet = styled(Card)`
   width: 100%;
   color: white;
   height: 100%;
-`;
+`
 
 const Q = styled(Sheet)`
   position: relative;
   &:after {
-    content: "";
+    content: '';
     background-color: #ec3750;
     height: 100%;
     width: 10px;
@@ -110,54 +110,54 @@ const Q = styled(Sheet)`
     left: 0;
   }
   color: #3c4858;
-`;
+`
 
 const Stat = ({ num, words, background }) => {
   return (
     <Card
       sx={{
-        padding: "20px !important",
+        padding: '20px !important',
         my: 2,
-        textAlign: "center",
-        backgroundColor: "elevated",
+        textAlign: 'center',
+        backgroundColor: 'elevated',
         backgroundImage: `url('${background}')`,
-        backgroundSize: "25px 25px",
-        backgroundRepeat: "repeat",
-        backgroundPosition: "10% -20%",
-        display: "flex",
+        backgroundSize: '25px 25px',
+        backgroundRepeat: 'repeat',
+        backgroundPosition: '10% -20%',
+        display: 'flex',
         gap: 2,
-        textAlign: "left",
-        fontSize: ["14px", "16px", "18px"],
+        textAlign: 'left',
+        fontSize: ['14px', '16px', '18px']
       }}
     >
-      <Text as="h2" sx={{ color: "#ec3750" }}>
+      <Text as="h2" sx={{ color: '#ec3750' }}>
         {num}
       </Text>
       <Text as="h2">{words}</Text>
     </Card>
-  );
-};
+  )
+}
 
 const Graph = () => {
   return (
     <>
-      <Box sx={{ my: "auto" }}>
-        <Heading as="h2" sx={{ textAlign: "center" }}>
+      <Box sx={{ my: 'auto' }}>
+        <Heading as="h2" sx={{ textAlign: 'center' }}>
           Teenagers in Slack per year
         </Heading>
         <ResponsiveContainer
           width="90%"
           height="100%"
           minHeight="350px"
-          sx={{ mx: "auto", my: "5%", overflow: "visible" }}
+          sx={{ mx: 'auto', my: '5%', overflow: 'visible' }}
         >
           <BarChart
             data={data}
             animationBegin={1000}
             sx={{
               svg: {
-                overflow: "visible",
-              },
+                overflow: 'visible'
+              }
             }}
           >
             {/* <Tooltip
@@ -171,60 +171,60 @@ const Graph = () => {
         </ResponsiveContainer>
       </Box>
     </>
-  );
-};
+  )
+}
 
 const Highlight = ({ children }) => {
-  return <Text sx={{ fontWeight: "bold" }}>{children}</Text>;
-};
+  return <Text sx={{ fontWeight: 'bold' }}>{children}</Text>
+}
 const Line = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          borderBottom: "1px solid #e0e6ed",
-          width: "100%",
-          my: [4, 5],
+          borderBottom: '1px solid #e0e6ed',
+          width: '100%',
+          my: [4, 5]
         }}
       ></Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Quote = ({ children }) => {
   return (
     <Text
       sx={{
-        fontSize: "1.5em",
-        color: "#ec3750",
-        lineHeight: "1em",
+        fontSize: '1.5em',
+        color: '#ec3750',
+        lineHeight: '1em'
       }}
     >
       {children}
     </Text>
-  );
-};
+  )
+}
 const Pill = ({ logo, name }) => {
   return (
     <Slide>
       <Box
         sx={{
-          backgroundColor: "snow",
-          padding: "5px 10px",
-          borderRadius: "50px",
-          display: "flex",
-          alignItems: "center",
+          backgroundColor: 'snow',
+          padding: '5px 10px',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         {logo ? (
           <Box
             sx={{
-              borderRadius: "100%",
-              width: "20px",
-              height: "20px",
+              borderRadius: '100%',
+              width: '20px',
+              height: '20px',
               backgroundImage: `url(${logo})`,
-              backgroundSize: "cover",
-              marginRight: 1,
+              backgroundSize: 'cover',
+              marginRight: 1
             }}
           ></Box>
         ) : (
@@ -233,63 +233,63 @@ const Pill = ({ logo, name }) => {
         <Text>{name}</Text>
       </Box>
     </Slide>
-  );
-};
+  )
+}
 
 const HackClubber = ({ photo, quote, info }) => {
   return (
     <Box
       sx={{
-        borderRadius: "10px",
-        width: "100%",
-        height: "300px",
+        borderRadius: '10px',
+        width: '100%',
+        height: '300px',
         backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), url(/philanthropy/${photo})`,
-        backgroundSize: "cover",
-        backgroundPosition: "top center",
-        position: "relative",
+        backgroundSize: 'cover',
+        backgroundPosition: 'top center',
+        position: 'relative'
       }}
     >
       <Box
         sx={{
-          position: "absolute",
-          bottom: "20px",
-          left: "20px",
-          width: "calc(100% - 40px)",
-          color: "white",
+          position: 'absolute',
+          bottom: '20px',
+          left: '20px',
+          width: 'calc(100% - 40px)',
+          color: 'white'
         }}
       >
         <Text as="h3">"{quote}"</Text>
         <Text>{info}</Text>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
 const FIRST_IMAGE = {
-  imageUrl: "/philanthropy/after1.png",
-};
+  imageUrl: '/philanthropy/after1.png'
+}
 const SECOND_IMAGE = {
-  imageUrl: "/philanthropy/before.png",
-};
+  imageUrl: '/philanthropy/before.png'
+}
 
 const delimiterIconStyles = {
-  width: "50px",
-  height: "50px",
-  backgroundSize: "110%",
-  backgroundPosition: "center",
-  borderRadius: "none",
+  width: '50px',
+  height: '50px',
+  backgroundSize: '110%',
+  backgroundPosition: 'center',
+  borderRadius: 'none',
   backgroundImage:
-    "url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)",
-};
+    'url(https://cloud-1rqn9rwxm-hack-club-bot.vercel.app/0frame_43.svg)'
+}
 const Map = () => {
   return (
     <Fade bottom>
       <Box
         sx={{
-          position: "relative",
-          width: "100%",
-          mx: "auto",
-          height: "auto",
+          position: 'relative',
+          width: '100%',
+          mx: 'auto',
+          height: 'auto'
         }}
       >
         <ReactBeforeSliderComponent
@@ -303,8 +303,8 @@ const Map = () => {
         </Text>
       </Box>
     </Fade>
-  );
-};
+  )
+}
 
 const Philanthropy = ({ posts = [] }) => {
   return (
@@ -317,7 +317,7 @@ const Philanthropy = ({ posts = [] }) => {
       />
       <ForceTheme theme="light" />
       <Nav color="white" />
-      <Box sx={{ overflowX: "hidden" }}>
+      <Box sx={{ overflowX: 'hidden' }}>
         {/* <Box
           sx={{
             width: '100vw',
@@ -370,43 +370,43 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
           </Box>
         </Box> */}
-        <Header sx={{ position: "relative" }}>
+        <Header sx={{ position: 'relative' }}>
           <Box
             sx={{
-              background: "rgba(0,0,0, 0.8)",
+              background: 'rgba(0,0,0, 0.8)',
               zIndex: 1,
-              position: "relative",
-              color: "white!important",
-              height: "480px",
+              position: 'relative',
+              color: 'white!important',
+              height: '480px'
             }}
-            pt={[5, 5, "110px"]}
+            pt={[5, 5, '110px']}
           >
             <Box
               sx={{
-                maxWidth: "64rem",
-                mx: "auto",
+                maxWidth: '64rem',
+                mx: 'auto',
                 zIndex: 1,
-                position: "relative",
+                position: 'relative'
               }}
               align="center"
               py={2}
               px={[1, 3]}
             >
-              <Container sx={{ maxWidth: "48rem" }}>
+              <Container sx={{ maxWidth: '48rem' }}>
                 <Heading
                   sx={{
-                    fontSize: ["42px", "54px", "72px"],
+                    fontSize: ['42px', '54px', '72px'],
                     my: 2,
-                    color: "white",
+                    color: 'white'
                   }}
                 >
                   Invest in the future.
                 </Heading>
                 <Box
                   sx={{
-                    fontSize: ["22px", "23px", "28px"],
-                    maxWidth: "40rem",
-                    color: "white",
+                    fontSize: ['22px', '23px', '28px'],
+                    maxWidth: '40rem',
+                    color: 'white'
                   }}
                 >
                   Contribute today to empower the next generation.
@@ -414,17 +414,17 @@ const Philanthropy = ({ posts = [] }) => {
                 <Button
                   variant="ctaLg"
                   my={3}
-                  sx={{ width: ["100%", "auto"] }}
+                  sx={{ width: ['100%', 'auto'] }}
                   as="a"
                   href="https://hcb.hackclub.com/donations/start/hq"
                 >
                   Donate
-                  <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                  <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                     to Hack Club
                   </Text>
                 </Button>
                 <Text
-                  sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                  sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                   fontSize={2}
                   color="white"
                 >
@@ -437,11 +437,11 @@ const Philanthropy = ({ posts = [] }) => {
           </Box>
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               zIndex: 0,
-              width: "100%",
-              display: "block",
+              width: '100%',
+              display: 'block'
             }}
           >
             <PhotoRow
@@ -450,7 +450,7 @@ const Philanthropy = ({ posts = [] }) => {
                 HackCamp,
                 HackerGames,
                 LaptopDonations,
-                Kerala,
+                Kerala
               ]}
             />
             <PhotoRow
@@ -462,25 +462,25 @@ const Philanthropy = ({ posts = [] }) => {
                 InnovationCircuit,
                 WindyCity,
                 MAHacks,
-                ZephyrFun,
+                ZephyrFun
               ]}
             />
           </Box>
         </Header>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
-            "p, li, a": {
-              fontSize: "1.3em",
-            },
+            width: 'container',
+            margin: 'auto',
+            'p, li, a': {
+              fontSize: '1.3em'
+            }
           }}
         >
           <Fade bottom delay={60}>
             <Box
               sx={{
                 mt: 4,
-                textAlign: "center",
+                textAlign: 'center'
               }}
             >
               <Text as="h1">
@@ -527,7 +527,7 @@ const Philanthropy = ({ posts = [] }) => {
               environmentalists, political leaders, activists and policy makers.
               We help shape the values of these future leaders, modeling and
               incentivizing them to be curious, humble, kind, optimistic problem
-              solvers.{" "}
+              solvers.{' '}
               <Highlight>
                 We need your support to make this vision a reality.
               </Highlight>
@@ -576,7 +576,7 @@ const Philanthropy = ({ posts = [] }) => {
             </Text>
           </Fade>
           <Fade bottom>
-            <Grid gap={[4, 2, 2]} columns={[1, "1r 1fr", "1fr 1fr"]} mt={2}>
+            <Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
               <Box>
                 <Text as="h3">Reach out to</Text>
                 <Text as="p">Christina Asquith</Text>
@@ -585,10 +585,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -607,10 +607,10 @@ const Philanthropy = ({ posts = [] }) => {
                     href="https://hcb.hackclub.com/donations/start/hq"
                     target="_blank"
                     sx={{
-                      color: "#ec3750",
-                      textDecoration: "none",
-                      fontWeight: "700",
-                      fontSize: "1.2em",
+                      color: '#ec3750',
+                      textDecoration: 'none',
+                      fontWeight: '700',
+                      fontSize: '1.2em'
                     }}
                   >
                     Donate online to Hack Club &#9654;
@@ -624,7 +624,7 @@ const Philanthropy = ({ posts = [] }) => {
           </Fade>
           <Line />
           <Fade bottom delay={100}>
-            <Flex sx={{ justifyContent: "space-between" }} mt={[3, 4]}>
+            <Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
               <Box>
                 <Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
                 <Text as="p">2021 Form will soon be ready and shared.</Text>
@@ -636,10 +636,10 @@ const Philanthropy = ({ posts = [] }) => {
                 target="_blank"
                 mb={4}
                 sx={{
-                  fontSize: "1em !important",
-                  width: "fit-content",
-                  float: "right",
-                  mt: 2,
+                  fontSize: '1em !important',
+                  width: 'fit-content',
+                  float: 'right',
+                  mt: 2
                 }}
               >
                 Form 990
@@ -668,17 +668,17 @@ const Philanthropy = ({ posts = [] }) => {
         </Container>
         <Box
           sx={{
-            width: "100vw",
-            backgroundColor: "snow",
+            width: '100vw',
+            backgroundColor: 'snow',
             py: 4,
             my: 5,
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center'
           }}
         >
-          <Container sx={{ textAlign: "center" }}>
+          <Container sx={{ textAlign: 'center' }}>
             <Fade bottom>
-              <Text as="h1" sx={{ fontSize: ["28px", "28px", "36px"] }}>
+              <Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
                 Hack Club is already making a difference!
               </Text>
             </Fade>
@@ -688,8 +688,8 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Box
                 sx={{
-                  width: "90%",
-                  margin: "auto",
+                  width: '90%',
+                  margin: 'auto'
                 }}
               >
                 <Fade bottom delay={90}>
@@ -735,13 +735,13 @@ const Philanthropy = ({ posts = [] }) => {
                 like I belong.”
               </Text>
               <Text
-                sx={{ display: "inline-flex", alignItems: "center", gap: 2 }}
+                sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
               >
                 <Image
                   src="/philanthropy/belle.png"
                   width="20"
                   height="20"
-                  sx={{ borderRadius: "100%" }}
+                  sx={{ borderRadius: '100%' }}
                   alt="belle"
                 />
                 Belle, 17, Malaysia
@@ -751,15 +751,15 @@ const Philanthropy = ({ posts = [] }) => {
         </Box>
         <Container
           sx={{
-            width: "container",
-            margin: "auto",
+            width: 'container',
+            margin: 'auto',
             px: [2, 3, 4],
-            "p, li, a": {
-              fontSize: "1.3em",
+            'p, li, a': {
+              fontSize: '1.3em'
             },
             h1: {
-              fontSize: ["28px", "28px", "36px"],
-            },
+              fontSize: ['28px', '28px', '36px']
+            }
           }}
         >
           <Fade bottom>
@@ -767,11 +767,11 @@ const Philanthropy = ({ posts = [] }) => {
               As the largest network of technical teenagers, we are featured in
               the news:
             </Text>
-            <Grid gap={[0, 0, 4]} columns={["1fr 1fr", "1fr 0.5fr 1fr 1fr"]}>
+            <Grid gap={[0, 0, 4]} columns={['1fr 1fr', '1fr 0.5fr 1fr 1fr']}>
               <Link
                 href="https://www.businessinsider.com/zach-lattas-hacker-club-got-him-on-forbes-30-under-30-2016-1"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/insider-logo.svg"
@@ -783,7 +783,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.wsj.com/articles/teen-hackers-try-to-convince-parents-they-are-up-to-good-11569922200"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/wsj-logo.svg"
@@ -795,7 +795,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.forbes.com/sites/fastforward/2021/06/29/from-journalism-to-a-tech-nonprofit-this-coos-big-pivot-to-empower-the-next-generation-of-coders/"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/forbes-logo.svg"
@@ -807,7 +807,7 @@ const Philanthropy = ({ posts = [] }) => {
               <Link
                 href="https://www.philanthropy.com/article/nonprofits-need-to-embrace-transparency-even-if-the-supreme-court-rules-to-protect-donor-privacy"
                 target="_blank"
-                sx={{ display: "flex", alignItems: "center" }}
+                sx={{ display: 'flex', alignItems: 'center' }}
               >
                 <Image
                   src="/philanthropy/cop.png"
@@ -822,19 +822,19 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text as="h1">Board of Directors</Text>
           </Fade>
-          <Grid gap={4} columns={[1, "1fr 2fr", "1fr 2fr"]} mt={2}>
+          <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
             <Box>
               <Fade bottom>
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -844,9 +844,9 @@ const Philanthropy = ({ posts = [] }) => {
                       <Text
                         as="p"
                         sx={{
-                          lineHeight: "1em",
-                          fontSize: "1.1em !important",
-                          fontSize: "1.1em !important",
+                          lineHeight: '1em',
+                          fontSize: '1.1em !important',
+                          fontSize: '1.1em !important'
                         }}
                       >
                         Co-founder, GitHub
@@ -858,15 +858,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={200}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -875,7 +875,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and CEO, Sourcegraph
                       </Text>
@@ -886,15 +886,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={400}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/zach.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -903,7 +903,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Founder and Executive Director, Hack Club
                       </Text>
@@ -914,15 +914,15 @@ const Philanthropy = ({ posts = [] }) => {
               <Fade bottom delay={600}>
                 <br />
                 <Box>
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Box
                       sx={{
-                        borderRadius: "100%",
-                        width: "40px",
-                        height: "40px",
+                        borderRadius: '100%',
+                        width: '40px',
+                        height: '40px',
                         backgroundImage: `url(/team/christina.jpg)`,
-                        backgroundSize: "cover",
-                        marginRight: 2,
+                        backgroundSize: 'cover',
+                        marginRight: 2
                       }}
                     ></Box>
                     <Box>
@@ -931,7 +931,7 @@ const Philanthropy = ({ posts = [] }) => {
                       </Text>
                       <Text
                         as="p"
-                        sx={{ lineHeight: "1em", fontSize: "1.1em !important" }}
+                        sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
                       >
                         Co-founder and COO, Hack Club
                       </Text>
@@ -941,13 +941,13 @@ const Philanthropy = ({ posts = [] }) => {
               </Fade>
               <Fade bottom delay={800}>
                 <br />
-                <Text sx={{ color: "muted", fontSize: "90%" }}>
+                <Text sx={{ color: 'muted', fontSize: '90%' }}>
                   Board advisor: John Abele (Founder, Boston Scientific)
                 </Text>
               </Fade>
             </Box>
             <Fade bottom delay={900}>
-              <Box sx={{ color: "muted" }}>
+              <Box sx={{ color: 'muted' }}>
                 <Text as="p">
                   <Quote>“</Quote>Hack Club is the organization I wish I had
                   when I was a teenager.
@@ -987,12 +987,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$2 Million</Text>
                 </Fade>
                 <Fade bottom delay={80}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Tom Preston-Werner
                   </Text>
                 </Fade>
                 <Fade bottom delay={110}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Musk Foundation
                   </Text>
                 </Fade>
@@ -1002,17 +1002,17 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$500k - $1M</Text>
                 </Fade>
                 <Fade bottom delay={170}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Joe Liemandt
                   </Text>
                 </Fade>
                 <Fade bottom delay={200}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     The Libermans
                   </Text>
                 </Fade>
                 <Fade bottom delay={230}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Lizzy Danhakl/Andrew Reed
                   </Text>
                 </Fade>
@@ -1022,37 +1022,37 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$200k - $500k</Text>
                 </Fade>
                 <Fade bottom delay={290}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Vitalik Buterin
                   </Text>
                 </Fade>
                 <Fade bottom delay={300}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Jack Dorsey
                   </Text>
                 </Fade>
                 <Fade bottom delay={320}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Craig Newmark
                   </Text>
                 </Fade>
                 <Fade bottom delay={350}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Conway
                   </Text>
                 </Fade>
                 <Fade bottom delay={380}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Endless Network
                   </Text>
                 </Fade>
                 <Fade bottom delay={410}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Argosy Foundation
                   </Text>
                 </Fade>
                 <Fade bottom delay={440}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Ron Baron
                   </Text>
                 </Fade>
@@ -1062,12 +1062,12 @@ const Philanthropy = ({ posts = [] }) => {
                   <Text as="h3">$100k- $200k</Text>
                 </Fade>
                 <Fade bottom delay={5000}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Quinn Slack
                   </Text>
                 </Fade>
                 <Fade bottom delay={530}>
-                  <Text as="p" sx={{ lineHeight: "1.8em" }}>
+                  <Text as="p" sx={{ lineHeight: '1.8em' }}>
                     Adam Ross
                   </Text>
                 </Fade>
@@ -1079,7 +1079,7 @@ const Philanthropy = ({ posts = [] }) => {
               A few others who support Hack Club
             </Text>
           </Fade>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }} mb={5}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
             <Fade bottom delay={30}>
               <Pill
                 logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
@@ -1143,18 +1143,18 @@ const Philanthropy = ({ posts = [] }) => {
                 href="/philanthropy/supporters"
                 target="_blank"
                 sx={{
-                  color: "slate",
-                  textDecoration: "none",
-                  fontSize: "1em !important",
-                  backgroundColor: "snow",
-                  padding: "5px 10px",
-                  borderRadius: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "0.5s ease",
-                  ":hover": {
-                    backgroundColor: "#e0e6ed",
-                  },
+                  color: 'slate',
+                  textDecoration: 'none',
+                  fontSize: '1em !important',
+                  backgroundColor: 'snow',
+                  padding: '5px 10px',
+                  borderRadius: '50px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  transition: '0.5s ease',
+                  ':hover': {
+                    backgroundColor: '#e0e6ed'
+                  }
                 }}
               >
                 and many more...
@@ -1170,14 +1170,14 @@ const Philanthropy = ({ posts = [] }) => {
           <Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
             <Fade bottom delay={100}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   Obrey Muchena started a Hack Club in his senior year of high
                   school at Kabulonga Boys' Secondary School, and now more than
                   a dozen students are coding.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   Thanks to our donor-funded laptop program, Hack Club sent him
                   a MacBook Air. In his Hack Club, Obrey and his best friend
@@ -1187,7 +1187,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/obrey.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1202,14 +1202,14 @@ const Philanthropy = ({ posts = [] }) => {
             </Fade>
             <Fade bottom delay={200}>
               <Q>
-                <Heading mb={3} sx={{ fontWeight: "normal", fontSize: "18px" }}>
+                <Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
                   In 2021, Maggie joined the Hack Club community; she has since
                   shipped 10+ coding projects from widgets to raycast
                   extensions.
                 </Heading>
                 <Heading
                   fontSize={[4, 5]}
-                  sx={{ fontWeight: "700", fontSize: ["18px", "20px", "22px"] }}
+                  sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
                 >
                   The Hack Club community "inspired me to step outside my
                   comfort zone and take on challenges I never previously would
@@ -1220,7 +1220,7 @@ const Philanthropy = ({ posts = [] }) => {
                 <Flex align="center" mt={[3, 4]}>
                   <Avatar
                     src="/philanthropy/maggie.png"
-                    sx={{ height: "48px", width: "48px" }}
+                    sx={{ height: '48px', width: '48px' }}
                     mr={3}
                     st
                   />
@@ -1236,13 +1236,13 @@ const Philanthropy = ({ posts = [] }) => {
           </Grid>
           <Line />
           <Fade bottom>
-            <Text as="h1" sx={{ textAlign: "center" }} mb={[4, 5]}>
+            <Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
               Hack Club invites the 21st century’s leading thinkers, builders
               and disrupters to join our small, core network of donors with a
               gift.
             </Text>
           </Fade>
-          <Grid columns={["1fr", "1fr", "1fr", "0.8fr 1.2fr"]}>
+          <Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
             <Fade bottom>
               <Box>
                 <Text as="p">
@@ -1367,13 +1367,13 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom delay={200}>
             <Grid
               gap={4}
-              columns={[1, "2fr 1fr", "2fr 1fr"]}
+              columns={[1, '2fr 1fr', '2fr 1fr']}
               my={4}
-              sx={{ color: "muted" }}
+              sx={{ color: 'muted' }}
             >
               <Box>
                 <Text as="h3">The Hack Foundation</Text>
-                <Text as="p" sx={{ width: "70%" }}>
+                <Text as="p" sx={{ width: '70%' }}>
                   Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
                   West Hollywood, CA, 90069
                 </Text>
@@ -1387,10 +1387,10 @@ const Philanthropy = ({ posts = [] }) => {
                   as="a"
                   href="mailto:christina@hackclub.com"
                   sx={{
-                    ":link": {
-                      color: "inherit",
-                      textDecoration: "none",
-                    },
+                    ':link': {
+                      color: 'inherit',
+                      textDecoration: 'none'
+                    }
                   }}
                 >
                   christina@hackclub.com
@@ -1404,7 +1404,7 @@ const Philanthropy = ({ posts = [] }) => {
               href="/philanthropy/hackclub.pdf"
               download="HackClub"
               mb={4}
-              sx={{ fontSize: "1em !important" }}
+              sx={{ fontSize: '1em !important' }}
             >
               Download as PDF
             </Button>
@@ -1412,7 +1412,7 @@ const Philanthropy = ({ posts = [] }) => {
           <Fade bottom>
             <Text
               as="p"
-              sx={{ fontSize: "90% !important", color: "muted", pb: 2 }}
+              sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}
             >
               Site by Belle, 17, Hack Clubber
             </Text>
@@ -1421,7 +1421,7 @@ const Philanthropy = ({ posts = [] }) => {
         <Footer />
       </Box>
     </>
-  );
-};
+  )
+}
 
-export default Philanthropy;
+export default Philanthropy
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index 12d2ec44d..81ee238ca 100644
--- a/pages/philanthropy/supporters.js
+++ b/pages/philanthropy/supporters.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import styled from "@emotion/styled";
+import React, { useEffect } from 'react'
+import styled from '@emotion/styled'
 import {
   Box,
   Button,
@@ -10,21 +10,21 @@ import {
   Grid,
   Link as A,
   Text,
-  Avatar,
-} from "theme-ui";
-import Photo from "../../components/photo";
-import Image from "next/image";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import ForceTheme from "../../components/force-theme";
-import Nav from "../../components/nav";
-import Sponsors from "../../components/donate/sponsors";
-import donors from "../../components/donate/donors.json";
-import Footer from "../../components/footer";
+  Avatar
+} from 'theme-ui'
+import Photo from '../../components/photo'
+import Image from 'next/image'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../../components/force-theme'
+import Nav from '../../components/nav'
+import Sponsors from '../../components/donate/sponsors'
+import donors from '../../components/donate/donors.json'
+import Footer from '../../components/footer'
 
 const Header = styled(Box)`
-  background: url("/pattern.svg");
-`;
+  background: url('/pattern.svg');
+`
 
 const Sheet = styled(Card)`
   position: relative;
@@ -32,16 +32,16 @@ const Sheet = styled(Card)`
   border-radius: 8px;
   width: 100%;
   color: white;
-`;
+`
 Sheet.defaultProps = {
   sx: {
-    bg: "rgba(255, 255, 255, 0.875)",
+    bg: 'rgba(255, 255, 255, 0.875)',
     p: [3, 4],
-    color: "black",
+    color: 'black',
     width: 1,
-    mb: 4,
-  },
-};
+    mb: 4
+  }
+}
 
 const Row = styled(Box)`
   text-align: left;
@@ -49,32 +49,32 @@ const Row = styled(Box)`
     display: grid;
     grid-gap: 18px;
     grid-template-columns: ${({ reverse }) =>
-      reverse ? "3fr 2fr" : "2fr 3fr"};
+      reverse ? '3fr 2fr' : '2fr 3fr'};
   }
-`;
+`
 
 Sheet.defaultProps = {
   sx: {
-    maxWidth: "52rem",
+    maxWidth: '52rem',
     fontSize: 3,
     p: [4, 5],
-    color: "white",
-  },
-};
-const subhline = { fontSize: [3, 4], style: { lineHeight: "1.375" } };
+    color: 'white'
+  }
+}
+const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
 
 const contentContainer = {
   maxWidth: 72,
   width: 1,
   p: 3,
-  color: "black",
-  style: { position: "relative" },
-};
-const content = { maxWidth: 48, mx: 0, color: "black" };
+  color: 'black',
+  style: { position: 'relative' }
+}
+const content = { maxWidth: 48, mx: 0, color: 'black' }
 
-const title = "Donate";
+const title = 'Donate'
 const desc =
-  "Contribute today to empower the next generation and help start a coding club at every high school.";
+  'Contribute today to empower the next generation and help start a coding club at every high school.'
 
 const DonorGrid = styled(Box)`
   display: grid;
@@ -89,7 +89,7 @@ const DonorGrid = styled(Box)`
     grid-gap: 18px;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   }
-`;
+`
 
 const DonorCardBase = styled(Sheet)`
   display: flex;
@@ -99,32 +99,32 @@ const DonorCardBase = styled(Sheet)`
     border-radius: 0;
     box-shadow: none;
   }
-`;
+`
 const DonorCard = ({ name, link = false }) => (
   <DonorCardBase bg="white" p="18px!important" mb={0}>
-    <Text color="black" sx={{ textAlign: "center", fontSize: "16px" }}>
+    <Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
       {name}
     </Text>
   </DonorCardBase>
-);
+)
 const DonorListing = ({ name, url }) => {
   if (url) {
     return (
       <A target="_blank" href={url} color="black" underline>
         <DonorCard name={name} link />
       </A>
-    );
+    )
   } else {
-    return <DonorCard name={name} />;
+    return <DonorCard name={name} />
   }
-};
+}
 
 export default function Donate({ sprig }) {
   useEffect(() => {
     if (sprig) {
-      window.document.getElementById("sprig-donation").scrollIntoView();
+      window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [sprig]);
+  }, [sprig])
 
   return (
     <Box>
@@ -136,43 +136,43 @@ export default function Donate({ sprig }) {
       />
       <Nav color="muted" />
       <ForceTheme theme="light" />
-      <Header sx={{ position: "relative" }}>
+      <Header sx={{ position: 'relative' }}>
         <Box
           sx={{
-            background: "rgba(0,0,0, 0.8)",
+            background: 'rgba(0,0,0, 0.8)',
             zIndex: 1,
-            position: "relative",
-            color: "white!important",
-            height: "600px",
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
           }}
-          pt={[5, 5, "110px"]}
+          pt={[5, 5, '110px']}
         >
           <Box
             sx={{
-              maxWidth: "64rem",
-              mx: "auto",
+              maxWidth: '64rem',
+              mx: 'auto',
               zIndex: 1,
-              position: "relative",
+              position: 'relative'
             }}
             align="center"
             py={2}
             px={[1, 3]}
           >
-            <Container sx={{ maxWidth: "48rem" }}>
+            <Container sx={{ maxWidth: '48rem' }}>
               <Heading
                 sx={{
-                  fontSize: ["42px", "54px", "72px"],
+                  fontSize: ['42px', '54px', '72px'],
                   my: 2,
-                  color: "white",
+                  color: 'white'
                 }}
               >
                 We rely on people like you to bring coding to the world.
               </Heading>
               <Box
                 sx={{
-                  fontSize: ["22px", "23px", "28px"],
-                  maxWidth: "40rem",
-                  color: "white",
+                  fontSize: ['22px', '23px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
                 }}
               >
                 Contribute today to empower the next generation. Help start a
@@ -181,17 +181,17 @@ export default function Donate({ sprig }) {
               <Button
                 variant="ctaLg"
                 my={3}
-                sx={{ width: ["100%", "auto"] }}
+                sx={{ width: ['100%', 'auto'] }}
                 as="a"
                 href="https://hcb.hackclub.com/donations/start/hq"
               >
                 Donate
-                <Text sx={{ display: ["none", "inline-block"], ml: 2 }}>
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
                   to Hack Club
                 </Text>
               </Button>
               <Text
-                sx={{ mt: 1, display: "block", opacity: 0.8 }}
+                sx={{ mt: 1, display: 'block', opacity: 0.8 }}
                 fontSize={2}
                 color="white"
               >
@@ -204,7 +204,7 @@ export default function Donate({ sprig }) {
         </Box>
       </Header>
       <Flex justify="center" bg="snow" color="black">
-        <Container width={1} py={[4, 5]} sx={{ textAlign: ["left", "center"] }}>
+        <Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
           <Heading
             px={3}
             mt={[3, 4]}
@@ -216,11 +216,11 @@ export default function Donate({ sprig }) {
             A few of our amazing donors.
           </Heading>
           <DonorGrid mt={4} mb={4}>
-            {Object.keys(donors).map((name) => (
+            {Object.keys(donors).map(name => (
               <DonorListing key={name} name={name} url={donors[name]} />
             ))}
           </DonorGrid>
-          <Heading px={3} sx={{ fontWeight: "normal", mt: 2 }}>
+          <Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
             and many more…
           </Heading>
         </Container>
@@ -238,9 +238,9 @@ export default function Donate({ sprig }) {
           target="_blank"
           mb={4}
           sx={{
-            fontSize: "1em !important",
-            background: "slate",
-            textAlign: "center",
+            fontSize: '1em !important',
+            background: 'slate',
+            textAlign: 'center'
           }}
         >
           Learn more about Hack Club
@@ -248,13 +248,13 @@ export default function Donate({ sprig }) {
       </Container>
       <Footer />
     </Box>
-  );
+  )
 }
 
 export async function getServerSideProps(context) {
   return {
     props: {
-      sprig: Object.keys(context.query).includes("gl"),
-    },
-  };
+      sprig: Object.keys(context.query).includes('gl')
+    }
+  }
 }
diff --git a/pages/philosophy.js b/pages/philosophy.js
index a16d99192..e1fe39120 100644
--- a/pages/philosophy.js
+++ b/pages/philosophy.js
@@ -1,10 +1,10 @@
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import { Box, Heading, Container, Text, Button, Link } from "theme-ui";
-import Nav from "../components/nav";
-import styled from "@emotion/styled";
-import Footer from "../components/footer";
-import NextLink from "next/link";
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import { Box, Heading, Container, Text, Button, Link } from 'theme-ui'
+import Nav from '../components/nav'
+import styled from '@emotion/styled'
+import Footer from '../components/footer'
+import NextLink from 'next/link'
 
 const Header = styled(Box)`
   color: white;
@@ -18,7 +18,7 @@ const Header = styled(Box)`
   > div {
     position: relative;
   }
-`;
+`
 
 const Seal = styled(Box)`
   border-radius: 9999px;
@@ -35,12 +35,12 @@ const Seal = styled(Box)`
     transform: rotate(3deg);
     margin-top: -3rem;
   }
-`;
+`
 
 const Ultraline = styled(Heading)`
   line-height: 1.125 !important;
   text-transform: uppercase;
-  color: "white";
+  color: 'white';
   caps: true;
   &:nth-of-type(2) {
     padding-left: 1.5rem;
@@ -55,7 +55,7 @@ const Ultraline = styled(Heading)`
     text-align: right;
     position: relative;
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
       background-color: rgba(252, 252, 252, 0.625);
@@ -69,14 +69,14 @@ const Ultraline = styled(Heading)`
       }
     }
   }
-`;
+`
 
-Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } };
+Ultraline.defaultProps = { sx: { fontSize: [48, 54, 72, 96] } }
 
 const Row = styled(Container)`
   px: 3;
   py: [4, 5];
-  color: "black";
+  color: 'black';
   display: grid;
   text-align: left;
   h2 {
@@ -87,9 +87,9 @@ const Row = styled(Container)`
     grid-gap: 24px;
     grid-template-columns: 2fr 3fr;
   }
-`;
+`
 
-Row.defaultProps = { sx: { px: 3, py: [3, 4], color: "black" } };
+Row.defaultProps = { sx: { px: 3, py: [3, 4], color: 'black' } }
 
 const Super = styled(Text)`
   background-color: rgb(228, 115, 45);
@@ -99,11 +99,11 @@ const Super = styled(Text)`
   padding-bottom: 12px;
   padding-left: 18px;
   padding-right: 18px;
-`;
+`
 
 export default function Philosophy() {
   return (
-    <Box sx={{ bg: "white", color: "black", minHeight: "100vh" }}>
+    <Box sx={{ bg: 'white', color: 'black', minHeight: '100vh' }}>
       <Nav />
       <Meta
         as={Head}
@@ -115,7 +115,7 @@ export default function Philosophy() {
         <Header>
           <Container
             width={1}
-            sx={{ maxWidth: "56rem!important", py: "72px", px: 3 }}
+            sx={{ maxWidth: '56rem!important', py: '72px', px: 3 }}
             px={3}
             align="left"
           >
@@ -127,10 +127,10 @@ export default function Philosophy() {
               <Heading
                 fontSize={[1, 2]}
                 sx={{
-                  fontWeight: "400",
-                  marginBlockStart: "0em",
-                  fontSize: ["16px", "18px"],
-                  textTransform: "uppercase",
+                  fontWeight: '400',
+                  marginBlockStart: '0em',
+                  fontSize: ['16px', '18px'],
+                  textTransform: 'uppercase'
                 }}
                 caps
               >
@@ -139,9 +139,9 @@ export default function Philosophy() {
               <Heading
                 fontSize={[3, 4]}
                 sx={{
-                  fontWeight: "800",
-                  marginBlockStart: "0em",
-                  textTransform: "uppercase",
+                  fontWeight: '800',
+                  marginBlockStart: '0em',
+                  textTransform: 'uppercase'
                 }}
               >
                 Philosophy
@@ -188,7 +188,7 @@ export default function Philosophy() {
           <Box sx={{ fontSize: [3, 3] }}>
             <strong>
               The goal of Hack Club is to help you become a hacker.
-            </strong>{" "}
+            </strong>{' '}
             We want a space at every school where people are making interesting
             things with code, every week. Schools don’t provide that, so we’re
             creating it in every school to make building things accessible to
@@ -217,7 +217,7 @@ export default function Philosophy() {
           </Heading>
           <Box sx={{ fontSize: [3, 3] }}>
             Just as the best carpenters didn’t learn in the classroom, neither
-            did the best programmers. Through our{" "}
+            did the best programmers. Through our{' '}
             <Link href="/workshops">workshops</Link>, you’ll be walked through
             building projects. Starting out, you won’t understand how the code
             works, but you’ll build understanding as you go. You’ll get stuck
@@ -241,15 +241,15 @@ export default function Philosophy() {
         </Row>
         <Box
           sx={{
-            backgroundImage: (t) => t.util.gx("orange", "red"),
-            margin: "auto",
-            width: "600px",
-            maxWidth: "90%",
+            backgroundImage: t => t.util.gx('orange', 'red'),
+            margin: 'auto',
+            width: '600px',
+            maxWidth: '90%',
             mb: 4,
             borderRadius: 8,
-            color: "white",
-            textAlign: "center",
-            p: 4,
+            color: 'white',
+            textAlign: 'center',
+            p: 4
           }}
         >
           <Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
@@ -259,10 +259,10 @@ export default function Philosophy() {
             mr={[0, 3]}
             mb={[3, 0]}
             sx={{
-              bg: "white",
-              color: "red",
-              display: ["block", "inline-block"],
-              mx: "auto",
+              bg: 'white',
+              color: 'red',
+              display: ['block', 'inline-block'],
+              mx: 'auto'
             }}
             as="a"
             href="https://apply.hackclub.com"
@@ -270,7 +270,7 @@ export default function Philosophy() {
             Start a club
           </Button>
           <NextLink href="/slack" passHref>
-            <Button sx={{ bg: "white", color: "red" }} as="a">
+            <Button sx={{ bg: 'white', color: 'red' }} as="a">
               Join our Slack
             </Button>
           </NextLink>
@@ -278,5 +278,5 @@ export default function Philosophy() {
       </Box>
       <Footer light />
     </Box>
-  );
+  )
 }
diff --git a/pages/press.js b/pages/press.js
index 681649900..feb586304 100644
--- a/pages/press.js
+++ b/pages/press.js
@@ -1,11 +1,11 @@
-import { BaseStyles, Box, Button, Container, Grid, Heading } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import Press from "../components/press.mdx";
-import { Logo } from "./brand";
+import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Press from '../components/press.mdx'
+import { Logo } from './brand'
 
 const Page = () => (
   <>
@@ -20,18 +20,18 @@ const Page = () => (
     <Box
       as="header"
       sx={{
-        bg: "sheet",
-        color: "text",
+        bg: 'sheet',
+        color: 'text',
         pt: [5, null, null, null, 6],
         pb: [3, 4, 5, null, 6],
-        textAlign: "center",
+        textAlign: 'center'
       }}
     >
       <Container variant="copy">
-        <Heading as="h1" variant="title" sx={{ color: "primary", mt: [2, 4] }}>
+        <Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
           Press
         </Heading>
-        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: "text" }}>
+        <Heading as="h2" variant="subtitle" sx={{ mt: 3, color: 'text' }}>
           Hack Club’s resources for press.
         </Heading>
       </Container>
@@ -41,8 +41,8 @@ const Page = () => (
       sx={{
         py: [3, 4],
         px: 3,
-        maxWidth: [null, "copyUltra"],
-        h2: { variant: "text.headline" },
+        maxWidth: [null, 'copyUltra'],
+        h2: { variant: 'text.headline' }
       }}
     >
       <Heading id="banners" variant="headline">
@@ -53,8 +53,8 @@ const Page = () => (
         sx={{
           mx: 0,
           fontSize: 2,
-          "> p": { maxWidth: "copy" },
-          h2: { variant: "text.headline", mt: 4 },
+          '> p': { maxWidth: 'copy' },
+          h2: { variant: 'text.headline', mt: 4 }
         }}
       >
         <Press />
@@ -69,17 +69,17 @@ const Page = () => (
         View all →
       </Button>
       <Heading variant="headline">Logos</Heading>
-      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: "none" } }}>
+      <Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
         {[
-          "flag-standalone",
-          "flag-orpheus-top",
-          "flag-orpheus-left",
-          "flag-standalone-bw",
+          'flag-standalone',
+          'flag-orpheus-top',
+          'flag-orpheus-left',
+          'flag-standalone-bw',
           // 'flag-orpheus-top-bw',
           // 'flag-orpheus-left-bw',
-          "icon-rounded",
-          "icon-square",
-        ].map((key) => (
+          'icon-rounded',
+          'icon-square'
+        ].map(key => (
           <Logo name={key} key={key} />
         ))}
       </Grid>
@@ -94,6 +94,6 @@ const Page = () => (
     </Container>
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner-2022.js b/pages/preston-werner-2022.js
index 3d7e8aec9..89c0ab734 100644
--- a/pages/preston-werner-2022.js
+++ b/pages/preston-werner-2022.js
@@ -7,22 +7,22 @@ import {
   Grid,
   Heading,
   Link,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner-2022.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner-2022.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -39,25 +39,25 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("blue", "green"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('blue', 'green')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
-            fontSize: [5, 6, null, "82px"],
+            fontSize: [5, 6, null, '82px'],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Tom and Theresa{" "}
-          <span style={{ whiteSpace: "nowrap" }}>Preston-Werner</span> are
+          Tom and Theresa{' '}
+          <span style={{ whiteSpace: 'nowrap' }}>Preston-Werner</span> are
           donating <Amount amount="$500,000" /> to&nbsp;Hack&nbsp;Club
         </Heading>
       </Container>
@@ -81,6 +81,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/preston-werner.js b/pages/preston-werner.js
index 8a8e853b2..9096bd3ae 100644
--- a/pages/preston-werner.js
+++ b/pages/preston-werner.js
@@ -6,21 +6,21 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import PrestonWernerCopy from "../components/announcements/preston-werner.mdx";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  Text
+} from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
+  DatePill
+} from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -37,28 +37,28 @@ const Page = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("yellow", "red"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('yellow', 'red')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
           “I love that Hack Club is <span>helping me make it possible</span>
-          {""} for more students to have opportunities like I had as a young
+          {''} for more students to have opportunities like I had as a young
           person"
         </Heading>
-        <Text variant="headline" sx={{ display: "inline-flex" }}>
+        <Text variant="headline" sx={{ display: 'inline-flex' }}>
           —
           <Avatar
             src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
@@ -91,6 +91,6 @@ const Page = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default Page;
+export default Page
diff --git a/pages/relon.js b/pages/relon.js
index c211c2296..ad503dd4a 100644
--- a/pages/relon.js
+++ b/pages/relon.js
@@ -8,39 +8,39 @@ import {
   Flex,
   Grid,
   Heading,
-  Text,
-} from "theme-ui";
+  Text
+} from 'theme-ui'
 import {
   PillHolder,
   AuthorPill,
-  DatePill,
-} from "../components/announcements/pills";
-import Head from "next/head";
-import NextLink from "next/link";
-import styled from "@emotion/styled";
-import theme from "../lib/theme";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import ForceTheme from "../components/force-theme";
-import Footer from "../components/footer";
-import ElonCopy from "../components/announcements/relon.mdx";
-import Amount from "../components/announcements/amount";
-import SlackCTA from "../components/announcements/cta";
-import AnnouncementHolder from "../components/announcements/holder";
+  DatePill
+} from '../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const StyledLink = styled.a`
   text-decoration: none;
   color: ${theme.colors.white};
-`;
+`
 
-const RelonLink = (props) => {
-  const { href } = props;
+const RelonLink = props => {
+  const { href } = props
   return (
     <NextLink href={href} passHref>
       <StyledLink>{props.children}</StyledLink>
     </NextLink>
-  );
-};
+  )
+}
 
 const RelonPage = () => (
   <>
@@ -57,24 +57,24 @@ const RelonPage = () => (
       sx={{
         pt: [5, 6],
         pb: [4, 5],
-        bg: "rgb(104, 41, 205)",
-        backgroundImage: (theme) => theme.util.gx("purple", "orange"),
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
       }}
     >
-      <Container sx={{ textAlign: "center", color: "white" }}>
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
         <Heading
           as="h1"
           variant="title"
           sx={{
             fontSize: [5, 6, null, 7],
             span: {
-              WebkitTextStroke: "currentColor",
-              WebkitTextStrokeWidth: ["2px", "3px"],
-              WebkitTextFillColor: "transparent",
-            },
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
           }}
         >
-          Elon Musk is donating <Amount amount="$1,000,000" /> to{" "}
+          Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
           <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
@@ -98,6 +98,6 @@ const RelonPage = () => (
     <SlackCTA />
     <Footer />
   </>
-);
+)
 
-export default RelonPage;
+export default RelonPage
diff --git a/pages/santa.js b/pages/santa.js
index b7060a64d..9f16c3451 100644
--- a/pages/santa.js
+++ b/pages/santa.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -10,14 +10,14 @@ import {
   Image,
   Input,
   Label,
-  Link,
-} from "theme-ui";
-import styled from "@emotion/styled";
-import Snowfall from "react-snowfall";
-import Footer from "../components/footer";
-import FadeIn from "../components/fade-in";
-import { keyframes } from "@emotion/react";
-import { useState } from "react";
+  Link
+} from 'theme-ui'
+import styled from '@emotion/styled'
+import Snowfall from 'react-snowfall'
+import Footer from '../components/footer'
+import FadeIn from '../components/fade-in'
+import { keyframes } from '@emotion/react'
+import { useState } from 'react'
 
 const Hero = styled(Box)`
   background-image: linear-gradient(
@@ -35,7 +35,7 @@ const Hero = styled(Box)`
     right: 0;
     bottom: 0;
   }
-`;
+`
 
 const Lead = styled(Box)`
   font-size: 24px;
@@ -45,17 +45,17 @@ const Lead = styled(Box)`
   margin-bottom: 18px;
   color: rgb(249, 249, 250);
   max-width: 48rem;
-`;
+`
 
 const Space = styled(Text)`
   white-space: pre;
   transition: 1s;
-`;
+`
 const RemoveSpace = styled(Text)`
   &:hover .space {
     font-size: 0;
   }
-`;
+`
 
 const floating = keyframes`
   from {
@@ -64,10 +64,10 @@ const floating = keyframes`
   to {
     transform: translateY(-20px) rotate(5deg);
   }
-`;
+`
 
 const Page = () => (
-  <Box sx={{ overflowX: "hidden" }}>
+  <Box sx={{ overflowX: 'hidden' }}>
     <Meta
       as={Head}
       title="Secret Santa"
@@ -79,7 +79,7 @@ const Page = () => (
       <Snowfall />
       <Container px={3} py={[3, 4]}>
         <Heading
-          sx={{ py: [3, 5], fontSize: [4, 5], color: "white", opacity: 0.8 }}
+          sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
           bold
           caps
         >
@@ -101,13 +101,13 @@ const Page = () => (
           height={384}
           sx={{
             zIndex: 1,
-            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`,
+            animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
           }}
         />
         <FadeIn delay={3000}>
           <Heading
             as="h1"
-            sx={{ fontSize: [5, 6], color: "white", margin: "auto" }}
+            sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
           >
             Hack Club Secret Santa
           </Heading>
@@ -134,21 +134,21 @@ const Page = () => (
     </Hero>
     <Footer />
   </Box>
-);
-export default Page;
+)
+export default Page
 
 function Base({ children, action, target, method }) {
   return (
     <Box
       as="form"
       sx={{
-        display: "grid",
-        width: ["full", 512],
-        bg: "white",
-        borderRadius: "extra",
-        mx: "auto",
+        display: 'grid',
+        width: ['full', 512],
+        bg: 'white',
+        borderRadius: 'extra',
+        mx: 'auto',
         p: 4,
-        mt: 4,
+        mt: 4
       }}
       action={action}
       target={target}
@@ -156,13 +156,13 @@ function Base({ children, action, target, method }) {
     >
       {children}
     </Box>
-  );
+  )
 }
 
 function Field({ placeholder, label, name, type, value, onChange }) {
   return (
     <Box sx={{ my: 2 }}>
-      <Label htmlFor={name} sx={{ color: "muted", fontSize: 18 }}>
+      <Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
         {label}
       </Label>
       <Input
@@ -171,8 +171,8 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         name={name}
         type={type}
         sx={{
-          bg: "smoke",
-          color: "black",
+          bg: 'smoke',
+          color: 'black'
         }}
         autofillBackgroundColor="smoke"
         onChange={onChange}
@@ -180,24 +180,24 @@ function Field({ placeholder, label, name, type, value, onChange }) {
         required
       />
     </Box>
-  );
+  )
 }
 
 function Signup() {
-  const [values, setValues] = useState({});
+  const [values, setValues] = useState({})
   return (
     <Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
-      <Heading sx={{ color: "black", textAlign: "left", mb: 2 }}>
+      <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
         Register!
       </Heading>
-      <Text sx={{ textAlign: "left", color: "muted" }}>
-        Be sure to check out the{" "}
+      <Text sx={{ textAlign: 'left', color: 'muted' }}>
+        Be sure to check out the{' '}
         <Link
           href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
-          sx={{ color: "blue" }}
+          sx={{ color: 'blue' }}
         >
           rules
-        </Link>{" "}
+        </Link>{' '}
         before you sign up!
       </Text>
       <Field
@@ -205,7 +205,7 @@ function Signup() {
         name="prefill_Name"
         placeholder="Fiona Hackworth"
         value={values.name}
-        onChange={(e) => setValues({ ...values, name: e.target.value })}
+        onChange={e => setValues({ ...values, name: e.target.value })}
       />
 
       <Field
@@ -214,7 +214,7 @@ function Signup() {
         placeholder="Hardware, plushies, microwaved apples?"
         type="text"
         value={values.likes}
-        onChange={(e) => setValues({ ...values, likes: e.target.value })}
+        onChange={e => setValues({ ...values, likes: e.target.value })}
       />
       <Field
         label="Dislikes"
@@ -222,11 +222,11 @@ function Signup() {
         placeholder="Socks, cheese, coal..."
         type="text"
         value={values.dislikes}
-        onChange={(e) => setValues({ ...values, dislikes: e.target.value })}
+        onChange={e => setValues({ ...values, dislikes: e.target.value })}
       />
-      <Button sx={{ bg: "blue", mt: [2, 3], py: 3 }} type="submit">{`Finish ${
-        7 - Object.values(values).filter((n) => n !== "").length
+      <Button sx={{ bg: 'blue', mt: [2, 3], py: 3 }} type="submit">{`Finish ${
+        7 - Object.values(values).filter(n => n !== '').length
       } fields to sign up`}</Button>
     </Base>
-  );
+  )
 }
diff --git a/pages/ship.js b/pages/ship.js
index dc109c0d4..0bb747b71 100644
--- a/pages/ship.js
+++ b/pages/ship.js
@@ -9,43 +9,43 @@ import {
   Heading,
   Image,
   Text,
-  Flex,
-} from "theme-ui";
-import NextLink from "next/link";
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
-import SlideUp from "../components/slide-up";
-import Why from "../components/ship/why.mdx";
-import Icon from "../components/icon";
-import Posts from "../components/posts";
-import Footer from "../components/footer";
-import { timeSince } from "../lib/dates";
-import { orderBy, filter, take, map, uniq, reverse } from "lodash";
-import { keyframes } from "@emotion/react";
-import { thousands } from "../lib/members";
+  Flex
+} from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import SlideUp from '../components/slide-up'
+import Why from '../components/ship/why.mdx'
+import Icon from '../components/icon'
+import Posts from '../components/posts'
+import Footer from '../components/footer'
+import { timeSince } from '../lib/dates'
+import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
+import { keyframes } from '@emotion/react'
+import { thousands } from '../lib/members'
 
-const ShipBadge = (props) => (
+const ShipBadge = props => (
   <Badge
     as="mark"
     sx={{
-      bg: "#FF62DC",
-      color: "inherit",
-      fontSize: "inherit",
-      display: "inline-block",
-      borderRadius: "default",
+      bg: '#FF62DC',
+      color: 'inherit',
+      fontSize: 'inherit',
+      display: 'inline-block',
+      borderRadius: 'default',
       px: [2, 3],
       py: 1,
-      ...props.sx,
+      ...props.sx
     }}
     {...props}
   />
-);
+)
 
 const waves = keyframes({
-  "0%": { backgroundPositionX: "0" },
-  "100%": { backgroundPositionX: "-100%" },
-});
+  '0%': { backgroundPositionX: '0' },
+  '100%': { backgroundPositionX: '-100%' }
+})
 
 const ShipPage = ({ posts = [] }) => (
   <>
@@ -59,21 +59,21 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="header"
       sx={{
-        bg: "blue",
-        backgroundImage: (t) =>
+        bg: 'blue',
+        backgroundImage: t =>
           `linear-gradient(to bottom, ${t.colors.cyan}, ${t.colors.blue})`,
-        color: "white",
-        textAlign: "center",
-        py: [5, 6],
+        color: 'white',
+        textAlign: 'center',
+        py: [5, 6]
       }}
     >
       <Container
         sx={{
-          maxWidth: [null, null, "copyPlus", "copyUltra"],
-          p: { fontSize: [2, 3, 4], maxWidth: "copy", mx: "auto" },
+          maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+          p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
         }}
       >
-        <Text variant="eyebrow" sx={{ color: "white", opacity: 0.875 }}>
+        <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
           All aboard!
         </Text>
         <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
@@ -92,10 +92,10 @@ const ShipPage = ({ posts = [] }) => (
           variant="layout.container"
           sx={{
             mt: [3, 4, 5],
-            textAlign: "left",
+            textAlign: 'left',
             div: { p: [3, 4] },
-            h2: { variant: "text.headline", color: "blue", mt: 0, mb: 2 },
-            p: { fontSize: 2, my: 0 },
+            h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
+            p: { fontSize: 2, my: 0 }
           }}
         >
           <Why />
@@ -106,20 +106,20 @@ const ShipPage = ({ posts = [] }) => (
       as="section"
       id="projects"
       sx={{
-        bg: "blue",
-        color: "white",
+        bg: 'blue',
+        color: 'white',
         py: 4,
-        backgroundImage: "url(/ship/wave.svg)",
-        backgroundSize: "200% auto",
-        "@media (prefers-reduced-motion: no-preference)": {
-          animation: `${waves} 15s linear forwards infinite`,
-        },
+        backgroundImage: 'url(/ship/wave.svg)',
+        backgroundSize: '200% auto',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${waves} 15s linear forwards infinite`
+        }
       }}
     >
       <Heading
         as="h2"
         variant="title"
-        sx={{ px: 3, mb: 4, textAlign: "center" }}
+        sx={{ px: 3, mb: 4, textAlign: 'center' }}
       >
         Recently shipped…
       </Heading>
@@ -128,17 +128,17 @@ const ShipPage = ({ posts = [] }) => (
     <Box
       as="section"
       sx={{
-        color: "black",
-        bg: "white",
-        py: [4, 5],
+        color: 'black',
+        bg: 'white',
+        py: [4, 5]
       }}
     >
-      <Container variant="copy" sx={{ textAlign: "center" }}>
-        <Icon glyph="message-new" size={72} sx={{ color: "blue" }} />
+      <Container variant="copy" sx={{ textAlign: 'center' }}>
+        <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
         <Heading as="h2" variant="headline" mt={0}>
           Want to ship your own projects?
         </Heading>
-        <Text variant="subtitle" sx={{ lineHeight: "caption", mb: 3 }}>
+        <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
           The #ship channel on the Hack&nbsp;Club Slack is where {thousands}k+
           teenagers from around the world share what they’re working on & help
           each other.
@@ -152,21 +152,21 @@ const ShipPage = ({ posts = [] }) => (
     </Box>
     <Footer />
   </>
-);
+)
 
-export default ShipPage;
+export default ShipPage
 
 export const getStaticProps = async () => {
-  const posts = await fetch("https://scrapbook.hackclub.com/api/r/ship")
-    .then((r) => r.json())
-    .then((posts) =>
-      filter(posts, (p) =>
-        ["jpg", "jpeg", "png"].includes(
-          p.attachments[0]?.split(".")[p.attachments[0]?.split(".").length - 1],
-        ),
-      ),
+  const posts = await fetch('https://scrapbook.hackclub.com/api/r/ship')
+    .then(r => r.json())
+    .then(posts =>
+      filter(posts, p =>
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
+        )
+      )
     )
-    .then((posts) => orderBy(posts, "postedAt", "desc"))
-    .then((posts) => take(posts, 24));
-  return { props: { posts }, revalidate: 2 };
-};
+    .then(posts => orderBy(posts, 'postedAt', 'desc'))
+    .then(posts => take(posts, 24))
+  return { props: { posts }, revalidate: 2 }
+}
diff --git a/pages/slack.js b/pages/slack.js
index 36ddce9be..2f60e4e9e 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -1,32 +1,32 @@
-import { keyframes } from "@emotion/react";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import NextLink from "next/link";
-import useSWR from "swr";
-import { Badge, Box, Card, Container, Grid, Heading, Text } from "theme-ui";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import Icon from "../components/icon";
-import Nav from "../components/nav";
-import Header from "../components/slack/header";
-import SlackEvents from "../components/slack/slack-events";
-import Stat from "../components/stat";
-import fetcher from "../lib/fetcher";
-import { formatted, thousands } from "../lib/members";
+import { keyframes } from '@emotion/react'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import useSWR from 'swr'
+import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Nav from '../components/nav'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+import Stat from '../components/stat'
+import fetcher from '../lib/fetcher'
+import { formatted, thousands } from '../lib/members'
 
 const zoomSlide = keyframes({
-  from: { backgroundPosition: "-32px bottom" },
-  to: { backgroundPosition: "32px bottom" },
-});
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})
 
-const withCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 const SlackPage = () => {
   const { data: millionCount } = useSWR(
-    "https://jia.haas.hackclub.com/api/currentNumber",
+    'https://jia.haas.hackclub.com/api/currentNumber',
     fetcher,
-    { refreshInterval: 10_000 },
-  );
+    { refreshInterval: 10_000 }
+  )
 
   return (
     <>
@@ -43,14 +43,14 @@ const SlackPage = () => {
         <Grid
           columns={[2, 5]}
           gap={2}
-          sx={{ maxWidth: "copyPlus", alignItems: "end" }}
+          sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
         >
           <Stat
             value={`${thousands}k+`}
             label="total members"
             color="red"
             lg
-            sx={{ gridColumn: "span 2" }}
+            sx={{ gridColumn: 'span 2' }}
           />
           <Stat value={6} label="continents" />
           <Stat value="1M+" label="messages/yr" />
@@ -58,7 +58,7 @@ const SlackPage = () => {
         <Text
           variant="subtitle"
           as="p"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3, mb: [3, 4] }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
         >
           Have a coding question? Looking for project feedback? You’ll find some
           fabulous people to talk to in our global Slack (Discord-style online
@@ -67,14 +67,14 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Channels for every interest.
         </Heading>
         <Text
           as="p"
           variant="subtitle"
-          sx={{ maxWidth: "copy", fontSize: [2, 3], mt: 3 }}
+          sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}
         >
           Across 2,000 public channels, find the community for your favorite
           programming language, ask for advice, or just hang out.
@@ -85,53 +85,53 @@ const SlackPage = () => {
           sx={{
             py: [3, 4],
             h3: { my: 0 },
-            "> div": {
+            '> div': {
               px: [2, 3],
               py: 4,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gridColumn: ["span 1", "span 3"],
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gridColumn: ['span 1', 'span 3']
             },
             a: {
-              position: "relative",
-              ":hover,:focus": {
+              position: 'relative',
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
             },
             h3: {
-              variant: "text.headline",
-              color: "white",
-              lineHeight: "title",
+              variant: 'text.headline',
+              color: 'white',
+              lineHeight: 'title',
               m: 0,
-              "+ p": {
+              '+ p': {
                 mt: 2,
-                color: "white",
+                color: 'white',
                 opacity: 0.75,
                 fontSize: 2,
-                lineHeight: "caption",
-              },
-            },
+                lineHeight: 'caption'
+              }
+            }
           }}
         >
           <Box
             as="aside"
             sx={{
-              gridRow: [null, "span 2"],
-              gridColumn: ["span 2", "span 3"],
-              maxHeight: "100%",
-              overflow: "hidden",
+              gridRow: [null, 'span 2'],
+              gridColumn: ['span 2', 'span 3'],
+              maxHeight: '100%',
+              overflow: 'hidden'
             }}
           >
             <Heading
@@ -140,9 +140,9 @@ const SlackPage = () => {
               sx={{
                 mt: 0,
                 mb: 0,
-                color: "red",
-                textTransform: "uppercase",
-                letterSpacing: "headline",
+                color: 'red',
+                textTransform: 'uppercase',
+                letterSpacing: 'headline'
               }}
             >
               Live from our&nbsp;Slack <br />
@@ -153,8 +153,8 @@ const SlackPage = () => {
               sx={{
                 fontSize: 1,
                 fontWeight: 300,
-                fontStyle: "italic",
-                mb: "16px",
+                fontStyle: 'italic',
+                mb: '16px'
               }}
             >
               Waiting for more messages...
@@ -166,9 +166,9 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                gridColumn: ["span 2", "span 5"],
-                bg: "blue",
-                backgroundImage: (t) => t.util.gx("cyan", "blue"),
+                gridColumn: ['span 2', 'span 5'],
+                bg: 'blue',
+                backgroundImage: t => t.util.gx('cyan', 'blue')
               }}
             >
               <Icon glyph="external" size={24} />
@@ -183,9 +183,9 @@ const SlackPage = () => {
             href="https://scrapbook.hackclub.com/"
             variant="interactive"
             sx={{
-              gridColumn: ["span 2", "span 5"],
-              bg: "dark",
-              backgroundImage: (t) => t.util.gx("yellow", "orange"),
+              gridColumn: ['span 2', 'span 5'],
+              bg: 'dark',
+              backgroundImage: t => t.util.gx('yellow', 'orange')
             }}
           >
             <Icon glyph="external" size={24} />
@@ -197,20 +197,20 @@ const SlackPage = () => {
           <Card
             bg="red"
             sx={{
-              gridColumn: ["span 2 !important", "span 2 !important"],
-              gridRow: ["span 1 !important", "span 3 !important"],
-              writingMode: ["lr-tb", "tb-rl"],
+              gridColumn: ['span 2 !important', 'span 2 !important'],
+              gridRow: ['span 1 !important', 'span 3 !important'],
+              writingMode: ['lr-tb', 'tb-rl']
             }}
           >
             <Heading as="h3">#counttoamillion</Heading>
-            <Text as="p" sx={{ display: "flex", alignItems: "baseline" }}>
-              We’re at{" "}
+            <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+              We’re at{' '}
               <Badge
                 variant="outline"
                 as="span"
                 sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
               >
-                {millionCount ? withCommas(millionCount.number) : "???"}
+                {millionCount ? withCommas(millionCount.number) : '???'}
               </Badge>
               !
             </Text>
@@ -221,20 +221,20 @@ const SlackPage = () => {
           <Card
             sx={{
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)",
-              backgroundColor: "#FEC62E",
-              backgroundPosition: "center center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "100% auto",
-              gridColumn: ["span 2", "span 3 !important", "span 4 !important"],
-              h3: { opacity: 0 },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/12020-07-25_fqxym71bmqjr1d35btawn5q6ph1zt0mk.png)',
+              backgroundColor: '#FEC62E',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% auto',
+              gridColumn: ['span 2', 'span 3 !important', 'span 4 !important'],
+              h3: { opacity: 0 }
             }}
           >
             <h3>#design</h3>
           </Card>
           <Card
             bg="dark"
-            sx={{ h3: { color: "green", textShadow: "0 0 4px currentColor" } }}
+            sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
           >
             <h3>#code</h3>
           </Card>
@@ -242,11 +242,11 @@ const SlackPage = () => {
             bg="yellow"
             sx={{
               backgroundImage:
-                "url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)",
-              backgroundSize: "100%",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2", "span 3 !important"],
+                'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
+              backgroundSize: '100%',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2', 'span 3 !important']
             }}
           >
             <h3>#dogs</h3>
@@ -258,20 +258,20 @@ const SlackPage = () => {
             bg="red"
             sx={{
               backgroundImage: ({ colors }) =>
-                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`,
+                `linear-gradient(-184deg, ${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, ${colors.purple} 83.3333%, ${colors.purple} 100%)`
             }}
           >
             <h3>#lgbtq</h3>
           </Card>
           <Card
             sx={{
-              bg: "dark",
+              bg: 'dark',
               backgroundImage:
-                "url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              textShadow: "text",
-              gridColumn: ["span 2 !important", "span 4 !important"],
+                'url(https://cloud-jnfb0t781-hack-club-bot.vercel.app/02020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              textShadow: 'text',
+              gridColumn: ['span 2 !important', 'span 4 !important']
             }}
           >
             <h3>#photography</h3>
@@ -280,7 +280,7 @@ const SlackPage = () => {
         <Heading
           as="h2"
           variant="title"
-          sx={{ mt: [4, 5], color: "black", maxWidth: "copyUltra" }}
+          sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
         >
           Events on Zoom that don’t suck.
         </Heading>
@@ -291,35 +291,35 @@ const SlackPage = () => {
             py: [3, 4],
             mx: [null, null, null, -4],
             h3: {
-              variant: "text.title",
-              color: "white",
-              my: 0,
+              variant: 'text.title',
+              color: 'white',
+              my: 0
             },
             p: {
-              color: "white",
+              color: 'white',
               opacity: 0.875,
               fontSize: [2, 3],
-              lineHeight: "caption",
-              mt: 2,
+              lineHeight: 'caption',
+              mt: 2
             },
             a: {
-              position: "relative",
+              position: 'relative',
               pb: [4, 5],
-              ":hover,:focus": {
+              ':hover,:focus': {
                 svg: {
-                  transform: "translateX(28px) translateY(-28px)",
-                  opacity: 0,
-                },
-              },
+                  transform: 'translateX(28px) translateY(-28px)',
+                  opacity: 0
+                }
+              }
             },
             svg: {
-              position: "absolute",
+              position: 'absolute',
               top: 2,
               right: 2,
-              fill: "white",
+              fill: 'white',
               transition:
-                "transform 0.25s ease-in-out, opacity 0.25s ease-in-out",
-            },
+                'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+            }
           }}
         >
           <NextLink href="/amas" passHref>
@@ -327,11 +327,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#000",
+                bg: '#000',
                 backgroundImage:
-                  "linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)",
-                backgroundSize: "100% auto",
-                textShadow: "text",
+                  'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/22020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+                backgroundSize: '100% auto',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -344,18 +344,18 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "dark",
+                bg: 'dark',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)",
-                backgroundPosition: "bottom center",
-                backgroundSize: "cover",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/32020-07-25_pp7t4h8738hdm46r2xxrd8tz3kjc5x0t.png)',
+                backgroundPosition: 'bottom center',
+                backgroundSize: 'cover',
                 h3: {
-                  textTransform: "uppercase",
-                  WebkitTextStroke: "white",
-                  WebkitTextStrokeWidth: "2px",
-                  WebkitTextFillColor: "transparent",
-                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`,
-                },
+                  textTransform: 'uppercase',
+                  WebkitTextStroke: 'white',
+                  WebkitTextStrokeWidth: '2px',
+                  WebkitTextFillColor: 'transparent',
+                  filter: `drop-shadow(0 0 1px #50E3C2) drop-shadow(0 0 4px #50E3C2)`
+                }
               }}
             >
               <Icon glyph="external" size={24} />
@@ -368,11 +368,11 @@ const SlackPage = () => {
               as="a"
               variant="interactive"
               sx={{
-                bg: "#759B40",
+                bg: '#759B40',
                 backgroundImage:
-                  "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)",
-                backgroundSize: "cover",
-                textShadow: "text",
+                  'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/42020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+                backgroundSize: 'cover',
+                textShadow: 'text'
               }}
             >
               <Icon glyph="external" size={24} />
@@ -385,14 +385,14 @@ const SlackPage = () => {
             href="https://events.hackclub.com/"
             variant="interactive"
             sx={{
-              bg: "#3b6fce",
+              bg: '#3b6fce',
               backgroundImage:
-                "url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)",
-              backgroundRepeat: "repeat-x",
-              backgroundPosition: "0 bottom",
-              "@media (prefers-reduced-motion: no-preference)": {
-                animation: `${zoomSlide} 2s linear infinite`,
-              },
+                'url(https://cloud-n6i5i4zb9-hack-club-bot.vercel.app/52020-07-25_zoomus-icon.svg)',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 bottom',
+              '@media (prefers-reduced-motion: no-preference)': {
+                animation: `${zoomSlide} 2s linear infinite`
+              }
             }}
           >
             <Icon glyph="external" size={24} />
@@ -403,7 +403,7 @@ const SlackPage = () => {
       </Container>
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default SlackPage;
+export default SlackPage
diff --git a/pages/stickers.js b/pages/stickers.js
index 6ebd0d525..16a8a9d89 100644
--- a/pages/stickers.js
+++ b/pages/stickers.js
@@ -1,20 +1,20 @@
-import { Card, Box, Flex, Grid, Heading, Image, Text } from "theme-ui";
-import Meta from "@hackclub/meta";
-import Head from "next/head";
-import Nav from "../components/nav";
-import BGImg from "../components/background-image";
-import Footer from "../components/footer";
-import ForceTheme from "../components/force-theme";
-import StickerForm from "../components/stickers/request-form";
+import { Card, Box, Flex, Grid, Heading, Image, Text } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import BGImg from '../components/background-image'
+import Footer from '../components/footer'
+import ForceTheme from '../components/force-theme'
+import StickerForm from '../components/stickers/request-form'
 
-import fs from "fs";
-import path from "path";
-import { startCase } from "lodash";
+import fs from 'fs'
+import path from 'path'
+import { startCase } from 'lodash'
 
-const color = "#EC37AD";
+const color = '#EC37AD'
 
 const StickersPage = ({ stickers = [] }) => [
-  <Box as="main" key="main" sx={{ textAlign: "center" }}>
+  <Box as="main" key="main" sx={{ textAlign: 'center' }}>
     <ForceTheme theme="dark" />
     <Nav dark />
     <Meta
@@ -25,7 +25,7 @@ const StickersPage = ({ stickers = [] }) => [
     />
     <Box
       as="article"
-      sx={{ position: "relative", overflow: "hidden", py: [6, 7], px: 4 }}
+      sx={{ position: 'relative', overflow: 'hidden', py: [6, 7], px: 4 }}
     >
       <BGImg
         width={2732}
@@ -36,69 +36,69 @@ const StickersPage = ({ stickers = [] }) => [
       />
       <Card
         sx={{
-          variant: "cards.translucentDark",
-          bg: "rgba(0, 0, 0, 0.5) !important",
-          position: "relative",
-          overflow: "visible",
-          maxWidth: "copy",
-          mx: "auto",
+          variant: 'cards.translucentDark',
+          bg: 'rgba(0, 0, 0, 0.5) !important',
+          position: 'relative',
+          overflow: 'visible',
+          maxWidth: 'copy',
+          mx: 'auto',
           my: [4, 5],
-          py: 3,
+          py: 3
         }}
       >
         <Box
           as="aside"
           sx={{
-            display: ["none", "flex"],
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
+            display: ['none', 'flex'],
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
             top: 0,
-            left: "50%",
-            transform: "translateX(-50%) translateY(-50%)",
-            width: "100%",
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+            width: '100%',
             img: {
               mx: 3,
               flexShrink: 0,
-              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.25))",
-            },
+              filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+            }
           }}
         >
           <Image
             src="/stickers/macintosh.svg"
             alt="Macintosh sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: "4.5rem",
-              height: "6rem",
+              transform: 'rotate(-12deg)',
+              width: '4.5rem',
+              height: '6rem'
             }}
           />
           <Image
             src="/stickers/2020_progress.png"
             alt="Pride sticker"
             sx={{
-              transform: "rotate(3deg)",
-              width: ["4rem", "6rem"],
-              height: ["4rem", "6rem"],
+              transform: 'rotate(3deg)',
+              width: ['4rem', '6rem'],
+              height: ['4rem', '6rem']
             }}
           />
           <Image
             src="/stickers/enjoy.svg"
             alt="Enjoy Hack Club Coca-Cola sticker"
             sx={{
-              transform: "rotate(-12deg)",
-              width: ["6rem", "7.5rem"],
-              height: ["4rem", "5rem"],
+              transform: 'rotate(-12deg)',
+              width: ['6rem', '7.5rem'],
+              height: ['4rem', '5rem']
             }}
           />
         </Box>
         <Heading
           as="h1"
           variant="ultratitle"
-          sx={(theme) => ({
-            color: "primary",
-            ...theme.util.gxText(color, "red"),
-            mt: [3, 4],
+          sx={theme => ({
+            color: 'primary',
+            ...theme.util.gxText(color, 'red'),
+            mt: [3, 4]
           })}
         >
           Unparalleled stickers.
@@ -111,45 +111,45 @@ const StickersPage = ({ stickers = [] }) => [
     <Card
       as="section"
       sx={{
-        bg: "darkless",
-        maxWidth: "copyUltra",
-        mx: "auto",
+        bg: 'darkless',
+        maxWidth: 'copyUltra',
+        mx: 'auto',
         my: [4, 5],
         py: [3, 4],
-        overflow: "visible",
+        overflow: 'visible'
       }}
     >
       <Heading as="h2" variant="title" color="white">
         Gotta collect ‘em all.
       </Heading>
       <Grid columns={[2, 3]} gap={[3, 4]} mt={[3, 4]}>
-        {stickers.map((st) => (
+        {stickers.map(st => (
           <Flex
             key={st}
             sx={{
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               img: {
-                objectFit: "contain",
+                objectFit: 'contain',
                 width: [128, 160],
                 height: [128, 160],
-                transition: ".25s transform ease-in-out",
-                ":hover": {
-                  transform: "scale(1.5)",
-                  filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.25))",
-                },
-              },
+                transition: '.25s transform ease-in-out',
+                ':hover': {
+                  transform: 'scale(1.5)',
+                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))'
+                }
+              }
             }}
           >
             <Image
               src={`/stickers/${st}`}
               width={128}
               height={128}
-              alt={st.split(".")[0]}
+              alt={st.split('.')[0]}
             />
             <Text as="span" variant="caption" sx={{ fontSize: 2, mt: [2, 3] }}>
-              {startCase(st.replace(/\.(svg|png)/, ""))}
+              {startCase(st.replace(/\.(svg|png)/, ''))}
             </Text>
           </Flex>
         ))}
@@ -173,15 +173,15 @@ const StickersPage = ({ stickers = [] }) => [
     </Card>
 */}
   </Box>,
-  <Footer dark key="footer" />,
-];
+  <Footer dark key="footer" />
+]
 
-export default StickersPage;
+export default StickersPage
 
 export const getStaticProps = () => {
-  const stickersDir = path.join(process.cwd(), "public", "stickers");
+  const stickersDir = path.join(process.cwd(), 'public', 'stickers')
   const stickers = fs
     .readdirSync(stickersDir)
-    .filter((sticker) => sticker !== "hero.jpg");
-  return { props: { stickers } };
-};
+    .filter(sticker => sticker !== 'hero.jpg')
+  return { props: { stickers } }
+}
diff --git a/pages/winter.js b/pages/winter.js
index f92cd6a92..02902575d 100644
--- a/pages/winter.js
+++ b/pages/winter.js
@@ -1,6 +1,6 @@
-import Head from "next/head";
-import Meta from "@hackclub/meta";
-import Nav from "../components/nav";
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
 import {
   Box,
   Container,
@@ -11,36 +11,36 @@ import {
   Input,
   Label,
   Link,
-  Flex,
-} from "theme-ui";
-import Snowfall from "react-snowfall";
-import WinterFooter from "../components/winter/footer";
-import FadeIn from "../components/fade-in";
-import { useState } from "react";
-import ForceTheme from "../components/force-theme";
-import RealTimeline from "../components/winter/timeline";
-import InfoGrid from "../components/winter/info";
-import Breakdown from "../components/winter/breakdown";
-import Projects from "../components/winter/projects";
-import Landing from "../components/winter/landing";
-import Recap from "../components/winter/recap";
-import { Zoom } from "react-reveal";
-import useSWR from "swr";
-import fetcher from "../lib/fetcher";
+  Flex
+} from 'theme-ui'
+import Snowfall from 'react-snowfall'
+import WinterFooter from '../components/winter/footer'
+import FadeIn from '../components/fade-in'
+import { useState } from 'react'
+import ForceTheme from '../components/force-theme'
+import RealTimeline from '../components/winter/timeline'
+import InfoGrid from '../components/winter/info'
+import Breakdown from '../components/winter/breakdown'
+import Projects from '../components/winter/projects'
+import Landing from '../components/winter/landing'
+import Recap from '../components/winter/recap'
+import { Zoom } from 'react-reveal'
+import useSWR from 'swr'
+import fetcher from '../lib/fetcher'
 
 export function Winter() {
   const { data: rsvps } = useSWR(
-    "https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp",
+    'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
     fetcher,
-    { refreshInterval: 1000 },
-  );
+    { refreshInterval: 1000 }
+  )
 
   const rsvpCount = rsvps
-    ? rsvps.filter((rsvp) => rsvp.fields.Status === "rsvp").length
-    : 1000; // arbitrary fallback number
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 1000 // arbitrary fallback number
   return (
     <>
-      <Box as="main" sx={{ bg: "blue" }}>
+      <Box as="main" sx={{ bg: 'blue' }}>
         <Meta
           as={Head}
           title="Winter Hardware Wonderland"
@@ -60,26 +60,26 @@ export function Winter() {
             <Heading
               variant="headline"
               sx={{
-                textShadow: "0px 0px 21px #E1F1FF",
-                color: "white",
+                textShadow: '0px 0px 21px #E1F1FF',
+                color: 'white',
                 fontSize: [3, 4, 5],
-                maxWidth: "90%",
+                maxWidth: '90%'
               }}
             >
               You've RSVPed, what's next?
             </Heading>
-            <Text as="p" sx={{ pb: 4, color: "white", fontSize: [2, 3] }}>
+            <Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3] }}>
               Get a free hardware development kit by building a tile-based game
-              in{" "}
+              in{' '}
               <Link
                 href="https://github.com/hackclub/sprig#readme"
                 target="_blank"
-                sx={{ color: "inherit" }}
+                sx={{ color: 'inherit' }}
               >
                 Sprig
               </Link>
-              . Or come hangout with us in #hardware-party on{" "}
-              <Link target="_blank" href="/slack" sx={{ color: "inherit" }}>
+              . Or come hangout with us in #hardware-party on{' '}
+              <Link target="_blank" href="/slack" sx={{ color: 'inherit' }}>
                 Slack
               </Link>
               .
@@ -88,22 +88,22 @@ export function Winter() {
 
           <Flex
             sx={{
-              flexDirection: ["column", null, "row"],
-              justifyContent: "center",
-              alignItems: "center",
+              flexDirection: ['column', null, 'row'],
+              justifyContent: 'center',
+              alignItems: 'center'
             }}
           >
             <Box
-              sx={{ display: "flex", flexDirection: ["row", null, "column"] }}
+              sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
             >
               <Zoom>
                 <Heading
                   variant="title"
                   sx={{
-                    color: "white",
-                    textTransform: "uppercase",
-                    transform: ["none", null, "rotate(-90deg)"],
-                    textShadow: "0px 0px 21px #E1F1FF",
+                    color: 'white',
+                    textTransform: 'uppercase',
+                    transform: ['none', null, 'rotate(-90deg)'],
+                    textShadow: '0px 0px 21px #E1F1FF'
                   }}
                 >
                   Timeline
@@ -112,9 +112,9 @@ export function Winter() {
                   src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
                   alt="Illustrated orange fox sleeping in a curled position"
                   sx={{
-                    width: ["100px", null, "80%"],
+                    width: ['100px', null, '80%'],
                     pt: [null, null, 6],
-                    ml: [2, null, null],
+                    ml: [2, null, null]
                   }}
                 />
               </Zoom>
@@ -128,7 +128,7 @@ export function Winter() {
         <WinterFooter />
       </Box>
     </>
-  );
+  )
 }
 
-export default Winter;
+export default Winter
diff --git a/prettier.config.js b/prettier.config.js
index ee14b71bc..111881a84 100755
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
-  arrowParens: "avoid",
+  trailingComma: 'none',
+  arrowParens: 'avoid',
   printWidth: 80,
-  semi: false,
-};
+  semi: false
+}

From 7949e6a84d8e3d342a07d0c7d5efadc9dda3f5c5 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sun, 1 Oct 2023 17:40:49 +0100
Subject: [PATCH 103/111] syncing pizza.js + fancy button

---
 components/index/cards/mailing-list.js | 28 ++++++++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 95620e6fe..3e4bdd1ac 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,7 +5,6 @@ import {
   Input,
   Button,
   Text,
-  Alert,
   Card,
   Flex,
   Grid,
@@ -156,22 +155,29 @@ const MailingList = () => {
               />
             </div>
             <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp; Subscribe
-                </>
-              ) : (
-                "Subscribe"
-              )}
+                {submitting ? (
+                    <>
+                        <Loading />
+                        {' '} Subscribe
+                    </>
+                ) : (
+                    submitted ? (
+                        <>
+                            <Icon glyph="send" />
+                            {' '} You're on the list!
+                        </>
+                    ) : (
+                        "Subscribe"
+                    )
+                )}
             </Button>
           </Grid>
-            {submitted && (
+            {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
-            )}
+            )}*/}
         </Flex>
         <Box sx={{
             display: "grid",
diff --git a/components/mail-card.js b/components/mail-card.js
index 62d3ef5f6..72c8aecc9 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,7 +2,7 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 75 ? mail.body.substring(0, 75) + "..." : mail.body;
+    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
     return (
         <Link href={mail.link || "/newsletter"}>
             <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>

From 8b1583eeeb42e29d25cf02060a35333a8fd67563 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Tue, 3 Oct 2023 18:59:13 +0100
Subject: [PATCH 104/111] mobile support!

---
 components/index/cards/mailing-list.js | 217 ++++++++++++-------------
 components/mail-card.js                |  50 ++++--
 2 files changed, 142 insertions(+), 125 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 3e4bdd1ac..d458a14fd 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,14 +1,6 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import {
-  Box,
-  Input,
-  Button,
-  Text,
-  Card,
-  Flex,
-  Grid,
-} from "theme-ui";
+import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/outernet/hack.jpg";
 import Link from "next/link";
@@ -26,6 +18,7 @@ const Loading = () => (
       width: "16px",
       height: "16px",
       animation: "spin 2s linear infinite",
+      mr: "5px",
       "@keyframes spin": {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(360deg)" },
@@ -73,122 +66,128 @@ const MailingList = () => {
           position: "relative",
           zIndex: 2,
           backdropFilter: "blur(8px)",
-          display: "flex",
-            gridGap: 5,
         }}
       >
-        <Flex
-          sx={{
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
+            sx={{
               placeItems: "center",
               justifyContent: "center",
-            alignItems: ["left", "left", "center"],
-            flexDirection: "column",
-            gap: "10px",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
               width: "75%",
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{
-                fontSize: [4, "36px", "42px", 6],
-                zIndex: 2,
-                textAlign: "left",
-              }}
-            >
-              Join the newsletter
-            </Text>
-            <Text
-              sx={{
-                color: "darkless",
-                mt: 2,
-                fontSize: 3,
-                textAlign: "left",
-              }}
-              as="p"
-            >
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you. Check out{" "}
-              <Link href="/newsletter">past issues</Link>.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
-            sx={{
-              textAlign: "center",
-              alignItems: "end",
-              input: { bg: "sunken" },
-              width: "100%",
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
+            <Box>
+              <Text
+                variant="title"
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
                 }}
-              />
-            </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
+              >
+                Join the newsletter
+              </Text>
+              <Text
                 sx={{
-                  width: "100%",
-                  textAlign: "center",
-                  fontSize: 2,
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
                 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out{" "}
+                <Link href="/newsletter">past issues</Link>.
+              </Text>
+            </Box>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
                 {submitting ? (
-                    <>
-                        <Loading />
-                        {' '} Subscribe
-                    </>
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
                 ) : (
-                    submitted ? (
-                        <>
-                            <Icon glyph="send" />
-                            {' '} You're on the list!
-                        </>
-                    ) : (
-                        "Subscribe"
-                    )
+                  "Subscribe"
                 )}
-            </Button>
-          </Grid>
+              </Button>
+            </Grid>
             {/*{submitted && (
                 <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
                     <Icon glyph="send" />
                     <Text sx={{ ml: 2 }}>You're on the list!</Text>
                 </Alert>
             )}*/}
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              width: "100%",
+            }}
+          >
+            <MailCard
+              subject="👁️ What’s up at Hack Club? 👁️"
+              date="July 2022"
+              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+            />
+            <MailCard
+              subject="Community Newsletter"
+              date="September 2022"
+              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+            />
+          </Box>
         </Flex>
-        <Box sx={{
-            display: "grid",
-            gridGap: 4,
-            width: "100%"
-        }}>
-            <MailCard subject="👁️ What’s up at Hack Club? 👁️" date="July 2022" body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."/>
-            <MailCard subject="Community Newsletter" date="September 2022" body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}/>
-        </Box>
       </Card>
-        {/*<Box
+      {/*<Box
             sx={{
                 position: "absolute",
                 display: "block",
@@ -200,12 +199,12 @@ const MailingList = () => {
                 background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
             }}
         />*/}
-       <BGImg
-            src={FooterImgFile}
-            alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-            priority
-            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-        />
+      <BGImg
+        src={FooterImgFile}
+        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
+        priority
+        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
+      />
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 72c8aecc9..5f8947214 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -2,21 +2,39 @@ import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
 export default function MailCard(mail) {
-    const body = mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
-    return (
-        <Link href={mail.link || "/newsletter"}>
-            <Card className="mail-card" sx={{ maxWidth: "1500px", cursor: "pointer" }}>
-                <Box>
-                    <Box sx={{ width: "100%", height: "20px", backgroundImage: "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')", backgroundRepeat: 'repeat-x', }} />
-                    <Text as="h1" sx={{ textTransform: "uppercase" }}>{mail.subject || "No Subject"}</Text>
-                <Text as="p">
-                    {mail.date} — To Orpheus, From Hack Club
-                </Text>
-              <Text as="h2" sx={{ fontWeight: 'normal' }}>
-                  {body || "We're no strangers to love. You know the rules and so do I."}
-              </Text>
-                </Box>
-            </Card>
-        </Link>
+  const body =
+    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+  return (
+    <Link href={mail.link || "/newsletter"}>
+      <Card
+        as="span"
+        sx={{
+          maxWidth: "1500px",
+          cursor: "pointer",
+          transform: ["scale(0.75)", "none"],
+          transformOrigin: "bottom left",
+          flex: 1,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              width: "100%",
+              height: "20px",
+              backgroundImage:
+                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              backgroundRepeat: "repeat-x",
+            }}
+          />
+          <Text as="h1" sx={{ textTransform: "uppercase" }}>
+            {mail.subject || "No Subject"}
+          </Text>
+          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="h2" sx={{ fontWeight: "normal" }}>
+            {body}
+          </Text>
+        </Box>
+      </Card>
+    </Link>
   );
 }

From cccaee5bc7e3528a61b88c9e463357390b1f3be1 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 4 Oct 2023 21:38:17 +0100
Subject: [PATCH 105/111] bloody merge conflicts!

---
 components/index/cards/mailing-list.js | 17 +++++-------
 components/mail-card.js                | 36 ++++++++++++--------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index d458a14fd..01da5d337 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -76,7 +76,7 @@ const MailingList = () => {
               alignItems: ["left", "left", "center"],
               flexDirection: "column",
               gap: "10px",
-              width: "75%",
+              width: ["100%", "75%"],
             }}
           >
             <Box>
@@ -160,29 +160,26 @@ const MailingList = () => {
                 )}
               </Button>
             </Grid>
-            {/*{submitted && (
-                <Alert variant="primary" sx={{ bg: "green", mt: [2, 3] }}>
-                    <Icon glyph="send" />
-                    <Text sx={{ ml: 2 }}>You're on the list!</Text>
-                </Alert>
-            )}*/}
           </Flex>
           <Box
             sx={{
               display: "grid",
               gridGap: 4,
+              mt: [4, 0],
               width: "100%",
             }}
           >
             <MailCard
-              subject="👁️ What’s up at Hack Club? 👁️"
-              date="July 2022"
-              body="Hey friends! I'm Ishan (@Ishan), I'm 17, and I'm a Hack Clubber emailing you from Vermont! This email is a 5-minute monthly rundown of what your fellow Hack Clubbers have been up to this past month! You're receiving this email because you're in the Hack Club Slack."
+              subject="👀 What’s up at Hack Club this time? 👀"
+              date="August 2022"
+              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
+              link="/newsletter/2022/07"
             />
             <MailCard
               subject="Community Newsletter"
               date="September 2022"
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
+              link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 5f8947214..2eea2db92 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,22 +1,18 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard(mail) {
-  const body =
-    mail.body.length > 80 ? mail.body.substring(0, 80) + "..." : mail.body;
+export default function MailCard({ body, date, subject, link }) {
+  body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
-    <Link href={mail.link || "/newsletter"}>
-      <Card
-        as="span"
-        sx={{
-          maxWidth: "1500px",
-          cursor: "pointer",
-          transform: ["scale(0.75)", "none"],
-          transformOrigin: "bottom left",
-          flex: 1,
-        }}
-      >
-        <Box>
+    <Card
+      variant="interactive"
+      sx={{
+        maxWidth: "1500px",
+        cursor: "pointer",
+      }}
+    >
+      <Link href={link || "/newsletter"}>
+        <div>
           <Box
             sx={{
               width: "100%",
@@ -27,14 +23,14 @@ export default function MailCard(mail) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {mail.subject || "No Subject"}
+            {subject}
           </Text>
-          <Text as="p">{mail.date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>
-        </Box>
-      </Card>
-    </Link>
+        </div>
+      </Link>
+    </Card>
   );
 }

From 500a7a574fa6245917f58f78804e64f07229ea7e Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Thu, 5 Oct 2023 08:35:35 +0100
Subject: [PATCH 106/111] updating copy + fixing links

---
 components/index/cards/mailing-list.js | 4 ++--
 components/mail-card.js                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 01da5d337..1d952fa12 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -2,7 +2,7 @@ import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
 import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/outernet/hack.jpg";
+import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
 
@@ -173,7 +173,7 @@ const MailingList = () => {
               subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022/07"
+              link="/newsletter/2022-08-august/"
             />
             <MailCard
               subject="Community Newsletter"
diff --git a/components/mail-card.js b/components/mail-card.js
index 2eea2db92..7b4dec7d0 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -25,7 +25,7 @@ export default function MailCard({ body, date, subject, link }) {
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
             {subject}
           </Text>
-          <Text as="p">{date} — To Orpheus, From Hack Club</Text>
+          <Text as="p">{date} — To You, From Hack Club</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From 16cebc5eb465b1ec257e03c7cb2eaabc0e27aeb8 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 15:47:55 +0100
Subject: [PATCH 107/111] changes

---
 components/index/cards/mailing-list.js | 39 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 1d952fa12..fd8895339 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -5,6 +5,22 @@ import BGImg from "../../background-image";
 import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
+import styled from "@emotion/styled";
+import theme from "@hackclub/theme";
+
+/*const Base = styled(Box)`
+  background: ${(props) =>
+    props.dark
+      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
+      : `${theme.colors.snow} url('/pattern.svg') repeat`};
+  ${(props) =>
+    props.dark &&
+    `
+      background-size: ${theme.space[4]}px ${theme.space[4]}px;
+    `} @media print {
+    display: none;
+  }
+`;*/
 
 const Loading = () => (
   <Box
@@ -185,17 +201,18 @@ const MailingList = () => {
         </Flex>
       </Card>
       {/*<Box
-            sx={{
-                position: "absolute",
-                display: "block",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 0,
-                background: "linear-gradient(-180deg, #f1c40f 14%, #ff8c37 82%)",
-            }}
-        />*/}
+        sx={{
+          position: "absolute",
+          display: "block",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 0,
+          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          backgroundImage: `url('/pattern.svg') repeat`,
+        }}
+      />*/}
       <BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"

From acdce99a1efbae78f6b8e3b3edc4f598140edeb3 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 16:08:07 +0100
Subject: [PATCH 108/111] tweaking!

---
 components/index/cards/mailing-list.js | 32 ++++++--------------------
 components/mail-card.js                |  6 ++---
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index fd8895339..7a8d7fcab 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,26 +1,8 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
 import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
-import BGImg from "../../background-image";
-import FooterImgFile from "../../../public/home/footer.png";
 import Link from "next/link";
 import MailCard from "../../mail-card";
-import styled from "@emotion/styled";
-import theme from "@hackclub/theme";
-
-/*const Base = styled(Box)`
-  background: ${(props) =>
-    props.dark
-      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
-      : `${theme.colors.snow} url('/pattern.svg') repeat`};
-  ${(props) =>
-    props.dark &&
-    `
-      background-size: ${theme.space[4]}px ${theme.space[4]}px;
-    `} @media print {
-    display: none;
-  }
-`;*/
 
 const Loading = () => (
   <Box
@@ -186,21 +168,21 @@ const MailingList = () => {
             }}
           >
             <MailCard
-              subject="👀 What’s up at Hack Club this time? 👀"
               date="August 2022"
+              issue={2}
               body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
               link="/newsletter/2022-08-august/"
             />
             <MailCard
-              subject="Community Newsletter"
               date="September 2022"
+              issue={3}
               body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
               link="/newsletter/2022-09-september/"
             />
           </Box>
         </Flex>
       </Card>
-      {/*<Box
+      <Box
         sx={{
           position: "absolute",
           display: "block",
@@ -209,16 +191,16 @@ const MailingList = () => {
           right: 0,
           bottom: 0,
           zIndex: 0,
-          background: "linear-gradient(-180deg, #5bc0de 14%, #338eda 82%)",
+          background: "linear-gradient(-180deg, #33d6a6 20%, #338eda 80%)",
           backgroundImage: `url('/pattern.svg') repeat`,
         }}
-      />*/}
-      <BGImg
+      />
+      {/*<BGImg
         src={FooterImgFile}
         alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
         priority
         gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-      />
+      />*/}
     </Box>
   );
 };
diff --git a/components/mail-card.js b/components/mail-card.js
index 7b4dec7d0..c564cdf7e 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -1,7 +1,7 @@
 import { Box, Card, Text } from "theme-ui";
 import Link from "next/link";
 
-export default function MailCard({ body, date, subject, link }) {
+export default function MailCard({ body, issue, date, link }) {
   body = body.length > 80 ? body.substring(0, 80) + "..." : body;
   return (
     <Card
@@ -23,9 +23,9 @@ export default function MailCard({ body, date, subject, link }) {
             }}
           />
           <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {subject}
+            {date}
           </Text>
-          <Text as="p">{date} — To You, From Hack Club</Text>
+          <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
           <Text as="h2" sx={{ fontWeight: "normal" }}>
             {body}
           </Text>

From be49430a4264565d36b5be1aff6951e376946b98 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 18:27:13 +0100
Subject: [PATCH 109/111] updated

---
 components/index/cards/mailing-list.js | 31 +++++++++-----------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 7a8d7fcab..2ce6c64a8 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -1,8 +1,10 @@
 import Icon from "@hackclub/icons";
 import { useRef, useState } from "react";
-import { Box, Input, Button, Text, Card, Flex, Grid } from "theme-ui";
-import Link from "next/link";
+import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
 import MailCard from "../../mail-card";
+import BGImg from "../../background-image";
+
+import background from "../../../public/home/footer.png";
 
 const Loading = () => (
   <Box
@@ -182,25 +184,14 @@ const MailingList = () => {
           </Box>
         </Flex>
       </Card>
-      <Box
-        sx={{
-          position: "absolute",
-          display: "block",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 0,
-          background: "linear-gradient(-180deg, #33d6a6 20%, #338eda 80%)",
-          backgroundImage: `url('/pattern.svg') repeat`,
-        }}
+      <BGImg
+        width={2544}
+        height={2048}
+        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
+        src={background}
+        placeholder="blur"
+        alt="Globe with hundreds of Hack Clubs"
       />
-      {/*<BGImg
-        src={FooterImgFile}
-        alt="Hack Clubbers gather in the great outdoors of Cabot, VT, for an experience unlike any other: Outernet. 📸 Photo by Matt Gleich, Hack Clubber in NH!"
-        priority
-        gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
-      />*/}
     </Box>
   );
 };

From e042d4330e6a61cf015207505151ae2a49e2eb8d Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Fri, 6 Oct 2023 22:56:52 +0100
Subject: [PATCH 110/111] changed padding up

---
 components/mail-card.js   | 27 +++++++++++++++++----------
 public/letter-pattern.svg | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 public/letter-pattern.svg

diff --git a/components/mail-card.js b/components/mail-card.js
index c564cdf7e..71cb2cb7f 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -7,8 +7,13 @@ export default function MailCard({ body, issue, date, link }) {
     <Card
       variant="interactive"
       sx={{
+        borderRadius: 18,
+        display: "inline-block",
+        overflow: "hidden",
+        bg: "white",
         maxWidth: "1500px",
         cursor: "pointer",
+        padding: "0 !important",
       }}
     >
       <Link href={link || "/newsletter"}>
@@ -16,19 +21,21 @@ export default function MailCard({ body, issue, date, link }) {
           <Box
             sx={{
               width: "100%",
-              height: "20px",
-              backgroundImage:
-                "url('https://cloud-jopr4l3j5-hack-club-bot.vercel.app/0letter-pattern.svg')",
+              height: "10px",
+              backgroundImage: "url('/letter-pattern.svg')",
               backgroundRepeat: "repeat-x",
+              backgroundSize: "100%",
             }}
           />
-          <Text as="h1" sx={{ textTransform: "uppercase" }}>
-            {date}
-          </Text>
-          <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
-          <Text as="h2" sx={{ fontWeight: "normal" }}>
-            {body}
-          </Text>
+          <Box sx={{ p: [3, 4] }}>
+            <Text as="h1" sx={{ textTransform: "uppercase" }}>
+              {date}
+            </Text>
+            <Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
+            <Text as="h2" sx={{ fontWeight: "normal" }}>
+              {body}
+            </Text>
+          </Box>
         </div>
       </Link>
     </Card>
diff --git a/public/letter-pattern.svg b/public/letter-pattern.svg
new file mode 100644
index 000000000..3c8dc2200
--- /dev/null
+++ b/public/letter-pattern.svg
@@ -0,0 +1,36 @@
+<svg width="352" height="8" viewBox="0 0 352 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3429 8L14.509 0H20.6857L16.5196 8H10.3429Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8L4.16616 0H10.3429L6.1767 8H0Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0286 8L35.1947 0H41.3714L37.2053 8H31.0286Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.3714 8L45.5376 0H51.7143L47.5481 8H41.3714Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.7143 8L55.8805 0H62.0572L57.891 8H51.7143Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6857 8L24.8519 0H31.0286L26.8624 8H20.6857Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.0571 8L66.2233 0H72.4L68.2338 8H62.0571Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4 8L76.5662 0H82.7429L78.5767 8H72.4Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.7429 8L86.909 0H93.0857L88.9196 8H82.7429Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M93.0857 8L97.2519 0H103.429L99.2624 8H93.0857Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.429 8L107.595 0H113.771L109.605 8H103.429Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.771 8L117.938 0H124.114L119.948 8H113.771Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.114 8L128.28 0H134.457L130.291 8H124.114Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.457 8L138.623 0H144.8L140.634 8H134.457Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.8 8L148.966 0H155.143L150.977 8H144.8Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.143 8L159.309 0H165.486L161.32 8H155.143Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.486 8L169.652 0H175.829L171.662 8H165.486Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.829 8L179.995 0H186.171L182.005 8H175.829Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M186.171 8L190.338 0H196.514L192.348 8H186.171Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M196.514 8L200.68 0H206.857L202.691 8H196.514Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M206.857 8L211.023 0H217.2L213.034 8H206.857Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M217.2 8L221.366 0H227.543L223.377 8H217.2Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M227.543 8L231.709 0H237.886L233.72 8H227.543Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M237.886 8L242.052 0H248.229L244.062 8H237.886Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M248.229 8L252.395 0H258.571L254.405 8H248.229Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258.571 8L262.738 0H268.914L264.748 8H258.571Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M268.914 8L273.08 0H279.257L275.091 8H268.914Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M279.257 8L283.423 0H289.6L285.434 8H279.257Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M289.6 8L293.766 0H299.943L295.777 8H289.6Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M299.943 8L304.109 0H310.286L306.12 8H299.943Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M310.286 8L314.452 0H320.629L316.462 8H310.286Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M320.629 8L324.795 0H330.971L326.805 8H320.629Z" fill="#338EDA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.971 8L335.138 0H341.314L337.148 8H330.971Z" fill="#EC3750"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M341.314 8L345.48 0H351.657L347.491 8H341.314Z" fill="#338EDA"/>
+</svg>

From fb6f9043010b3ebd97d75d87ee253dfee735a14f Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Sat, 7 Oct 2023 19:02:42 +0100
Subject: [PATCH 111/111] wrong newsletter...

---
 components/index/cards/mailing-list.js | 20 ++++++++++----------
 components/mail-card.js                |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/index/cards/mailing-list.js b/components/index/cards/mailing-list.js
index 2ce6c64a8..cb194793f 100644
--- a/components/index/cards/mailing-list.js
+++ b/components/index/cards/mailing-list.js
@@ -100,8 +100,8 @@ const MailingList = () => {
                 as="p"
               >
                 We’ll send you an email no more than once a month, when we work
-                on something cool for you. Check out{" "}
-                <Link href="/newsletter">past issues</Link>.
+                on something cool for you. Check out our{" "}
+                <Link href="/leader-newsletters/">previous issues</Link>.
               </Text>
             </Box>
             <Grid
@@ -170,16 +170,16 @@ const MailingList = () => {
             }}
           >
             <MailCard
-              date="August 2022"
-              issue={2}
-              body="Hey friends! I'm  Ishan, I'm 17, and I'm a Hack Clubber emailing you again! A special thank you to  Belle and  Sam for helping out so much with today's newsletter."
-              link="/newsletter/2022-08-august/"
+              date="August 2023"
+              issue={18}
+              body="Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!"
+              link="/leader-newsletters/2023-08-18"
             />
             <MailCard
-              date="September 2022"
-              issue={3}
-              body={`Hey friends! Sam, Hack Clubber from Singapore, here. The last few weeks have been pretty busy at Hack Club, and this is a rundown of what your fellow Hack Clubbers have been up to lately. To start, last week, we shared 🎬 The Assemble Documentary: a film on Assemble to help answer the question "what is a hackathon?". It showcases the magical experience of attending a hackathon, and our hope is that it can help organisers share what’s in store for attendees at their hackathons.`}
-              link="/newsletter/2022-09-september/"
+              date="September 2023"
+              issue={20}
+              body="📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!"
+              link="/leader-newsletters/2023-09-29"
             />
           </Box>
         </Flex>
diff --git a/components/mail-card.js b/components/mail-card.js
index 71cb2cb7f..91756b757 100644
--- a/components/mail-card.js
+++ b/components/mail-card.js
@@ -21,7 +21,7 @@ export default function MailCard({ body, issue, date, link }) {
           <Box
             sx={{
               width: "100%",
-              height: "10px",
+              height: "12px",
               backgroundImage: "url('/letter-pattern.svg')",
               backgroundRepeat: "repeat-x",
               backgroundSize: "100%",